Full Stack Web Developer

You have now completed the HTML and semantic structuring section of this course. You have learned to build well-structured, accessible, and meaningful web pages using the right HTML elements for the right purposes. You know how to use headings, parag...

## Project Overview This final mini-project is the capstone of the 'HTML and Semantic Structuring' chapter. You will design and build a **fully semantic, multi-page personal portfolio website** using only HTML (no CSS styling is required, though basi...

At this stage of your learning journey, you have covered a wide range of HTML elements: images, links, lists, inline tags such as strong, em, mark, code, time, and abbr, as well as table structures with their accessibility attributes. This summary ch...

**Theoretical Recap** HTML tables are powerful for displaying structured data, but they become confusing for screen reader users when accessibility attributes are missing. Two key tools address this: the `scope` attribute and the `summary` attribute ...

THEORETICAL RECAP HTML tables are one of the most semantically rich structures in the language — when used correctly. A table is designed to represent tabular data: information that has a logical relationship between rows and columns. The key element...

HTML tables are one of the oldest and most powerful tools for displaying structured data on the web. However, they are frequently misused or poorly structured, which creates accessibility and maintenance problems. In this course, you will learn how t...

**Theoretical Recap** Three HTML inline tags are frequently misused or overlooked: ``, ``, and ``. Each carries a precise semantic meaning that goes beyond mere visual formatting. The `` tag marks up a human-readable date, time, or duration and pairs...

**Theoretical Recap** Inline semantic tags are HTML elements that apply meaning to specific portions of text within a block element (paragraph, heading, list item, etc.) without creating a line break. Unlike block elements (p, div, section), inline t...

In HTML, two categories of elements coexist: block-level elements, which occupy the full width available and create line breaks (such as paragraphs, headings, or lists), and inline elements, which flow within a line of text without interrupting its f...

Now that you have a solid understanding of the img tag, the alt attribute in its basic form, and the figure/figcaption elements, it is time to go deeper. This chapter focuses on two specific topics: writing complex and meaningful alt attribute text f...

THEORETICAL RECAP A semantic image gallery in HTML is built around a handful of elements you have already encountered: , , , and appropriate structural tags such as , , or / depending on the nature of the content. The key mental model is this: every ...

THEORETICAL RECAP The img tag is a void element in HTML — it has no closing tag. It requires at minimum two attributes: src, which points to the image file, and alt, which provides a textual description of the image for screen readers and search engi...

Images are one of the most common elements in web pages. They enrich the visual experience, illustrate content, and convey information that text alone cannot always express. However, integrating images into HTML is not just about dropping a file into...

Understanding how to write URLs and file paths correctly is one of the most fundamental skills you need as a web developer. Whether you are linking to another page, referencing an image, pointing to a stylesheet, or setting up a hypertext link (as yo...

**Theoretical Recap** When building web pages, links that point outside your own site — external resources, documentation, tools, partner pages — require specific handling to ensure a good user experience and proper security. Two HTML attributes are ...

THEORETICAL RECAP Internal navigation with anchors is one of the oldest and most practical features of HTML. An anchor is created using the tag, which you already know from the previous lesson on hypertext links. When used for internal navigation, th...

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