CS-106: Fundamentals of HTML & CSS

About this course

HTML document structure, semantic markup, tables and forms, then CSS selectors, the box model, positioning, Flexbox and Grid and mobile-first responsive design, with a real-life analogy, a video, and a scenario-based Compiler Quest for every one of 15 topics across 5 modules.

This is a 6-week short course - enough depth to build real projects and a portfolio piece, without a long commitment. Learn online at your own pace. Practice the concepts with the listed assessments.

What's included

• Self-paced lessons and practice (12 estimated hours).
• Hands-on coding quests you solve inside the EchoLens browser compiler - nothing to install.
• Gems, stages and a leaderboard that keep you moving instead of grade anxiety.
• A verified certificate with a scannable QR code, ready to share on LinkedIn, when you satisfy the course requirements.
• Completely free - no fee, just create an account and start.

What you will learn

Course outline - level by level

15 leveles, each with hands-on quests you clear in the portal.

• Level 1. HTML Boilerplate & Document Anatomy - Real-life analogy: Think of the blueprint and foundation of a house. Before any furniture or paint, you pour the concrete slab (doctype), raise the frame (html), route the hidden utilities in the basement (head), and define the living space people actually walk through (body). Every HTML page begins with <!DOCTYPE html> and a root html element containing a head for metadata (title, charset, viewport) and a body for visible content. Proper nesting and the lang attribute give browsers and screen readers a reliable structure to parse.
• Level 2. Text Content Elements (headings, paragraphs, lists) - Real-life analogy: Think of laying out a newspaper page. The masthead is the biggest headline (h1), section titles are sub-headlines (h2, h3), body columns are paragraphs, and bullet briefs are lists down the margin. Headings h1 to h6 express document hierarchy, <p> holds paragraphs, and <ul>, <ol>, <li> build unordered and ordered lists. Inline tags like <strong> and <em> add semantic emphasis rather than purely visual bold or italics.
• Level 3. Links, Images & Attributes - Real-life analogy: Think of a hotel concierge. Links are directions to other destinations (href), images are framed photographs on the wall, and the alt text is the caption a guide reads aloud to a visitor who cannot see the picture. The <a href> element navigates to internal or external destinations, while <img src> embeds images with a mandatory alt attribute for accessibility. Attributes such as target and rel control how resources open and behave.
• Level 4. Semantic Layout Elements - Real-life analogy: Think of posting clear signs on the rooms of a house. Instead of calling every space a generic room, you label them: Entrance (header), Hallway (nav), Living Room (main), Store Room (aside), Exit (footer). Semantic tags header, nav, main, section, article, aside and footer describe the meaning of page regions. They improve accessibility, SEO and maintainability compared with generic <div> containers.
• Level 5. Tables & Structured Data - Real-life analogy: Think of a train timetable board at a station. Column headers name each track and time, rows list each departure, and the grid lets a traveller cross-reference destination against schedule instantly. Tables use table, thead, tbody, tr, th and td to present two-dimensional data. A <caption> names the table and th scope="col" ties each data cell to its column header for assistive technology.
• Level 6. Forms & Input Controls - Real-life analogy: Think of a bank deposit slip. Each labelled field asks for one specific piece of information, some boxes only accept numbers, and you cannot submit until the required fields are filled in correctly. Forms use <form> with controls such as input, label, select, textarea and button. Associating each <label for> with its input's id, and using types like email or number, enables native browser validation and accessibility.
• Level 7. Applying CSS & Selectors - Real-life analogy: Think of a theatre wardrobe department. You can dress one actor directly (inline), post costume notes backstage for a scene (internal), or keep one master costume manual the whole cast follows (external stylesheet). CSS can be applied inline, internally in a <style> block, or externally via <link>. Selectors target elements by tag, class (.) or id (#), with class selectors being the primary reusable styling hook.
• Level 8. Colours, Units & Typography - Real-life analogy: Think of an interior design mood board. You pick a colour palette (hex, rgb), choose measurement scales for the furniture (px, em, rem), and select the lettering style for the signage (font-family, weight, line-height). Colours are set with hex, rgb() or hsl(); sizes use absolute (px) and relative (em, rem, %) units. Typography properties like font-family, font-size, font-weight and line-height control how readable text is.
• Level 9. The Box Model - Real-life analogy: Think of a framed painting shipped in a box. The artwork is the content, the mount board around it is padding, the wooden frame is the border, and the packing space inside the shipping box is the margin. Every element is a rectangular box of content, padding, border and margin. Setting box-sizing to border-box makes the declared width include padding and border, preventing layout-math surprises.
• Level 10. Display & Positioning - Real-life analogy: Think of arranging furniture in a room. Some pieces sit in the natural flow line by line (block, inline), a rug shifts slightly from its spot (relative), a wall clock is pinned to an exact coordinate (absolute), and a ceiling fan stays put no matter where you stand (fixed). The display property (block, inline, inline-block, none) controls flow, while position (static, relative, absolute, fixed, sticky) removes or anchors elements. Offsets top, right, bottom, left position an element relative to its containing block.
• Level 11. Flexbox Layout - Real-life analogy: Think of arranging books on an adjustable shelf. You choose the direction (row or column), how the gaps distribute between books (justify-content), and how they line up against the shelf edge (align-items). Flexbox lays out items along a single axis using display: flex on a container. Properties like justify-content, align-items, gap and flex control alignment, spacing, and how items grow or shrink.
• Level 12. CSS Grid Layout - Real-life analogy: Think of a city block planned on graph paper. You draw the streets and avenues (rows and columns), drop each building into its exact plot (grid placement), and keep alleys of consistent width between them (gap). CSS Grid is a two-dimensional system using display: grid with grid-template-columns and grid-template-rows. Items are placed into tracks and can span cells, enabling complex page layouts without floats or hacks.
• Level 13. Responsive Design & Media Queries - Real-life analogy: Think of water taking the shape of any container. The same content pours neatly into a phone glass, a tablet jug, or a desktop bucket, rearranging itself to fit each vessel. Responsive design adapts layouts across screen sizes using relative units and @media queries. A mobile-first approach writes base styles for small screens, then layers enhancements at larger breakpoints with min-width queries.
• Level 14. Transitions, Transforms & Animations - Real-life analogy: Think of stage lighting and choreography. A transition is a smooth dimming of the lights, a transform is an actor turning or growing on the spot, and a keyframe animation is a full scripted dance from first beat to last. Transitions smoothly interpolate property changes over time, transforms translate/rotate/scale/skew elements, and @keyframes define multi-step animations. Combined, they add polish without JavaScript - and should be disabled under prefers-reduced-motion.
• Level 15. Building a Complete Responsive Landing Page - Real-life analogy: Think of assembling a show-home for an open house. Every room you framed, painted and furnished across the course now comes together into one polished, walk-through-ready property. A landing page integrates semantic structure, the box model, Flexbox and Grid, responsive queries and motion into one cohesive deliverable. This capstone consolidates every fundamental skill into a portfolio-ready artifact.

How you submit: Coding quests solved in the built-in EchoLens compiler.

Who it's for

CS-106: Fundamentals of HTML & CSS suits learners at a beginner to intermediate level who want a practical, project-based route into CS-106. You need only a browser and an internet connection - all coding runs inside the EchoLens compiler, so there is nothing to set up.

Certificate

Pass every required assessment at its stated threshold to earn your verified certificate. Optional practice and watching videos do not determine eligibility. Anyone can scan its QR code to verify it on our site. You can add it to your CV or share it to LinkedIn in one click.