Free Course Image CSS and HTML5

Free online courseCSS and HTML5

Duration of the online course: 5 hours and 40 minutes

New

Build and style modern web pages with a free HTML5 & CSS course. Learn layouts, hover effects, animations, and responsive-ready design with certificate.

In this free course, learn about

  • CSS’s role with HTML: separating content structure from presentation and styling
  • Basic CSS syntax: selectors, properties, values, and rule blocks
  • How to apply CSS: external, internal, and inline; and how overrides/cascade work
  • Using CSS classes: reusable styling across multiple elements; tag-based class targeting
  • Using IDs: uniquely identify elements and apply specific styles with higher specificity
  • Styling divs and borders, including rounded corners via border-radius
  • Formatting HTML tables, including border-collapse behavior and spacing control
  • Using :nth-of-type to style repeating patterns (e.g., zebra striping rows/items)
  • Hover effects with :hover to improve interactivity and user feedback on elements/links
  • Creating attention-grabbing alert animations with CSS (keyframes + noticeable cues)
  • Overlaying text on images using positioning (relative/absolute) and stacking context
  • Controlling element transparency with opacity for text/images and layered effects
  • Creating shapes (e.g., circles/rounded shapes) using border-radius and related properties
  • Building CSS animations and setting key parameters like animation-duration
  • Using position: sticky to keep elements fixed after scrolling past a threshold

Course Description

Turn plain HTML into polished, professional-looking web pages by learning how HTML5 structure and CSS styling work together. This free online course helps you build a strong foundation in front-end development, moving from the core idea of separating content from presentation to the practical skills you need to design interfaces that look consistent, readable, and engaging across screens.

You will start with the essentials of CSS syntax and understand how styles are applied and prioritized. From there, you will practice the most common ways to connect CSS to HTML and learn when each approach makes sense. As your confidence grows, you will use classes and IDs effectively to target elements with precision, a key skill for maintaining clean, scalable code on real projects.

Beyond basic styling, the course guides you through creating visually clear sections using divs, borders, and rounded corners, and it shows how to improve data presentation with table formatting. You will also explore selector techniques such as nth-of-type to style repeating elements without cluttering your markup, making your pages easier to maintain and update.

To make interfaces feel interactive, you will apply hover formatting and refine hyperlink styles to improve navigation cues and usability. You will also learn how to create attention-grabbing effects with simple CSS animations, which are especially useful for alerts and status messages where visibility matters. Visual design skills continue with techniques for overlaying text on images, working with positioning, and using opacity to balance readability with aesthetics.

By the end, you will be able to produce pages that look intentional and modern, including small UI flourishes like shapes made with CSS and practical layout behavior such as sticky positioning for headers or menus. The result is a solid starter toolkit for anyone aiming to enter web development, enhance a portfolio, or collaborate more effectively with designers and developers.

Course content

  • Video class: CSS and HTML 5 - CSS and HTML 5 Introduction 23m
  • Exercise: Which of the following statements best explains the role of CSS in web development?
  • Video class: CSS and HTML 5 - Basic CSS Syntax 17m
  • Exercise: What is the primary purpose of CSS when used with HTML?
  • Video class: CSS and HTML 5 - Adding CSS to HTML (External, Internal, Inline) 25m
  • Exercise: Which method of including CSS in an HTML document allows you to overwrite any CSS specified at higher levels?
  • Video class: CSS and HTML 5 - Classes in CSS 14m
  • Exercise: What is the primary function of using classes in CSS?
  • Video class: CSS and HTML 5 - ID in CSS 15m
  • Exercise: What is the purpose of using IDs in HTML documents?
  • Video class: CSS and HTML 5 - DIV Tags and Borders 13m
  • Exercise: In CSS, what property would you use to create rounded edges on a border of a 'div' element?
  • Video class: CSS and HTML 5 - Table Formatting 15m
  • Exercise: What is the purpose of using the 'border-collapse' property in CSS when styling HTML tables?
  • Video class: CSS and HTML 5 - nth-of-type Formatting 20m
  • Exercise: What is one way to use the CSS 'nth-of-type' selector when formatting HTML documents?
  • Video class: CSS and HTML 5 - Tag Based Class Attributes 11m
  • Exercise: What is one of the main uses of a CSS class in HTML documents?
  • Video class: CSS and HTML 5 - Hover Formatting 18m
  • Exercise: Which of the following describes how CSS hover effects can enhance user experience on a webpage?
  • Video class: CSS and HTML 5 - Basic Animation for Alerts 26m
  • Exercise: What is one of the best ways to ensure that users notice a critical temperature alert in a CSS-based web monitoring application?
  • Video class: CSS and HTML 5 - Text Overlay on Images 23m
  • Exercise: When overlaying text on an image using CSS and HTML, what is the primary technique being utilized?
  • Exercise: In CSS, when positioning text over an image within a webpage, what is the most accurate way to describe the process?
  • Video class: CSS and HTML 5 - Opacity for Text and Images 15m
  • Exercise: What CSS property allows you to adjust the transparency of an HTML element?
  • Video class: CSS and HTML 5 - Making Shapes 20m
  • Exercise: Which of the following shapes can be created using CSS border-radius property on a square?
  • Video class: CSS and HTML 5 - Format Hyperlinks 10m
  • Exercise: Which CSS pseudo-class can be used to change the style of a hyperlink when the mouse pointer is hovering over it?
  • Exercise: Which of the following describes what happens when you hover over a hyperlink formatted with CSS?
  • Video class: CSS and HTML 5 - Animations 21m
  • Exercise: What component is essential for setting the duration of a CSS animation when creating a class for an animation?
  • Video class: CSS and HTML 5 - Sticky Position 09m
  • Exercise: What is the main functionality of the CSS 'sticky' position in a web document?

This free course includes:

5 hours and 40 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at Web Development

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate