The dreamer
Start with the basics. What is FE and what are the things that you'll be building? How this world works?
What is a website?
What is a domain name?
What is web development?
What is the browser and how it works?
The rookie
Understand the foundations of the web developemnt.
HTML
What is a markdown language?
Anatomy of an HTML document
Head
Where to load scripts
Elements
Meta data
Headings
Attributes
Images
Paragraphs
Forms
Links
Online Playgrounds
CSS
Basic style rules
Selectors
Layouts
Responsive Design
JS
Variables
Data types
Conditions
Data structures - objects, array, json
Functions
Loops
Classes
Url and params
Async
Dom manipulation
The builder
Start building. Learn how to setup a project and keep track of your developments.
Chrome Dev Tools
Explore elements
Debugging
Modules and npm
What is an npm module
init npm repo
Git and version control
merge
commit
fetch
rebase
Linters and formatters
Eslint
Prettier
The frameworker
Get more abstract. Start using the best web framework.
React
What is a component?
What is a component?
CLI tools
Components
Rendering
Styling
Hooks
State management
API calls
The artist
Time for some meaningful aesthetic.
Advanced Styling
Css modules
Animations
Css animations
Css Frameworks
The perfectionist
Master it!
Design patterns
Component Composition
Container and Presentational
Higher-Order Components
Render Props
Custom Hooks
Context API
Controlled Components
Automation testing
Typescript
The developer
You made it!
