HTML & CSS 2025: Hands-on No-nonsense Guide

Create your html page using Windows Notepad, install Visual Studio Code, learn html formatting, convert and optimize images, position them, and master links, lists, tables, and forms in html5.

Create and display HTML pages using Notepad or Visual Studio Code, install extensions for live preview, and learn basic HTML syntax including doctype, head, title, metadata, and body.

Learn how HTML handles whitespaces, creates paragraphs with p tags, uses br for line breaks, and apply bold, italic, HTML entities, comments, and basic CSS styling via the style attribute.

Learn how to insert images in HTML, adjust size and position, use src and alt attributes, and explore relative and absolute paths, with practical tips on responsive sizing and centering.

Learn how to acquire images for HTML sites legally, verify licenses, and use free or paid stock images from platforms like Pexels, Pixabay, and Unsplash for commercial use.

Learn image optimization for the web by comparing raster and vector graphics, including svg, exploring formats like jpg, png, gif, and webp, and resizing with irfanview for faster page loading.

explore advanced images positioning and transforms using background-image with repeat and size controls, border, border-radius, margin and padding, opacity, float, and absolute/relative positioning with rotate, translate, and scale.

Explore how links navigate between html pages and within page, compose emails via mailto links, and style anchors with css; learn to use href, target, ids, and bookmarks for navigation.

Learn HTML tables from structure to styling: use table, tr, th, td, and caption, apply CSS, span cells with colspan and rowspan, nest tables, and explore layouts.

Learn how HTML forms collect data with the form tag, action and method, explore input types like text, password, radio, and textarea, and apply HTML5 validation.

Create your first HTML pages while gaining confidence in using Visual Studio Code. Learn CSS to style your websites, create responsive web designs, and add animations.

Explore the CSS section’s three ways to use CSS, learn reset.css and normalize.css, build responsive layouts with divs, semantic tags, flexbox, grid, audio, video animations and web fonts.

Master CSS basics: what CSS is, why we need it, and how cascades, selectors, and classes shape HTML. Use inline, embedded, external CSS with reset.css and normalize.css for consistency.

Master CSS responsive web design using media queries to adapt layout and typography. Apply pseudoclasses and pseudoelements, color, spacing, and font properties for accessible, mobile-first experiences.

Explore building responsive layouts with divs and CSS, switching from tables to HTML5 semantic tags like header, nav, aside, main, and figure with figcaption.

Learn flexbox fundamentals for responsive HTML layouts, including flex direction, wrap, justify content, align items, and flexible item sizing with order, grow, shrink, and align-self.

Learn to build responsive two-dimensional layouts with grid, using grid containers, grid-template-columns and grid-template-rows, gaps, grid areas and named areas, and responsive adjustments with media queries.

Learn how to embed video and audio with HTML5, using video and source tags, controls, muted autoplay rules, preload, poster, and loop to create engaging multimedia on web pages.

Learn to use CSS web fonts beyond web-safe options by importing custom fonts with @font-face or Google fonts, and test bold and italic variants for reliable cross-browser displays.

Explore how HTML and CSS features, including rotate, vary by browser and email clients, and verify support with caniuse.com, MDN web docs, and Can I email.

Explore HTML and CSS resources, including MDN references and guides, W3Schools tutorials, and books as knowledge sources for HTML structures, SVG, forms, and Bootstrap basics.

Explore how Less and CSS preprocessors enhance styling with variables, nesting, imports, math, mixins, and conditional logic, then install and live-compile Less in the browser for rapid experimentation.

Explore Less features, including variables, mixins, nesting, math, functions, and file imports, with hands-on demonstrations of color functions such as rgb and hsl and the inline import technique.

Explore automatic less compilation using the Easy LESS extension for Visual Studio Code or the less-watch-compiler CLI, including per-file configuration, main file setup, source maps, and minified output.

Explore less resources with the official lesscss.org site, which offers overview, reference, and an online playground; learn installation with Node.js, browser usage, and function details like tint().

Learn to give pages a cool look and create responsive designs with semantic tags, flexbox, and grid. Build an online cv with two different looks using video, audio, and transitions.

Explore initializing a capstone project for an online cv with two themes, create lo-fi layout diagrams, and build a semantic HTML structure ready to support multiple CSS styles.

Explore the capstone project inspired by CSS Zen Garden, delivering templates: a modern CV with dynamic hover animations and a newspaper layout, from a single HTML file with switchable stylesheets.

