Front-end development is a broad field with many nuances. But when we visit websites, the front-end is our first point of contact. Understanding where to direct one’s attention in learning might take time and effort. However, the first step is discovering the specific topics that require your attention. Let’s dive into today’s topic, where I provide a roadmap for you to follow on your way to becoming a Front-end Developer in 2023!
Front-end development involves building a website or web application’s user interface (UI). It includes the application’s visual part and the user’s interaction.
Whatever you see when you visit a website – different types of buttons and other UI elements, media, text, forms, animations, etc., are the fruit of a frontend developer’s work.
I started my adventure with programming only in my 1st year of university – before that, I had no exposure to it. I just wanted to work in IT because technology has always fascinated me.
I remember my first frontend class – we were tasked with writing a straightforward website in HTML and CSS. At that time, I didn’t even know what they were. I tried it, liked it, and decided what I wanted to do next in life. A year and a half later, I got my first job at Applover as a front-end developer in Vue.js.
If you are at the beginning of your journey, even before you start writing actual code – learn how the Internet works from the backend. Read what protocols are, how browsers work, and what a domain, hosting, and DNS are.
Even if you don’t use this knowledge directly in your future work – it will be a great introduction to your later learning and will make you understand the environment more.
Also, see how the GIT version control system works and the repositories where you will keep your projects.
Start with HTML and CSS. Find a tutorial on YouTube or Udemy and put up your first page with the tutor. You will see that it’s easy. Practice CSS so you can easily create any layout you want. Find out what CSS preprocessors (CSS with superpowers) are – SCSS, SAAS, and LESS. They will make working with CSS more accessible and reduce the amount of code needed.
When you feel confident, map the layouts of the pages you like. You will then understand why they are designed a certain way and learn about building UIs. I recommend the current course by Maximilian Schwarzmuller – 100 Days Of Code – 2022 Web Development Bootcamp (disclaimer: none of the courses in this article are sponsored).
If you choose as I do – Vue, I recommend you take Maximilian Schwarzmuller’s course – The Complete Guide (incl. Router & Composition API).
If you watch someone else code, try to write code with them. You’ll become more proficient at coding and remember more things. After each tutorial, develop a project incorporating the recently acquired skills and implement them in your case. You will feel confident in this programming language even if you encounter difficulties.
There is no greater satisfaction for a young programmer than completing his/her project. I recommend the Frontend Mentor website, where you can find many exciting ideas for your projects for programmers of all levels and ready-made designs. Upload them to your repository and build your portfolio.
I have a simple rule – the code I wrote can always be better, simpler, shorter, and more efficient.
Therefore, even if something works, try to improve it – make a refactor. You will see how many things can be written more simply once you have the solution. A good resource would be the books “Clean Code” and “Master of Clean Code” by Robert C. Martin.
Check out this great roadmap – it includes virtually all the skills you need to become a front-end developer.
There are many more topics you will need to explore. The ones listed above provide a solid foundation for becoming a junior developer. Testing, CSS frameworks, TypeScript, PWA, and server-side rendering are the most important on your future path.
I’m crossing my fingers for you; best of luck!