Free Course Image HTML, CSS and JavaScript

Free online courseHTML, CSS and JavaScript

Duration of the online course: 14 hours and 46 minutes

New

Build real web pages fast with an online HTML, CSS & JavaScript course—free lessons, hands-on practice, and job-ready skills for modern web development.

In this free course, learn about

  • Basics of web design and networking concepts, including key differences between LAN and WAN
  • HTML5 semantic structure: using elements like article for self-contained content
  • Navigation markup: purpose and structure of nav lists in HTML
  • Core CSS role: separating presentation from content and controlling page styling
  • CSS selectors and lists: child (>) selector and list-style-type for ordered lists
  • Reset stylesheets: why they are used to normalize browser default styling
  • Modern layout techniques: recommended use of CSS Grid and Flexbox (main axis concepts)
  • CSS positioning methods and when to use each (static, relative, absolute, fixed, etc.)
  • Text and image effects: drop shadows, transforms, and vector vs raster image scaling
  • Responsive/mobile-friendly design fundamentals and improving printed pages with print CSS
  • HTML tables: header formatting and correct thead/tbody/tfoot row-group ordering for styling
  • HTML forms: secure submission encodings and HTML5 inputs like date pickers and spinners
  • Web media delivery: why codecs matter and which codecs are proprietary/licensed
  • JavaScript fundamentals: DOM access, operators, loops, events, functions, and dynamic content

Course Description

Turn ideas into interactive websites by learning the three core technologies of the web: HTML for structure, CSS for design, and JavaScript for behavior. This free online course guides you from the fundamentals of clean page layout to creating responsive, engaging interfaces that work across devices. You will gain practical confidence in writing semantic HTML5, organizing content for readability and accessibility, and choosing the right elements to make pages easier to navigate and maintain.

On the design side, you will learn how CSS brings a site to life: controlling typography, spacing, alignment, and visual hierarchy while keeping styles consistent and easy to scale. You will work with modern layout techniques such as Flexbox and grid-style thinking, explore positioning options, and understand how to manage defaults using resets so designs render reliably across browsers. You will also develop an eye for real-world details such as text effects, image handling for quality and performance, and the small styling decisions that make a site feel professional.

As you progress, the course connects design with usability by focusing on mobile-friendly practices and responsive behavior, including strategies for adapting layouts to different screens and even improving print styles. You will learn to build structured tables and user-friendly forms, working with common input types and interface controls that make data entry smoother. Multimedia concepts are introduced so you can better understand how audio and video delivery works on the web, including why codecs matter for efficient transmission and compatibility.

Finally, you will bring pages to life with JavaScript, developing a clear understanding of client-side scripting, how to target elements in the document, and how logic, operators, and loops drive dynamic features. You will practice event-driven interactions, explore functions (including anonymous functions), and work with the document structure to update content and styles programmatically. By the end, you will be able to build more than static pages—you will be able to create experiences that respond to users, support real scenarios, and provide a strong foundation for further growth in web development.