Explore inspiration for the CV Zen Garden capstone by examining CSS Zen Garden themes, collecting references with PureRef, and comparing modern and newspaper layouts for CV visuals.

Master lo-fi layout concepts for online cvs using draw.io, building two 12-column grid mockups: modern and newspaper styles, and refining designs before high-fidelity work.

Initialize the project by creating cvzen.html with language, charset, and title, and set up assets, src, dist directories with two less files compiled to minified css linked in the html.

Learn to build a semantic HTML CV with a container and sections, populate with fake data from FakeNameGenerator and Cupcake Ipsum, without inline CSS, respecting GDPR.

Analyze the project foundations and set up the initial structure to prepare for implementing the first layout and make your online CV look amazing.

Explore modern layout by setting up grid, colours, and typography for the CV Zen Garden project, then use lo-fi diagram to implement each section and build your online CV page.

Design a modern cv by mastering grid, colors, and typography, organizing styles into _colors.less, _grid.less, and typography files, importing them and styling with Open Sans and reset.css.

Create a modern cv header with a navy top bar, a name-and-job box, and a rounded photo with a white border and shadow, using header.less and a before pseudo-element.

Explore hover-driven styling for the about me section in a modern layout CV, including animated underline on headings, background color transitions, and typography tweaks to h3 and paragraphs.

Transform the education section of the modern layout CV into a responsive timeline by using a two-column grid, bold university names, hover animations, and a paper color theme.

Style the work experience section of the modern layout cv by copying the education layout to form a timeline with a right border and dots that change color on hover.

Style the languages section of a modern layout CV with CSS pseudo-elements to grade proficiency using dots or stars. Use _languages.less, style1.less, nth-child, and content() for grading.

Develop animated progress bars in the skills section of the modern layout using pure CSS. Style the ul/li list with a border-bottom, a ::after bar, nth-child widths, and hover transitions.

Style the hobbies section of a modern layout CV into tag-like badges using inline-blocks, borders, padding, and margins. Tweak font size and base color in less files to polish tags.

Learn to style the contact and address sections of a modern CV layout, embedding Font Awesome icons as SVG data URLs, and extract icon parts with a mixin in _contact.less.

Make the modern layout CV responsive for mobile by adding a viewport meta and a 768px breakpoint, switching to a single-column, full-width grid.

Explore the newspaper layout section and apply a traditional newspaper-inspired theme by repeating the previous process, culminating in the final implementation of the CV Zen Garden capstone project.

Transform a dynamic cv into a traditional newspaper layout by applying grid, color, and typography changes, using a three-column grid, paper color, and serif fonts via Google Fonts.

Explore how to design the job and address sections of a newspaper layout CV, featuring a bold red job post with a black header and right-aligned contact details.

Design the About Me section of a newspaper-layout CV using a grid, bold uppercase h3 headings on a black background, borders, and refined typography with rem units and spacing adjustments.

Style the photo section of a newspaper layout using CSS: remove borders and padding, apply grayscale filter, and position a full-width bottom heading with bold, uppercase typography.

Explore styling the education section of a newspaper CV as an obituary, with university name, years, and description using a flex column layout and typography tweaks.

Learn to design the work experience section of a newspaper layout CV by turning each job into its own bordered box, with individual headings, flexible layout, and typography tweaks.

Refine the languages section of the newspaper layout CV by applying a css content-based fluency grade, switching to style2, and styling the heading and bullets via _languages.less.

Learn to build a newspaper layout skills section using css progress bars, right-aligned list items, and pseudo elements with the _skills.less stylesheet.

Style the hobbies section as a tag cloud in the newspaper layout cv by turning list items inline and lowercase, using a mixin with an @strength parameter to vary size.

Transform the newspaper CV layout into a mobile-friendly, single-column grid using media queries and a 768px breakpoint, then adjust typography, margins, and alignment for all sections.

Showcase your completed html and css capstone project to the world, proving your skills and readying your cv for online hosting as you pursue a web developer role.

Reflect on your journey to becoming a web developer and keep learning to become an HTML and CSS expert by staying active in the community and tackling new challenges.

Create a pinterest-like layout using CSS columns to stack images in multiple columns with gaps and rounded corners. The tutorial covers a simple HTML structure and a less workflow.

Learn to constrain card text with CSS line-clamp to five lines using -webkit-line-clamp, display -webkit-box, and vertical orientation, achieving ellipsis on long text in Edge, Chrome, and Firefox.

Learn to make a block or image full screen with 100% height on HTML and body, or 100vh/100vw, use absolute positioning with top, bottom, left, and right set to zero.