Let me give you a simple to know , and . 🚦Roadmap where you are where you should go next 🔑Key Concepts Every website has two parts. A , and a . The is the part where you see in the browser and interact with. All the . The is the part that . It's behind the scene, and it's mainly about storing data and databases and providing it to the . Front end Back end front end visual aspects back end powers the front end front end 🌐Jobs 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 🤹‍♀️Front-end Development Front-end developers use and to build . So Let's talk about , , and . HTML CSS JavaScript Frontend HTML CSS JavaScript is short for . We use HTML to define the building blocks of our web pages. HTML Hypertext Markup Language is short for , and we use CSS for webpages and making them beautiful. CSS Cascading Style Sheet styling is used for to web pages. JavaScript adding functionality 🔻 Here is a real example Let's say we want to build an application like . For each post, we should have a layout this 👇 Instagram So, First, we use to define all the building blocks of this layout. HTML What are these building blocks here? An image, some text or username, another block of text for containing the message, and some icons for and . liking, commenting, sharing HTML & CSS We use to add these building blocks to our web pages. Then we use to give it visual effects. HTML CSS For example, we use to make the font . 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. CSS bold So, With , we can also create beautiful animations. CSS is all about the statics or visual effects. CSS JavaScript Now, most web pages these days are interactive. The response to our actions, like clicks and scrolls. This is where comes in. With JavaScript, we can add to our web pages. For example, we can like a post. JavaScript functionality or behavior So is a programming language while and are not. Meaning, We can't use them to tell the computers what to do. We use them to define the building blocks of our web pages and them. JavaScript HTML CSS style Every webpage you have seen on the internet is built with these . three languages , the you will learn and understand these languages and their features, . So better the better you will be at front-end development 🚦Front-end Developer in 6 Months So, starts with & . your front-end development journey HTML CSS I would say if you spend , you should be able to have a reasonable understanding of these two languages . 3-5 hours a day studying and coding in about a month and a half Once you learn these languages, then you need to learn . JavaScript I would say learning JavaScript would probably take of your time. another six weeks(1.5 months) Of course, you're not gonna be in just six weeks. But you will have a reasonable understanding of it, and you will learn more as you work on different projects. JavaScript experts So, the first three months are all about fundamentals. 🛠Frameworks Now, building a website often includes a bunch of repetitive tasks. This is where front-end and come in. frameworks libraries 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 . That's why a lot of companies these days use one of these popular frameworks like or . faster React, Angular, 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. ⚛React If you're starting out, just focus on . Because it's the most popular tool in this space. Once you learn React, you can always learn the other tools if needed. React For you would probably need . React one to two months 💫Version Control System All right, what's the next step? . We use a version control system to keep track of our and work collaboratively with others. Version control systems project history 📌Git There are many version control systems out there like and so on. But is the in this space, and it's used by . That's why you see it in almost all job descriptions. Git, Subversion, Mercurial, Git most popular tool more than 70% of software development teams You would probably need for learning . another two weeks Git 📝Conclusion So, these are essential skills for every must-have. You'll see this list in almost every . front-end developer job description For now, just focus on these . Remember, less is more. Don't try to learn quickly. You won't learn anything. You will just . four skills or four steps too many things waste your time Alright, that's your . roadmap ☕_Buy me a coffee https://www.buymeacoffee.com/codewithshahan 🧷Recommendation If you are interested in developments and and , feel free to visit my Front-end programming tips tricks 🔗 YouTube Channel 👓Special Do you want to learn without wasting your time with lots of unnecessary theory or boring tutorials clear and concise courses with a perfect mix? programming to-do app & Here is a professional coding instructor with two decades of programming experience, who made my much easier: 👉 . This roadmap is derived from his “Ultimate HTML5 CSS3 Course”. programming journey Mosh Hamedani 🛹 : You can connect with me on Twitter ▶ https://twitter.com/codewithshahan Github ▶ https://github.com/codewithshahan Instagram ▶ https://instagram.com/codewithshahan Feel free to leave a comment💁‍♂️ Happy Coding :)

BUNCH

Instagram

Twitter

YouTube

Newsletter

Hire Me

Too Long; Didn't Read

Make resilience your competitive advantage

Become a Front-End Developer in 6 Months with These 4 Skills

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps