Begin Your Frontend Developer Journey!
Congratulations on choosing this career path. You are one step closer to becoming a frontend developer. This guide is specifically curated to help you have a smooth learning, with easy access to the right resources and data.
You will find here vast resources on frontend development ranging from who exactly is a frontend developer to the frontend development roadmap, frontend career paths, frontend development skills, tools to use, projects to build, communities to help you grow and network, videos, articles, etc
Congrats once again.
What is Frontend Development?
Learn more about what frontend development is by clicking the links below.
Frontend Development Roadmap
A roadmap is a visualization of a strategic plan. You will need one if you want to actualize becoming a frontend developer. The resources below will guide you on how to create/use your roadmap.
Joining a Tech Community is the easiest way to network with and learn from other techies in the industry for free. You get to connect to other techies with different levels of expertise, network and socialize, attend tech events, ask questions and get answers from experts and professionals, share and learn from other people's experiences, etc. Below are a few of the most popular tech communities:
Bootcamps are created to help one with little to no experience in coding gain programming skills by offering them technical training on the relevant skills. They focus on the most important aspects of coding while allowing one to apply these new skills to solve real-life problems. They are like schools and some of them offer Certificates/Diplomas upon completion. Most of them are not free. Below are a few of the most popular bootcamps:
Internships and Mentoring
Internships are a period of work often taken to gain professional learning experience relating to a field of study or career interest. You also get to be mentored by seniors and experts in your field from different parts of the world, sometimes even working on real-life projects. It can be paid or unpaid, meaning some of them pay you for partaking and successfully completing the program. You can find below, a list of organizations that offer coding internships and mentoring in the tech field.
For you to start coding, you will need a place to write and run your code. This is where code editors come in. A code editor is a text editor specifically designed for writing and editing source codes. You can find the editors used by most front-end developers below, with the most popular being VsCode.
But before diving in, check this video out;Best 3 editors for coding and why. ~ Tutmo
Online Editors (Playgrounds)
- VsCode Online
Html and Css (Beginner's Level)
HTML and CSS are the 2 most important languages when it comes to building a website. HTML which stands for Hypertext Markup Language provides the structure of the page and CSS which stands for Cascading Style Sheets determine the visual layout of web pages. These are the first set of languages you will learn as a frontend developer.
You will find enough resources below to help you learn, along with projects you can build to practice and showcase your newly acquired skills.
- 50+ Html and CSS projects. ~ Mahdi
- DevChallenges - Web Development Resources and Community that help you to become a Web Developer by working with Real-life projects and practices.
- Codewell - Improve your HTML and CSS skills by practising on real design templates.
Html and Css (Advanced Level)
Now that you have learned the basics of HTML and CSS, it' time to level up. Learn more on making your webpages more responsive and compatible on all devices using CSS Flexbox and Grid.
You can also make your pages more fun with CSS transitions and animations. Some cool projects on CSS animations will be listed down below too to inspire you.
Tips and tricks, tools, cool examples etc.
Version Control also known as Source Control is a way of managing and tracking the changes made to your code over time. This allows you to easily compare changes made and revert to old versions if the need arises. You can find different tools below that help you do that.
If you are finding Git hard to understand, you can learn GitHub Desktop created by GitHub which makes using Git less complicated. Use it for a while and then come back to Git. After that, you can choose whichever version control service you prefer among GitHub, GitLab and BitBucket.
Now that you have successfully hosted your codes on GitHub, GitLab or BitBucket, you would want a server to host your frontend applications either temporarily or permanently and also have testable links which you can share with friends and potential clients so they can admire and see the good work you have done. You can choose any of the services below.
Debugging Your Code
Debugging is a very important part of the development process. It is a process of finding and fixing errors (also known as “bugs”) in your code. These bugs can cause your code to behave unexpectedly or crash.
As a developer, you need to be able to find and fix errors in your code. The following resources will help you to learn how to debug your code.
It is a programming language used to make web pages dynamic and interactive. Those forms and buttons you have been creating that don't perform any actions, now you can make them do something.
CSS Frameworks and Libraries
CSS frameworks and libraries are reusable codes written by someone else that you can use instead of writing your CSS code from scratch.
Note: You do not need to learn all of them, you just have to know at least one CSS-only and one CSS-Js framework/library.
Before picking your first framework/library, check these videos out;What are frameworks and libraries. ~ CodeacademyTop CSS frameworks to check out in 2021. ~ Adrian Twarog
Bootstrap Css and Js
Styled ComponentsCss only
- Tailwind Css crash course. ~ Traversy MediaVideo
- Tailwind Css tutorials for beginners. ~ ScrimbaVideo
- Tailwind CSS tutorial. ~ The Net NinjaPlaylist
- Build and deploy a personal Portfolio using Tailwind CSS. ~ Design CourseVideo
- Build Facebook UI clone using Tailwind Css. ~ IthinktechnologiesVideo
Chakra UICss only
CSS Processors allow you to write css-like codes which you can then compile into normal CSS code. You get to write CSS as if you were writing a programming language which in turn offers you a wide variety of logical syntax. Don' fret, it' easier than it sounds. Check them out below.
An API is an intermediary between two applications software allowing them easily communicate and share data. It stands for Application Programming Interface. This is easy to understand by both computers and humans as it's outputted in key/value pairs. Find out more below.
Tips and tricks, tools, cool examples etc.
- 6 APIs Frontend Developers Should Know ~ A SmithArticle
- JsonPlaceholder - Free fake API for testing and prototyping.Tool
- Postman - Postman is an API platform for building and using APIs.Tool
- Create your own fake rest API with JSON server. ~ Traversy MediaVideo
- Make your own mock API. ~ Code with Abba KubowVideo
- ReactJs crash course. ~ Traversy MediaVideo
- ReactJs full course for beginners. ~ FreeCodeCampVideo
- Full modern ReactJs tutorial. ~ The Net NinjaPlaylist
- React Router crash course. ~ FreeCodeCampVideo
- React Router 6. What changed and upgrading guide. ~ AcademindVideo
- React hooks course. All React hooks explained. ~ PedroTechVideo
- React hooks tutorial. ~ CodevolutionPlaylist
- 15 ReactJs projects . ~ FreeCodeCampVideo
- VueJs crash course. ~ Traversy MediaVideo
- VueJs full course for beginners. ~ FreeCodeCampVideo
- VueJs 3 tutorial. ~ The Net NinjaPlaylist
- Learn Vuex ~ The Net NinjaPlaylist
- Vuex tutorial Full course ~ ScrimbaVideo
- Vue Authentication full course ~ Scalable Scripts.Video
- Build a restaurant management project with VueJs. ~ Code step by stepPlaylist
- Build an invoice app with Vue3, vuex and firebase. ~ John KormanickiVideo
Brand your UI components once with CSS Custom properties then use across several UI frameworks like React, Vue 3, or Svelte!
Below are tools you can use to aid the creative process from, free photos to icons, fonts and other goodies. Explore them.
- Google Material IconsFree
- Font Awesome IconsFree
- IconStore - Free Icons by First-Class Designers.Free
- FlatIcons - Access +6.7M vector icons & stickers.Free
- Loaf - Animated SVG icons.Free
- Seeklogo - Seeklogo is the world' best brand logo and vector logo template source.Free
- Fontello - icon fonts generatorFreeTool
Illustrations and Patterns
Gradients and Color schemes.
Other Useful Resource
This is a collection of other useful resources that couldn't fit into the sections above. Explore!
Pat yourself on the back for making it this far. Do continue to practice your skills, build more projects, and apply for jobs. If you plan on becoming a FullStack Developer, then check out our Backend Development Roadmap.
Feel free to tweet a thank you to us at @techroadmap__ on twitter and if you have any questions or comments, feel free to send us a dm too or email us at firstname.lastname@example.org. Don't forget to give us a Star on our GitHub repo!