Course content

  • Video class: CSCI 181 - Web Design - Chapter 1 Session 1 26m
  • Exercise: What is a fundamental difference between a LAN and a WAN?
  • Video class: CSCI 181 Web Design (Chapter 1 Session 2) 37m
  • Exercise: Which element represents a self-contained composition, like a newspaper story, in HTML5?
  • Video class: CSCI 181 - Web Design - Chapter 1 Session 3 30m
  • Exercise: What is the primary purpose of a 'nav list' in HTML?
  • Video class: CSCI 181 - Web Design - Chapter 2 Session 3 25m
  • Exercise: What is a possible use of the 'list-style-type' property in an ordered list?
  • Video class: CSCI 181 - Web Design - Chapter 2 Session 2 36m
  • Exercise: Which symbol is used in CSS to apply styles to only direct children of a parent element?
  • Video class: CSCI 181 - Web Design - Chapter 2 Session 1 33m
  • Exercise: What is the primary function of CSS in web design?
  • Video class: CSCI 181 - Web Design - Chapter 3 Session 2 18m
  • Exercise: Which method is recommended for setting up grid layouts in CSS?
  • Video class: CSCI 181 - Web Design - Chapter 3 Session 1 33m
  • Exercise: What is the purpose of a reset style sheet in web development?
  • Video class: CSCI 181 - Web Design - Chapter 3 Session 3 21m
  • Exercise: Understanding CSS Positioning Options
  • Video class: CSCI 181 - Web Design - Chapter 4 Session 2 17m
  • Exercise: What is a drop shadow in text effects?
  • Video class: CSCI 181 - Web Design - Chapter 4 Session 3 24m
  • Exercise: What CSS transformation was applied to the image of the grandson?
  • Video class: CSCI 181 - Web Design - Chapter 4 Session 1 29m
  • Exercise: What type of image is best for resizing without losing quality?
  • Video class: CSCI 181 - Web Design - Chapter 5 Session 1 30m
  • Exercise: What is a key concept introduced in Chapter Five for designing a mobile-friendly website?
  • Video class: CSCI 181 - Web Design - Chapter 5 Session 2 22m
  • Exercise: What is the main axis in a horizontal flexbox?
  • Video class: CSCI 181 - Web Design - Chapter 5 Session 3 23m
  • Exercise: How can you enhance printed webpages using CSS?
  • Video class: CSCI 181 - Web Design - Chapter 6 Session 1 17m
  • Exercise: What is a key element used to format headers in web tables?
  • Video class: CSCI 181 - Web Design - Chapter 6 Session 2 28m
  • Exercise: What is the correct order of row groups in a table for better styling using CSS?
  • Video class: CSCI 181 - Web Design - Chapter 7 Session 1 33m
  • Exercise: What encoding type allows sending data to the server in an encrypted format?
  • Video class: CSCI 181 - Web Design - Chapter 7 Session 2 21m
  • Exercise: What HTML5 feature allows users to select a date using a calendar interface?
  • Video class: CSCI 181 - Web Design - Chapter 7 Session 3 29m
  • Exercise: What is used to handle numeric data using spinner controls in web forms?
  • Video class: CSCI 181 - Web Design - Chapter 8 Session 1 14m
  • Exercise: What is the primary reason for using codecs in video transmission over the internet?
  • Video class: CSCI 181 - Web Design - Chapter 8 Session 2 19m
  • Exercise: Which video codec is proprietary and often requires a license fee for commercial use?
  • Video class: CSCI 181 - Web Design - Chapter 8 Session 3 26m
  • Exercise: CSS Transitions and Animations
  • Video class: CSCI 181 - Web Design - Chapter 9 Session 1 16m
  • Exercise: Which of the following is a key difference between client-side and server-side scripting?
  • Video class: CSCI 181 - Web Design - Chapter 9 Session 2 21m
  • Exercise: How can you access an HTML element by its unique identifier?
  • Video class: CSCI 181 - Web Design - Chapter 9 Session 3 26m
  • Exercise: Which operator is used in JavaScript to find the remainder of a division operation?
  • Video class: CSCI 181 - Web Design - Chapter 10 Session 2 12m
  • Exercise: Which JavaScript loop checks its condition at the end?
  • Video class: CSCI 181 - Web Design - Chapter 10 Session 1 19m
  • Exercise: What is the first step in building the calendar in JavaScript?
  • Video class: CSCI 181 - Web Design - Chapter 10 Session 3 25m
  • Exercise: What is the purpose of the ternary operator in programming?
  • Video class: CSCI 181 - Web Design - Chapter 11 Session 1 25m
  • Exercise: Which type of event handler is used to load a webpage puzzle?
  • Video class: CSCI 181 - Web Design - Chapter 11 Session 2 31m
  • Exercise: What is the purpose of the 'set background' function in the session?
  • Video class: CSCI 181 - Web Design - Chapter 11 Session 3 38m
  • Exercise: What is an advantage of using anonymous functions in JavaScript?
  • Video class: CSCI 181 - Web Design - Chapter 12 Session 1 21m
  • Exercise: What is the structure that represents the entire document in HTML and JavaScript called?
  • Video class: CSCI 181 - Web Design - Chapter 12 Session 2 20m
  • Exercise: How are nested lists dynamically created using JavaScript in the project described?
  • Video class: CSCI 181 - Web Design - Chapter 12 Session 3 25m
  • Exercise: What types of stylesheets can be modified using JavaScript?

This free course includes:

14 hours and 46 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