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 (11 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,544 students enrolled
Take This Course
  • Lectures 43
  • Length 3.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2014 English

Course Description

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

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Welcome!

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.

Course Guide (PDF) + downloadable Working Files
1 page
Section 2: HTML tutorial
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 :


For more practice, visit :


For extra resources visit :


For extra resources visit :


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 :

Section 3: CSS Fundamentals
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.


Styling the Navigation Bar
Class & ID
CSS Float (2-column Layout)
CSS Clear Property
The Box Model
Margin & Padding
Reverse Layout
Section 4: Responsive Design | Media Queries
Media Queries | Tablet
Media Queries | Small Devices
Section 5: Alternate Layout
Media Queries - I
Media Queries - II
Adding Media
Embed a youtube video link
Section 6: Project - "Bon Voyage! Travel with Us!" - Part I
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.


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.


Google Font & Font Awesome
Navigation | Position Fixed
Navigation | CSS z-index property
Section 7: Project - "Bon Voyage! Travel with Us!" - Part II (Media Queries)
Tablet & Ipad
Mobile version 1
Mobile version 2
Section 8: Project - Bonus
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.

Images Hover effect

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Sandy Ludosky, 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.

Ready to start learning?
Take This Course