This is a roadmap to become a frontend developer from scratch. We look at basics of HTML, CSS, JavaScript initially and then cover topics like git, npm, JS libraries and frameworks, code testing and more.

Say Hello to HTML Elements

Headline with the h2 Element

Inform with the Paragraph Element

Fill in the Blank with Placeholder Text

Uncomment HTML

Basic HTML5 Exercises

Build a Tribute Page

Build a Survey Form

Build a Product Landing Page

HTML/CSS Practice Projects

Kickstart

Introduction

codedamn HTML Playground

First HTML Page

Comments in HTML

HTML5/CSS3 Tutorials - Learn the core of web

What is HTML5?

Meta tags in HTML

Logical v/s Physical tags

Conditional comments

Advanced HTML5/CSS3 Concepts

HTML is the fundamental part of web. It is important to get the basics solid. Learn about what HTML is in general and how to start working with it

Change the Color of Text

Use CSS Selectors to Style Elements

Use a CSS Class to Style an Element

Style Multiple Elements with a CSS Class

Change the Font Size of an Element

Basic CSS3 Exercises

Use display: flex to Position Two Boxes

Add Flex Superpowers to the Tweet Embed

Use the flex-direction Property to Make a Row

Apply the flex-direction Property to Create Rows in the Tweet Embed

Use the flex-direction Property to Make a Column

Learn CSS3 Flexbox Layout System

Create Your First CSS Grid

Add Columns with grid-template-columns

Add Rows with grid-template-rows

Use CSS Grid units to Change the Size of Columns and Rows

Create a Column Gap Using grid-column-gap

Learn CSS3 Grid Layout System

CSS is an absolute must language to know if you want to design beautiful, responsive and cross compatible websites and apps. It is a powerful tool which unlocks a lot of opportunities on the web

Basics are important, let's spend some time learning about basics of CSS - what it is and why you need it.

Flexbox Layout is THE most important concept in CSS - hands down. If you know flexbox well enough, you can recreate 95% of the websites today with top code quality.

CSS3 introduces another way of creating awesome layouts - Grid. Let us learn and practice about grid layouts with these exercises and videos.

Media Queries allow you to customize CSS behavior dynamically, depending on a number of factors - screen size, dark mode, accessibility and more. We will cover fundamentals of media queries and how to work with them.

Comment Your JavaScript Code

Declare JavaScript Variables

Storing Values with the Assignment Operator

Assigning the Value of One Variable to Another

Initializing Variables with the Assignment Operator

Basic JavaScript Challenges [Theory]

Use an Array to Store a Collection of Data

Access an Array's Contents Using Bracket Notation

Add Items to an Array with push() and unshift()

Remove Items from an Array with pop() and shift()

Remove Items Using splice()

Algorithms and Data Structures Exercises In JavaScript

Palindrome Checker

Roman Numeral Converter

Caesars Cipher

Telephone Number Validator

Cash Register

JavaScript Algorithms and Data Structure Projects

What is JavaScript?

Text Editors

Setting up development environment

How to use JavaScript?

Variables

JavaScript Basics - Start writing JS code

Setting up the project

HTML basics

CSS Basics

Explaining variables

Learn JavaScript by building Tetris

HTML input Element Setup

JavaScript Select Elements

JavaScript querySelector

Adding an Event Listener

Element Value JavaScript

Practice JavaScript by building 10+ real projects

JavaScript is the fundamental language to program web applications. It is universally available on servers, web, mobile devices, IoT devices, and even in space! Thanks to SpaceX :)

Basics are so important! Let's get a solid base understanding of JavaScript before exploring other things

DOM is an important part for JS. Let's learn more about how to work with DOM and why it is so important to have a good understanding about it

Working with different browsers can be challenging. Let's see what sort of APIs browsers give us and how to make the best of them

Intermediate features for JavaScript could help you develop a deeper understanding of the language and how everything is tied. Let's see how that works

Introducing Git

Using the terminal and installing Git

Preparing Git settings

Making our first project directory

Creating (initializing) a repository

Git Learning Journey - Learn Git (Version Control)

VCS like git are very useful and important when you're working on serious projects. They help you manage your workspace and store all history of your code securely.

VCS is important. Let's learn more about how it helps you and why it is suddenly important to learn about

We will learn about basics of git - what Git is and how it works/why it is useful and how exactly you can incorporate it in your workflow

Git and GitHub is a popular combined choice. Let's see how you can leverage GitHub to host your Git repos

Learning about git could take a while. Let's dive deep into more of Git, how it works and why you would probably need that

Introduction to series

What is NPM? How is it related to Node?

NPM vs Yarn

Installing NPM and Node on your system

Why Node versioning is required?

NPM Mastery: Learn NPM fundamentals

Setup

Prerequisites for the course

Hello DevTools

Console 101

Chrome DevTools Course

There are some tooling in the frontend world you should be aware about. They make your life much easier to debug or iterate on business logic instead of focusing on already solved problems

We would be looking at two most commonly used package managers in the web ecosystem and going in depth of learning about npm

Debugging is a super important topic, and you should spend some time learning how to use Chrome DevTools along the way.

What is Webpack

Webpack vs Grunt

Webpack Hello World on zero configuration

Config introduction

Webpack 4 - First Steps

It is important to know your tooling as a frontend developer. Let us take out some time to understand a few common tools used all the time.

Introduction to project

Setting the first question dynamically

Setting the first question answers dynamically

Adding question index state variable

Handling quiz end

React Quiz Project - Create a mini quiz app in React

Creating the project structure

Adding player styles

Loading multiple videos through API

Snapping videos to top

Build TikTok clone in React

Creating birthday view container

Populating static list data

Displaying the UI

Adding a Clear button

Create a birthday reminder with React

Introduction to Project

Fetching Tours Data

Setting Loader

Creating Tours UI

Adding "Read More" button

React Tours Project - Build a simple tours application

First Program

First Program Explained

File structure

Components

React Tutorials

Introduction - Welcome

Project Structure

Creating Inputs

Using States

Changing States

Learn ReactJS by Building 6 Projects

Now it is time to pick a library/framework like React, Angular, Vue. At codedamn, we recommend going with React, but feel free to choose your own way.

React is a library which makes it painless to create reusable components and feature rich apps. These courses and practice classrooms would teach you basics of working with React.

Angular

We will also explore some common framework options which work well with frameworks. They help you to boost your productivity by focusing on business logic more.

CSS framework

cy.contains

cy.get

cy.should

cy.viewport

Cypress Full Course - End to end testing tool for the modern web

Code testing is super important to have confidence in your deployments. In this section, let us learn about code testing and best practices you should know about code testing.

Setup and Hello World

Primitive Types

Instance Types

Arrays And Tuples

Object Types and Type Aliases

TypeScript Fundamentals - Zero to Expert

Now is a good time to learn about best practices when running JavaScript in production. Here, TypeScript helps a lot to enforce a strict typing system in JavaScript

TypeScript helps a lot to enforce a strict typing system in JavaScript. This module covers everything you need to learn in TypeScript as a professional.

Scaling JavaScript

Advanced Web JS

Frontend Developer