HTML & CSS - Learn to build sleek websites
4.3 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,552 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML & CSS - Learn to build sleek websites to your Wishlist.

Add to Wishlist

HTML & CSS - Learn to build sleek websites

Level up your coding skills and create beautiful, responsive and accessible websites. Easy, fun and effective
4.3 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,552 students enrolled
Created by Sandy Ludosky
Last updated 4/2017
Curiosity Sale
Current price: $10 Original price: $55 Discount: 82% off
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Article
  • 4 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • By the end of the course, students will have a solid understanding of the HTML tags and CSS properties
  • By the end of this course, you will be able to create webpages with HTML & CSS
  • Sharpen coding skills HTML/CSS
  • Learn Web Development fundamentals
  • Build your own site
View Curriculum
  • A minimum background in coding (section 1 and 2 is a tutorial to cover the fundamentals)
  • If complete beginner, take the course - Quickstart with HTML & CSS -
  • For the course, you will need a code editor like Sublime Text, Notepad ++ (PC) or Dreamweaver (if you are using the Adobe creative suite)
  • I recommend a modern web browser like Chrome or Firefox - You will be taught how to use the web developer tools, which are available with the modern browsers

Level UP your coding skills.

The course level is from beginner to intermediate.

You will learn to create a beautiful webpage with very easy steps and instructions.

  • You are a beginner: the 2 hands-on HTML & CSS tutorials teach the 101 of web development.
  • You are intermediate: you will learn the foundation for more advanced web development

By the end of the course, you will have a better understanding of HTML, CSS (Cascading Stylesheet), web development and responsive design.

As a student in this course, you will learn to:

  • create a fully functional website with HTML and CSS
  • add graphics and images
  • work efficiently with CSS
  • make the webpage responsive with media queries

Video lessons include:

  • 2 Hands-on HTML& CSS tutorials (start here if you are a complete beginner)
  • Guide to Web Hosting (coming soon)
  • 1 Final Project

Some Bonus include

  • Using CSS3 Animation
  • Adding CSS transition
  • integrating a Image Hover effect
  • Adding a Favicon (coming soon)

I am fast-lightening responder - if you have any question about the course, you can reach out to me in a private message or by posting your question on the discussion board.

I will make sure you have the best learning experience

Who is the target audience?
  • Beginner
  • Intermediate
  • Aspiring freelance developer
  • This course is designed for any person willing to learn the basics of coding with HTML & CSS
  • if you have some basic coding knowledge, this is the right place. The course includes quizzes and exercises to get an in-depth understanding of HTML basics and CSS Fundamentals
  • This course aims at building the foundation for more advanced web development
Students Who Viewed This Course Also Viewed
Curriculum For This Course
44 Lectures
3 Lectures 00:57

Welcome to the course - Thank You for joining

In order to get started, download the Course Guide (PDF) in Lecture 2

My name is Sandy and I will be your instructor.
Feel free to leave comments and ask questions on the discussion board. I am here to help and to make your learning experience the best possible.

Preview 00:56

Course Guide (PDF) + downloadable Working Files
1 page

Project Files
HTML tutorial
6 Lectures 24:15
HTML5 Cheatsheet | PDF
1 page

In this lecture, you will learn to create your first HTML document.

  1. Open demo > first.html in your code editor
  2. Open the same document in your browse

For extra resources visit :

Preview 04:00

HTML5 Semantic

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
To learn more, visit :

Meta Tags | Head section
CSS Fundamentals
12 Lectures 52:29
CSS Cheatsheet | PDF
2 pages

Intro to CSS (Cascading Stylesheet)


In this lecture, we will use the flat UI colors. Open this link in a new tab of your browser.


Working with colors

Styling the Navigation Bar


Class & ID

CSS Float (2-column Layout)

CSS Clear Property

The Box Model

Margin & Padding

Reverse Layout
Responsive Design | Media Queries
2 Lectures 16:03
Media Queries | Tablet

Media Queries | Small Devices
Alternate Layout
4 Lectures 16:57
Media Queries - I

Media Queries - II

Adding Media

Embed a youtube video link
Project - "Bon Voyage! Travel with Us!" - Part I
10 Lectures 01:02:25
Project overview



Links to:

Freepik : - millions of graphics available for download

I have already included some in the images/ folder or feel free to visit the above link to download more.

About Us


In this video lesson, I will explain how to use a sprite in your document.

A sprite is a collection of images put in a single file. A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.


Contact Us


Google Font & Font Awesome

Navigation | Position Fixed

Navigation | CSS z-index property
Project - "Bon Voyage! Travel with Us!" - Part II (Media Queries)
3 Lectures 23:27
Tablet & Ipad

Mobile version 1

Mobile version 2
Project - Bonus
4 Lectures 18:32
Navigations links hover effects

link to Animate.css

super easy ! I will teach you in 2 minutes how to animate the title of your webpage.

CSS3 Animation

Images Hover effect

We will work with the sprite again. And, this time we will use the CSS transition property to add special effect.

Social Media Icons transition effect
About the Instructor
Sandy Ludosky
4.1 Average rating
1,495 Reviews
17,214 Students
21 Courses
Web Designer & Developer

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff.