KOOMPI Frontend Course Outline

Internet

How does the internet work?
What is HTTP?
Browsers and hw they work?
DNS and how it works?
What is Domain name?
What is hosting?

HTML

Learn the basics
Form and validations
Conventions & Best practices
Accessibility
SEO basics

CSS

Learn the basics
Making layouts
- Floats
- Positioning
- Box model
- CSS Grid
- Flex box
Responsive Design & Media Queries

JavaScript

Syntax & Basic Constructs
- Basic data structures
- Debugging
- Object Oriented Programming
- Functional Programming
- Algorithms
Learn DOM Manipulation
Learn Fetch API/Ajax (XHR)
ES6+ and modular JavaScript
Understand the concepts
- Hoisting
- Event Bubbling
- Scope
- Prototype
- Shadow DOM
- strict

Version Control Systems

`What are they and why you should use one?

Basic usage of Git
- Github
- GitLab
- Bitbucket

Web Security

Basic knowledge of all of these would be great advantages

HTTPS
Content Security Policy
CORS
SSL/TLS
OWASP Security risk

Package Managers

They both are good. Though, we will mainly use npm.

npm
yarn

Building tools

Task runner

npm scripts

Linters and formatters

Prettiers
ESLint

Module Bundlers

Webpack
Rollup
Parcel

Framework

React.js
- Redux
- Mobx

Modern CSS

Style componentsFrontend Developer

Testing Apps

Jest
react-testing-library
Cypress
Enzyme

Type Checkers

TypeScrypt

Progressive Web Apps

Learn the different web APIs used in PWAsFrontend Developer

Storage
Web Sockets
Service Workers
Location
Notifications
Device orientation
Payments
Credentials

Calculating, Measuring Frontend Developer

RAIL Model
Performance Metrics
Using Lighthouse
Using DevTools

Server Side Rendering (SSR)

React.js
- Node.js
- Next.js

GraphQL

Apollo
Relay Modern

Static Site Generators

Hexo (Node.js)
Hugo (Go)
mkbook (Rust)
NextJS (React, Node.js)
Gatsby (React)

Mobile Applications

Flutter

Desktop Applications

Electron
Qt
Flutter

Web Assembly

Web Assembly or WASM is the binary instruction generated from languages such as C, C++, Rust, Go.

Keep moving forward...