2026 Beginner Front-End Course

Computer basics: what a computer is, what files and folders are, understanding file extensions (.html, .css, .js, .png, .json), installing software, basic keyboard shortcuts for developers and how to organize projects on your computer.

Internet basics: what the internet is and how it works, what a browser is and how it loads a website, understanding URL, domain, hosting and DNS, the difference between HTTP and HTTPS and what browser dev tools are and why developers use them.

Web fundamentals: what a website is, the difference between frontend, backend and full‑stack, how browsers read HTML, CSS and JavaScript, static vs dynamic websites and what a modern website structure looks like in 2026.

Installing and using VS Code: what a code editor is, installing VS Code and beginner‑friendly extensions, creating your first project folder, a guided VS Code interface tour and using the integrated terminal.

Using Emmet in VS Code for much faster HTML and CSS coding as a beginner.

Setting up browser developer tools: inspect element, checking mobile view, reading console messages and basic performance insights.

Installing Node.js and npm for frontend developers: why Node.js is needed, using npm to install packages and learning basic terminal commands in a beginner‑safe way.

What HTML is and how it structures a web page: anatomy of an HTML document, tags, attributes, values and self‑closing tags.

Basic HTML elements: headings, paragraphs, line breaks, horizontal lines, comments, lists (ul, ol, dl) and images using absolute vs relative paths.

Linking and navigation: anchor tags, internal links, external links, linking pages in multi‑page websites and opening links in a new tab.

HTML text formatting: b, strong, i, em, mark, ins, del, sub, sup and a beginner‑friendly explanation of span vs div.

Semantic HTML5: why semantics matter for SEO and accessibility, using header, nav, main, section, article, aside, footer and building a real‑world page layout with semantic HTML.

Media in HTML: embedding images, HTML5 videos and YouTube iframes, embedding audio and creating download links for PDFs, images or zip files.

Tables in HTML: table, tr, td, th, table headers, captions and merging cells using colspan and rowspan.

Forms (very beginner‑friendly but deep): form tag and input types (text, email, password, number, date, time, color picker, file upload), radio buttons, checkboxes, select dropdowns and optgroup, textarea, labels and fieldsets for accessibility, HTML5 validation (required, pattern, min, max), submit and reset buttons, form best practices and building a full contact form project.

What CSS is: how CSS connects to HTML, why CSS is important and the difference between inline, internal and external CSS (when to use each).

Basic selectors and syntax: class selectors, ID selectors, tag selectors, universal selectors, descendant and child selectors and group selectors.

Colors and backgrounds: named colors, hex, RGB and HSL; background color, background images and gradients; background repeat, size and position.

CSS box model (deep understanding): margin, padding, border, content area, box‑sizing: border‑box and how to debug layout issues visually.

Typography: font‑family, web‑safe fonts, using Google Fonts (2026 way), font‑size units (px, rem, em), line‑height, letter‑spacing, text alignment, text decoration and responsive typography.

Display properties: block, inline, inline‑block and none; hiding elements; visibility vs display differences in practice.

Positioning in CSS (beginner‑friendly but deep): static, relative, absolute, fixed, sticky and a visual explanation of z‑index.

Modern layouts with Flexbox: main axis vs cross axis, flex‑direction, flex‑wrap, justify‑content, align‑items and align‑content, including a practical navbar built with Flexbox.

Modern layouts with CSS Grid: defining grid rows and columns, gap, grid‑template‑areas, building responsive grid layouts and creating a full homepage layout with CSS Grid.

Styling images and effects: opacity, simple filters (blur, grayscale, brightness), hover effects, transitions and basic keyframe animations.

Responsive web design: mobile‑first approach, common 2026 breakpoints, responsive text, images and layouts and building a complete responsive website project.

CSS variables (custom properties) and how to use them to centralize colors, spacing and fonts.

CSS pseudo‑classes and pseudo‑elements for hover states, focus states and decorative elements.

