Goal: An overview about this tabs component project.
My aim is to give ready to use examples.
You can obtain source examples here:
Towards Modern Web Development
Go ahead jump!
I have been thinking lately,
on how to explain web development for beginner, in a faster fashioned.
And I decide to go straight away
from basic stuff (html+css+js)
This way, beginner can step into modern framework,
without the burden of reading too many stuff.
To be exact these are the steps:
Plain CSS, then
Tailwind CSS. Skipping the whole
oldschool inline, then
Custom HTML component
At the same time, I have seen beginner copy-paste stuff from the internet, without knowing how it works, especially CSS Framework users. Of course using ready to use component is easier. It works well, but beginner will quickly stuck, by the limitation of one particular technology. And a moment later beginner can realize, that their skill goes to nowhere.
The thing is, anyone can make their own custom component. All you need to do is be brave. Just start make your own custom component. This article will show you how the proces can be done, from scratch to complete.
This likely require imagination in the first place, than ended up with technical skill. No need to be perfect, since you can enhance later anyway. Once you start, it is going to be just a regular coding process. It takes time to finish, but nothing scary. The hardest part is to start.
Howver, you never know if you never try.
Step By Step.
But how exactly?
I arrange this article series as below:
- CSS: Basic layout with
- CSS: Two Layouts for Tabs Component.
Alpine.js(inline), and (extracted).
Two Tabs Components
Why not both?
I made two tabs components.
- Simple Tabs
- Enhanced Tabs
For each step, I start with simple tabs, so reader can understand how it works. Then I continue with enhanced tabs, so you can adapt the basicknowledge, to real live components making situation.
Mobile Mockup for Enhanced Tabs:
Desktop Mockup for Enhanced Tabs:
mobile first to manage responsive in stylesheet.
It looks cool.
tailwind is suitable for working with modern web development.
In my own opinion, is from productivity perspective.
Maintaining stylesheet rules is nightmare,
that is why we need classes.
Maintaining classes is also nightmare,
that is why we need
Tailwind will significantly reduce,
the use of
We do not really need to use
tailwind to make a component.
This is just silly to force to use tailwind for very simple project.
But you are going to need
to work with other modern web development tools.
So I guess
tailwind knowledge is a must these days.
Suitable for beginner.
alpine.jsis direct replacement of the obsolete
jQuery. This is why I put a
jQueryarticle as an example, so that you can compare between the two.
Second, alpine is lighter than
alpine.jsdoes not try to do backend stuff, so beginner does not have the burden to learn too far. But there might be limitations as trade-off.
At last, bridging. if you understand
alpine.js, then you can turn the code to modern web development. Such as porting to
Instead of programming line by line, you just need to declare, what to do with the DOM.
All this conventional frontend frameworks, are
running without the needs of bundle.
This means easy to setup.
This journey stop with
vue.js that also can be served via CDN only.
Then we continue to step in, to mdern web framework using NPM.
Modern means: Use bundler 😀.
I intent to write more, such as
I do it for myself, so I can compare each framework easily.
I started with
because it is easy to port from
And it is easy to port from
And later with bundle in mind,
]you can port to other modern framework as well.
To avoid many too setup, I am intentionally use plain HTML. This is a setup free situation. Beginner can just open the file from file manager. I believe this is easier for beginner.
This is require careful setup.
Optionally, I have setup
browser-sync for convenience reason.
So you can open the files right away from browser.
This reduce the need to repetitively go back and forth,
from file manager to browser.
$ browser-sync start --server --directory
I arrange the directoy as below:
❯ tree -d -L 1 . ├── css ├── js └── tailwind
html files are in the root of this working directory.
I began this making
how to section from
But this good tutorial seems to be made a decade ago,
so I decide to make the component from the scratch,
without even copy paste the code from
However if you wish to know the original component, you can read here first.
Frankly speaking, making my own custom component gives me freedom, while blogging. I do not need to care anymore, about giving any credits to any third party. Because I did it myself.
This blog is mainly talking about web development.
typescript in CLI,
you might consider to have a look at my other blog,
for example this article series:
Before we begin, we need to build a basic HTML layout.
Consider continue reading [ Tabs - CSS - Flex Layout ].