Full Stack Web Developer

**Theoretical Recap** Relative units are the backbone of responsive design. Unlike pixels (px), which are fixed and absolute, rem and vw scale dynamically based on context. The rem unit (root em) is always relative to the font-size defined on the ele...

In the previous activities, you explored media queries and breakpoints to adapt your layouts to different screen sizes. You now know how to change a background color or a font size when the screen reaches a certain width. However, there is a deeper l...

THEORETICAL RECAP Responsive typography is one of the most impactful aspects of responsive design. The core idea is simple: text that reads comfortably on a desktop can become too small or too large on a mobile screen if left unchanged. CSS gives us ...

Now that you have learned how to write media queries and apply them using mobile-first logic, the next essential step is to understand how to decide where to place your breakpoints. This is not a trivial question: poorly chosen breakpoints lead to la...

THEORETICAL RECAP A media query is a CSS instruction that allows you to apply styles conditionally, depending on the characteristics of the device or viewport displaying your page. The core syntax follows this pattern: @media (condition) { /* CSS rul...

Media Queries are one of the most powerful tools in CSS3 for building responsive web interfaces. They allow you to apply specific CSS rules depending on the characteristics of the device or screen that is displaying your web page. Before diving into ...

THEORETICAL RECAP Before diving into the workshop, let's consolidate the core concepts you encountered in the previous lessons. A responsive website is one that adapts its layout and content fluidly to any screen size — whether it's a smartphone, tab...

Responsive design is built on a set of fundamental concepts that every web developer must master before writing a single line of CSS. In the previous activity, you were introduced to the general principles of responsive design and CSS3. This course g...

Responsive design is a fundamental approach in modern web development. It refers to the ability of a web page or application to adapt its layout and visual presentation automatically depending on the screen size, device type, and orientation of the u...

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