CSS shadows and gradients for modern, soft UI designs.

Beginner‑friendly CSS animations: keyframes and smooth transitions for interactive effects.

Implementing dark/light mode using CSS variables and simple toggles.

Introduction to Bootstrap: why developers use it, installing with CDN and understanding containers and the grid system.

Core Bootstrap components: buttons, cards, alerts, badges, breadcrumbs, progress bars and spinners.

Navigation components: navbar, dropdowns, tabs and pills and an offcanvas sidebar.

Bootstrap forms: floating labels, input groups and using Bootstrap classes for validation states.

JavaScript‑powered components: modal, tooltip, toast and carousel (without writing custom JS).

Building a responsive website project using Bootstrap’s grid and components.

JavaScript for total beginners: where JS runs, using console.log(), comments, variables (let, const) and core data types.

Operators and expressions: arithmetic, comparison and logical operators.

Conditions and loops: if, else, else if, switch, for, while, do‑while, break and continue.

Functions: function declarations, function expressions, arrow functions, parameters and return values.

Arrays: creating, reading, updating and deleting items; beginner‑friendly introduction to map, filter and reduce.

Objects: properties and methods, CRUD operations on objects and working with objects inside arrays and arrays inside objects.

DOM mastery (beginner → pro): selecting elements, changing text and content, changing CSS with JS, adding/removing classes, creating and removing elements and handling events (click, submit, input, keyup, mouse events).

Working with browser storage: localStorage and sessionStorage to save user data locally.

JSON (complete beginner‑friendly): what JSON is, converting JavaScript objects ↔ JSON, loading JSON files and using JSON in mini apps.

Modern JS concepts: callback functions, promises, async/await and using the Fetch API for GET and POST requests.

Error handling: try/catch, throwing errors and debugging with browser DevTools.

API basics: what an API is, common types of APIs and a quick overview of REST APIs.

Using the Fetch API: making GET and POST requests, handling errors and showing loading states.

Real public API projects: weather app, currency converter app, movie search app, random user generator and a country data explorer.

Building a digital clock with real‑time updates.

Image slider / carousel with next/previous controls.

Basic calculator app with clean UI.

To‑do list app with add, complete and delete features.

Form validator with real‑time error messages.

Responsive navbar with open/close behaviour.

API‑powered weather app using a public weather API.

Quiz app with score calculation.

Notes app using localStorage so notes stay after refresh.

What TypeScript is and why it is used with modern frameworks like Angular.

Basic types and interfaces in TypeScript for beginners.

Typing simple functions and understanding compile‑time checks.

Basic TypeScript compilation workflow and why TypeScript will help you later in Angular.

What Angular is in 2026 and where it is used in real projects.

Installing Angular CLI and creating your first Angular project.

Understanding components, templates and styling in Angular.

Data binding in Angular and core built‑in directives.

Creating and using services to share logic.

Making API calls with HttpClient.

Routing basics to move between pages.

A small beginner‑friendly Angular project to connect all the basics.

What Git is and why every developer uses version control.

Installing Git and creating your first repository.

Basic Git commands: init, add, commit and push explained step by step.

Creating a GitHub account and connecting your local repo to GitHub.

Uploading existing code to GitHub and cloning projects from GitHub.

Deploying simple sites using GitHub Pages.

Free deployments: deploying static and front‑end projects to Netlify, Vercel and GitHub Pages.

Paid hosting basics: understanding cPanel, using FTP to upload files, basic domain setup and configuring DNS and name servers.

Planning and designing a complete real‑world website using HTML, CSS and Bootstrap.

Building a fully responsive layout that works on mobile, tablet and desktop.

Adding JavaScript interactions such as menus, modals, sliders and form validation.

Integrating at least one public API for live data (for example weather, movies or countries).

Implementing dark/light mode using CSS variables and JavaScript toggles.

Deploying the final project live (Netlify / Vercel / GitHub Pages) and hosting the code in a GitHub repository.