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,543 students enrolled
$19
$55
65% off
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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

What 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.

Curriculum

Section 1: Welcome!
00:56

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
04:00

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 : http://www.w3schools.com/html/html_headings.asp

03:03

For more practice, visit : http://www.w3schools.com/html/html_formatting.asp

05:18

For extra resources visit : http://www.w3schools.com/html/html_links.asp

03:54

For extra resources visit : http://www.w3schools.com/html/html5_semantic_elements.asp

08:00

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 :http://www.w3schools.com/tags/tag_meta.asp

Section 3: CSS Fundamentals
CSS Cheatsheet | PDF
2 pages
Intro to CSS (Cascading Stylesheet)
04:13
Formatting
08:37
07:40

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

Enjoy!

Styling the Navigation Bar
06:25
Pseudo-class
03:24
Class & ID
04:32
CSS Float (2-column Layout)
02:50
CSS Clear Property
01:53
The Box Model
04:01
Margin & Padding
07:21
Reverse Layout
01:33
Section 4: Responsive Design | Media Queries
Media Queries | Tablet
07:48
Media Queries | Small Devices
08:15
Section 5: Alternate Layout
Media Queries - I
06:56
Media Queries - II
04:26
Adding Media
03:14
Embed a youtube video link
02:21
Section 6: Project - "Bon Voyage! Travel with Us!" - Part I
Project overview
03:51
Navigation
09:55
Banner
04:22
09:42

Links to:

Freepik : http://www.freepik.com/ - 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.

11:03
09:56

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.

source: http://www.w3schools.com/css/css_image_sprites.asp

Footer
04:16
Google Font & Font Awesome
05:30
Navigation | Position Fixed
02:24
Navigation | CSS z-index property
01:26
Section 7: Project - "Bon Voyage! Travel with Us!" - Part II (Media Queries)
Tablet & Ipad
03:10
Mobile version 1
09:48
Mobile version 2
10:29
Section 8: Project - Bonus
Navigations links hover effects
05:04
02:20

link to Animate.css

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

Images Hover effect
05:06
06:02

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