Let me give you a simple 🚦Roadmap to know where you are, and where you should go next.
Every website has two parts. A Front end, and a Back end. The front end is the part where you see in the browser and interact with. All the visual aspects. The back end is the part that powers the front end. It's behind the scene, and it's mainly about storing data and databases and providing it to the front end.
So web development jobs fall into three categories.
- The Front-end development
- Back-end development
- and Full-stack development (involves both front-end and back-end development)
HTML is short for Hypertext Markup Language. We use HTML to define the building blocks of our web pages.
CSS is short for Cascading Style Sheet, and we use CSS for styling webpages and making them beautiful.
🔻 Here is a real example
Let's say we want to build an application like Instagram. For each post, we should have a layout this 👇
So, First, we use HTML to define all the building blocks of this layout.
What are these building blocks here?
An image, some text or username, another block of text for containing the message, and some icons for liking, commenting, and sharing.
HTML & CSS
We use HTML to add these building blocks to our web pages. Then we use CSS to give it visual effects.
For example, we use CSS to make the font bold. We can make our image round, we can add some padding, we can change the color of the icons and define their look when we hover over them.
So, CSS is all about the statics or visual effects. With CSS, we can also create beautiful animations.
Every webpage you have seen on the internet is built with these three languages.
So, the better you will learn and understand these languages and their features, the better you will be at front-end development.
🚦Front-end Developer in 6 Months
I would say if you spend 3-5 hours a day studying and coding, you should be able to have a reasonable understanding of these two languages in about a month and a half.
So, the first three months are all about fundamentals.
Now, building a website often includes a bunch of repetitive tasks. This is where front-end frameworks and libraries come in.
A framework or library comes with a lot of code that you can reuse in our websites.
So, they help us to get the job done faster. That's why a lot of companies these days use one of these popular frameworks like React, Angular, or Vue.
Now, you don't need to learn all of this to get started. Different companies use different tools for their different projects. As you move from one project to another you may want to learn about the other tools.
If you're starting out, just focus on React. Because it's the most popular tool in this space. Once you learn React, you can always learn the other tools if needed.
For React you would probably need one to two months.
💫Version Control System
All right, what's the next step?
Version control systems. We use a version control system to keep track of our project history and work collaboratively with others.
There are many version control systems out there like Git, Subversion, Mercurial, and so on. But Git is the most popular tool in this space, and it's used by more than 70% of software development teams. That's why you see it in almost all job descriptions.
You would probably need another two weeks for learning Git.
So, these are essential skills for every front-end developer must-have. You'll see this list in almost every job description.
For now, just focus on these four skills or four steps. Remember, less is more. Don't try to learn too many things quickly. You won't learn anything. You will just waste your time.
Alright, that's your roadmap.
If you are interested in Front-end developments and programming tips and tricks, feel free to visit my
Do you want to learn programming without wasting your time with lots of unnecessary theory or boring to-do app tutorials & clear and concise courses with a perfect mix?
Here is a professional coding instructor with two decades of programming experience, who made my programming journey
much easier: 👉 Mosh Hamedani
. This roadmap is derived from his “Ultimate HTML5 CSS3 Course”.
🛹 You can connect with me on:
Feel free to leave a comment💁♂️
Happy Coding :)