Full Stack Web Developer

Hypertext links are one of the most fundamental and defining features of the web. Without them, web pages would be isolated islands of content, unable to connect to one another. As a future Full Stack Web Developer, mastering how hypertext links work...

When you write HTML code, every element you place in a page behaves according to a specific display logic. This logic is called the document flow. Understanding it is essential because it directly determines how your content is positioned and rendere...

THEORETICAL RECAP A nested list is a list that contains one or more other lists inside one of its items. In HTML, this means placing a , , or element directly inside a element of a parent list. The browser will automatically indent the child list, vi...

Welcome to this final theoretical lesson of the introductory chapter. This text serves as a structured review of everything you have covered so far, and a clear map of what lies ahead in your journey toward becoming a Full Stack Web Developer. Read c...

## Overview This mini-project is the capstone of the introductory chapter 'Getting started: development environment and developer mindset'. It brings together everything you have practiced so far: debugging HTML/CSS with DevTools, using the test-comm...

**Theoretical Recap** A README is the front door of any technical project. It is typically the first file a developer, recruiter, or collaborator reads when they open a repository. A good README answers four fundamental questions immediately: What do...

When you work on a software project, the code itself is rarely enough. Anyone who visits your repository — a recruiter, a collaborator, a future version of yourself — needs to understand what the project does, how to install it, and how to use it. Th...

**Theoretical Recap** MDN Web Docs (Mozilla Developer Network) is the reference documentation for web technologies: HTML, CSS, JavaScript, and web APIs. Unlike a tutorial or a blog post, MDN is a specification-level resource — it tells you exactly wh...

As a developer, you will spend a significant portion of your working time reading documentation and searching for solutions online. This is not a sign of weakness or lack of skill — it is a core professional habit. Even senior engineers with decades ...

When you start working as a developer, one of the most important professional habits you need to build from day one is the test-commit cycle. This practice is not optional or reserved for experienced developers — it is a fundamental discipline that s...

THEORETICAL RECAP Browser DevTools are a built-in suite of tools available in every modern browser (Chrome, Firefox, Edge) that let you inspect, debug, and modify a web page in real time — without touching your source files. Think of DevTools as an X...

Debugging is one of the most fundamental skills a developer must master. Whether you are writing your first lines of HTML or building a complex backend application, you will encounter bugs. The ability to find and fix them methodically, without panic...

## Overview This mini-project is the culminating exercise of the 'Getting Started' chapter. You have learned how to set up a development environment, write meaningful commits, manage commit history, work with branches, and create a .gitignore file. N...

**Theoretical Recap** A .gitignore file tells Git which files and directories to intentionally leave untracked. When Git scans your project folder, it reads .gitignore and skips anything matching the listed patterns — those files never appear in git ...

When you work on a development project and use Git to track your changes, not all files in your project folder should be versioned. Some files are generated automatically by your operating system, your code editor, or your development tools. Others c...

**Theoretical Recap** HTML provides three types of lists, each with a distinct semantic purpose. The unordered list (``) is used when the order of items does not matter — a perfect fit for a set of technical skills. The ordered list (``) is reserved ...

HTML lists are fundamental structural elements that allow you to group related items together in a meaningful and accessible way. They are not simply visual formatting tools: they carry semantic meaning, which means they communicate the nature and re...

This interim assessment is a structured pause in your learning journey. You have now completed a significant block of content covering HTML structure, semantic tags, title hierarchies, accessibility, code cleanliness, file naming conventions, and a f...

## Project Overview You will build a fully semantic HTML resume (curriculum vitae) from scratch. This is a real-world document you can actually use — your own professional profile structured with clean, accessible, and meaningful HTML. No CSS, no Jav...

**Theoretical Recap** Clean code and meaningful comments are not optional refinements — they are professional standards. Clean HTML means your code is readable at a glance: consistent indentation (typically 2 or 4 spaces per level), no orphaned tags,...

When you build a web project, even a small one, the way you name your files and organize your folders has a direct and lasting impact on the quality of your work. This is not a matter of aesthetics or personal preference: these are professional stand...

HTML comments and clean indentation are two fundamental practices in writing high-quality HTML code. Although they may seem secondary compared to semantic structuring or title hierarchy, they are essential for any professional developer working on re...

**Theoretical Recap** HTML heading tags — from h1 to h6 — define the hierarchical structure of a document's content. Think of them as an outline: h1 is the main title of the page (used once per page, ideally), h2 breaks the content into major section...

In the previous activities, you explored semantic tags such as header, nav, main, section, article, aside, and footer, and you learned how ARIA landmarks help assistive technologies navigate a page. Now it is time to go deeper into one of the most fu...

**Theoretical Recap** Semantic HTML5 is not just about making code look organised — it is about giving meaning to the structure so that browsers, search engines, and assistive technologies can interpret the page correctly. The key section tags you ha...