×
☰
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).
That’s what Javascript is to me – magic that makes previously static, predictable, and simple elements of a website start to live, react and be interactive. You’ll be able to write virtually unlimited logic for how your site works. First, learn the basics of pure (vanilla) JavaScript before you move on to using the framework.
In addition to just learning the language, learn good practices such as SOLID, KISS, and DRY. You can check out the course by Jonas Schmedtmann, The Complete JavaScript Course 2022: From Zero to Expert.
There will come a time when you will want to try the new possibilities that come with web development using JavaScript frameworks. With them, you will be able to create previously impossible functionality. You will get tools to manage application state, routing, and responsiveness. Once you are well acquainted with the framework of your choice, you will be on a great way to finding your first job.
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.
It used to be that to become a front-end developer, all you needed was a good knowledge of HTML, CSS, and the basics of JavaScript. Thus, it was pretty easy.
Currently, in addition to HTML and CSS, you need to know one of the JavaScript frameworks such as Angular, React, or Vue, the GIT version control system, CSS preprocessors, code writing conventions, and much more…also the amount of knowledge is constantly growing. All the better if you start sooner. Remember that as the requirements on the market increase, so do the number of excellent courses and tools to facilitate development.
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.
Once you have a few projects in your portfolio and a good knowledge of the Javascript framework of your choice, look for jobs and internships for junior front-end developers. You may find an internship at first, thanks to which you’ll get your first job. The universal advice at this point would be to learn from job offers and interviews – you’ll see what the job market demands and know what you still need to learn.
A great way to prepare for a job interview is through Javascript flashcards. They cover vanilla JS and frameworks such as React, Angular, and Vue. At the moment, they are only available in Polish.
I’m crossing my fingers for you; best of luck!
Source: applover
Blogs
