In the previous post, you learned about the roadmaps to become a Frontend Developer or upgrade your skill set as a Frontend Developer. The roadmap is good for helping you set and complete those milestones one by one to achieve your ultimate goal of becoming an expert frontend developer. In this article, you will learn frontend development with free official documentation, Books, Tutorials, Articles, Courses, Cheatsheets & Communities.
You can pick the topic you want to cover and start learning right from the topic’s introduction, refer to the links, and dive deeper into the topic. Once you understand the topic well, you can return to this article and move on to the next topic. Bookmark this article so that you can always come back. Let’s start with the frontend Basics.
Learn Frontend Development(Basics)
HTML
HTML, or HyperText Markup Language, is the basic building block for creating webpages. It uses simple tags to structure and format content like text, images, and links on a web page. Think of it as a list of instructions that tell the browser how to display a webpage. Mastering HTML is your first step to becoming a frontend developer.
- Documentation – W3C HTML Specification
- Book — HTML and CSS: Design and Build Websites by Jon Duckett
- Tutorial — W3Schools HTML Tutorial
- Blog Posts — HTML5 Basics
- Courses — FreeCodeCamp HTML and HTML5
- Cheatsheets — HTML Cheatsheets
- Communities
- Stack Overflow — HTML Questions on Stack Overflow
- Reddit — r/HTML
- FreeCodeCamp Forum — FreeCodeCamp Forum
CSS
CSS, or Cascading Style Sheets, is used to style and layout web pages. It allows you to change colors, fonts, spacing, and overall appearance of your HTML elements. Think of CSS as the design manual for your website, making it look appealing and organized.
- Documentation – MDN CSS Specification
- Book — CSS: The Definitive Guide by Eric A. Meyer
- Tutorial — W3Schools CSS Tutorial
- Blog Posts — CSS-Tricks
- Courses — FreeCodeCamp Responsive Web Design Certification
- Cheatsheets — CSS Cheatsheets
- Communities
- Stack Overflow — CSS Questions on Stack Overflow
- Reddit — r/CSS
- FreeCodeCamp Forum — FreeCodeCamp Forum
JS
JavaScript (JS) is a programming language that makes web pages interactive and dynamic. Unlike HTML and CSS, which structure and style your web content, JavaScript allows you to add functionality like clickable buttons, forms that validate user input, and animations. It helps you turn a static webpage into an interactive, easy-to-use page.
- Documentation — MDN Web Docs – JavaScript
- Book — Eloquent Javascript by Marijn Haverbeke
- Tutorial — JavaScript.info
- Blog Posts — Smashing Magazine JavaScript
- Courses — FreeCodeCamp JavaScript Algorithms and Data Structures
- Cheatsheets — JavaScript Cheatsheet
- Communities
- Stack Overflow — JavaScript Questions on Stack Overflow
- Reddit — r/JavaScript
- FreeCodeCamp Forum — FreeCodeCamp Forum JavaScript
Git
Git is a version control system that helps you track changes in your code and collaborate with others. It lets you save different versions of your work, so you can easily revert to previous stages if needed. Git is a collaboration tool for software development projects.
- Documentation — Git Official Documentation
- Book — Pro Git by Scott Chacon and Ben Straub
- Tutorial — Learn Git Branching
- Blog Posts — Atlassian Git Tutorials
- Courses — Udacity Version Control with Git
- Cheatsheets — Git Cheatsheet
- Communities
- Stack Overflow — Git Questions on Stack Overflow
- Reddit — r/git
- GitHub Community Forum — GitHub Community Forum
Frontend Framework
A frontend framework is a pre-built collection of tools and best practices that help you develop a web application’s user interface more efficiently. It provides reusable components, structure, and guidelines for building web pages, allowing you to create responsive and dynamic UIs quickly. Popular examples include React, Angular, and Vue.js. Choose any framework of your choice and learn the basics using the resources below.
React
React is a widely-used JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of applications effectively.
- Documentation — React Official Documentation
- Book — Learning React by Alex Banks and Eve Porcello
- Tutorial — React Tutorial for Beginners
- Blog Posts — React Blog
- Courses — FreeCodeCamp’s React Course
- Cheatsheets — React Cheatsheet
- Communities
- Stack Overflow — React Questions on Stack Overflow
- Reddit — r/reactjs
- Dev.to — React Community
Vue.js
Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and can be used for building both simple and complex applications.
- Documentation — Vue.js Official Documentation
- Book — Beginning Vue 3 Development By Greg Lim
- Blog Posts — Vue.js Blog
- Courses — Vue Mastery Free Courses
- Cheatsheets — Vue.js Cheatsheet
- Communities
- Stack Overflow — Vue.js Questions on Stack Overflow
- Reddit — r/vuejs
- Vue Land Discord — Vue Land Discord Community
Angular
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is maintained by Google and offers a comprehensive solution for developing scalable web applications.
- Documentation — Angular Official Documentation
- Tutorial — Interactive Angular
- Blog Posts — Angular Blog
- Courses — Udemy – Angular for Beginners
- Communities
- Stack Overflow — Angular Questions on Stack Overflow
- Reddit — r/Angular
- Angular Discord — Angular Discord Community
Package Manager
A package manager is a tool that automates installing, updating, and managing software libraries or dependencies for your projects. You might have used one while learning a Frontend Framework in the previous step. It makes it easy to use other packages in your project and keep everything up-to-date without manually downloading and configuring each library.
npm (Node Package Manager)
- Documentation — npm Official Documentation
- Tutorial — Node.js – NPM
- Courses — Udemy – npm – Mastering the basics
- Cheatsheets — npm Cheatsheet
- Communities
- Stack Overflow — npm Questions on Stack Overflow
- Reddit — r/npm
Yarn
- Documentation — Yarn Official Documentation
- Blog Posts — Yarn Blog
- Cheatsheets — Yarn Cheatsheet
- Communities
- Stack Overflow — Yarn Questions on Stack Overflow
- Reddit — r/javascript (General JavaScript community that also discusses Yarn)
Testing your App
Testing your app involves running various checks to ensure it works as expected and is bugs-free. This includes unit tests to verify individual components, integration tests to see how different parts work together, and end-to-end tests to simulate real user interactions. Thorough testing helps ensure reliability and quality before your app reaches users.
Jest
- Documentation — Jest Official Documentation
- Book — Testing JavaScript Applications by Lucas da Costa
- Tutorial — Jest Testing – A helpful introductory Tutorial
- Blog Posts — Jest Blog
- Courses — Udemy – Test Driven Development using Javascript and Jest
- Communities
- Stack Overflow — Jest Questions on Stack Overflow
- GitHub Community — Jest on GitHub
Cypress
Cypress is a next-generation front-end testing tool built for the modern web. It enables you to write E2E tests, integration tests, and unit tests.
- Documentation — Cypress Official Documentation
- Book — End-to-End Testing with Cypress by Waweru Mwaura
- Tutorial — Cypress Tutorial for Beginners
- Blog Posts — Cypress Blog
- Courses — Cypress Course
- Communities
- Stack Overflow — Cypress Questions on Stack Overflow
- Reddit — r/CypressIO
This is all you need to learn about basic frontend development. In the next article you will learn advanced frontend development, we will dive deeper into these and some additional topics. Please follow the link below for the advanced frontend development roadmap and resources.
