lansa-18/frontend-playbook

The only playbook you need to figure out your frontend career

Frontend Web Development Roadmap

Phase One: Learning

Basic

1. Get familiar with an editor (Visual Studio Code Recommended)

2. HTML5

• HTML Structure
• Tags & Elements

3. CSS3

• Basic Styling
• Learn about adding colors and typography
• Learn how Class and IDs work with HTML tags
• Learn about Pseudo Classes

4. JavaScript

• JS Output
• JS Statements
• JS Logical Conditions
• JS Syntax
• JS Comments
• JS Variables, Let & Const
• JS Operators (+, -, x, ÷)
• JS Data Types

Intermediate

1. HTML

• HTML Forms
• HTML Canvas
• SVG
• Adding Media (Video, Audio, Embeds)

2. CSS

• Styling Forms
• Attributes Selectors
• Measurement Units (px, rem, em, %, vh, vw)
• Layout
• CSS Variables
• Using Web Fonts
• Responsiveness

3. JavaScript

• JS Loops
• JS Objects
• JS Classes
• JS Events
• JS Functions
• JS Strings and Numbers (Methods)
• JS Arrays
• JS Dates
• Math
• JS Scope
• JS Hoisting
• DOM Manipulation Basics

4. Git & GitHub

• Creating/Initialising a Repo
• Commits
• Push & Pull
• Pull/merge Requests
• Branches

Advanced

Phase Two: Building

Basic

• Simple Recipe App
• Dog Photo App
• Pricing component for a physical product

Intermediate

• Clone a popular website
• Weather App
• Tip Calculator
• Random fun facts website

Advanced