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

Name: HTML & CSS 2025: Hands-on No-nonsense Guide
Rating: 4.9 (55 reviews)

Build online CV in two completely different templates. Includes modern Responsive Web Design (RWD) with Flexbox and Grid

Created byDr. Artur Karczmarczyk

Last updated 2/2025

English

What you'll learn

Create basic and advanced HTML pages with images, lists, tables, forms, audios and videos
Create responsive web design (RWD) layouts using divs, semantic tags as well as modern flexbox and grid mechanisms
Style the HTML pages with the use of CSS stylesheets and modern CSS features such as transforms, transitions, flexbox, grid layouts
Know how to balance between cutting-edge technologies and supported devices maximization
Create a complete capstone project - an online CV page in two completely different layouts.

Course content

9 sections • 68 lectures • 12h 23m total length

Course Promo Video4:30
Pre-Tests and Post-Tests0:27
Downloading Source Code0:47
Support & Community1:31

HTML Section Introduction0:59
HTML files. Creating and displaying. Basic syntax.13:19
Text formatting in HTML. Basic tags and text styles.19:55
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.
Inserting and basic positioning.17:07
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.
Acquring and copyright.14:23
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.
File formats and optimization.22:25
Positioning and transforms.27:06
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.
Links11:33
Lists8:54
Tables14:59
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.
Forms35:04
HTML Section Summary0:34

CSS Section Introduction0:53
Basics of CSS32:32
CSS for Responsive Design (RWD)27:21
HTML layout using divs and semantic tags (RWD)11:48
HTML layout using Flexbox (RWD)22:08
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.
HTML layout using Grid (RWD)30:09
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.
HTML media. Video and audio12:19
CSS transitions. Animations in HTML15:21
CSS web fonts12:49
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.
Can I use? HTML and CSS features’ support level12:58
HTML and CSS resources4:03
Less Installation23:26
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.
Less Features31:51
Less Watchers - Continuous CSS Compilation13:12
Less Resources3:25
CSS Section Summary0:36
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.

Project Initialization Section Introduction0:45
Capstone Project Introduction6:28
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.
Inspiration and reference13:10
Concept of the Layout11:09
Project Initialization8:59
Semantic HTML25:58
Project Initialization Section Summary0:24

Modern Layout Section Introduction0:34
Grid. Colors. Typography - Modern Layout22:58
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.
Header - Modern Layout20:36
About Me Section - Modern Layout10:42
Education Section - Modern Layout6:42
Work Experience Section - Modern Layout8:54
Languages Section - Modern Layout5:47
Skills Section - Modern Layout8:34
Hobbies Section - Modern Layout4:29
Contact and Address Sections - Modern Layout9:25
RWD Mobile Version - Modern Layout17:19
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.

Newspaper Layout Section Introduction0:34
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.
Grid. Colors. Typography - Newspaper Layout18:17
Job and Address Sections - Newspaper Layout10:55
About Me Section - Newspaper Layout6:46
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.
Photo Section - Newspaper Layout5:50
Education Section - Newspaper Layout3:39
Work Experience Section - Newspaper Layout10:00
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.
Languages Section - Newspaper Layout4:13
Skills Section - Newspaper Layout7:58
Hobbies Section - Newspaper Layout11:53
RWD Mobile Version - Newspaper Layout9:41

Requirements

No programming experience needed. You will learn everything you need to know.
Some technical background might be helpful.
Join me if you like to learn in an agile, hands-on, no-nonsense manner.

Description

This course contains human-made closed-caption (CC) subtitles in English. This course is updated regularly with fresh content.

Hello and welcome! This course will guide you through the process of learning and practicing modern websites’ creation with HTML5 and CSS3.

My name is Dr. Artur Karczmarczyk and I am a Full-Stack Web Developer and Software Engineer with 16 years of commercial experience. I am also an Associate Professor at a well-known Technical University in Poland and have taught IT and web development skills to hundreds of students.

By the time you finish this course:

You’ll be able to create basic and advanced HTML pages with images, lists, tables, HTML5 forms, audios and videos.
You will know how to create responsive layouts using divs, semantic tags as well as modern Flexbox and Grid mechanisms.
You will be able to style HTML pages with the use of cutting-edge CSS and LESS features.

In the next 12 hours I will take you through all the important steps in creating HTML5 web pages. We will start by creating your first Hello World web page in a free code editor that I will show you how to install and configure. Then I will guide you through some basic text formatting. You will learn about acquiring, inserting and positioning images on your pages. I will show you how to legally acquire images and photos for your commercial projects. Then, we will dive into the common HTML structures – links, lists, tables and forms, including modern HTML5 inputs and validation methods. After that, in Section 3, we will introduce CSS and use it to create responsive web design (RWD). We will use divs, semantic tags, Flexbox and Grid, always to create a layout that works great on both mobile and desktop devices. We will also introduce LESS, so you can create CSS stylesheets easier and more efficient. In the final three sections I will guide you through a capstone project. Inspired by CSS Zen Garden website, we will create an online CV page using semantic HTML and then use CSS to create two completely different themes for it.

This course is for you if you have some technical skills but are completely new to web development. If you want to know modern up-to-date HTML5, CSS3 and LESS technologies, use this course to learn them in an agile, hands-on, no-nonsense manner.

So, feel free to take a look through the free previews and then join me as we create your first HTML5 web pages and solve tens of HTML and CSS challenges together!

Who this course is for:

Beginner Web developers with technical mindset.

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

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 7min

HTML - Images, Links, Lists, Tables, Forms12 lectures • 3hr 6min

CSS and Responsive Web Design (RWD)16 lectures • 4hr 15min

CV Zen Garden Capstone Project Initialization7 lectures • 1hr 7min

Modern Layout - CV Zen Garden Capstone Project11 lectures • 1hr 56min

Newspaper Layout - CV Zen Garden Capstone Project11 lectures • 1hr 30min

Summary2 lectures • 1min

Web Dev Ideas and Challenges4 lectures • 21min

Continuing Your IdeaSpot.TV Journey1 lecture • 1min

Requirements

Description

Who this course is for: