Full Stack Web Developer

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...

Now that you have learned how to use semantic HTML5 tags such as header, nav, main, section, article, aside, and footer, it is time to go one step further. In this lesson, you will discover ARIA landmarks, a complementary mechanism that reinforces th...

**Theoretical Recap** Before diving into the practical work, here is a concise recap of what you need to keep in mind. HTML5 introduced semantic tags — elements that carry meaning about the content they wrap, rather than just grouping content visuall...

In the previous lessons, you discovered the fundamental principle of semantics in HTML5: giving meaning to content through the choice of tags. You now know how to structure a basic document with a doctype, an html element, a head, and a body. You hav...

Before diving into the principle of semantics in HTML5, it is important to recall where you stand in your learning journey. You have already learned how to create a valid HTML document with its minimum structure (doctype, html, head, body), how to co...

**Theoretical Recap** HTML headings and paragraphs are the backbone of any readable web page. Headings are defined with the tags h1 through h6, where h1 represents the most important title (usually the page's main topic) and h6 the least important. E...

Now that you have learned how to structure the head of an HTML document — with the charset meta tag, the page title, and best practices — it is time to turn your attention to the body element. The body is the visible heart of every web page. Everythi...

THEORETICAL RECAP Before diving into the workshop, let's consolidate the essentials. The section of an HTML document is not visible in the browser window, but it is critical: it contains metadata that browsers, search engines, and assistive technolog...

In the previous activities, you learned how to structure a complete HTML document with its mandatory elements: the doctype declaration, the html element, the head element, and the body element. You also created your first index.html file. Now it is t...