Web Design for Beginners: Real World Coding in HTML & CSS

Launch a career as a web designer by learning HTML5, CSS3, responsive design, Sass, cross device compatibility and more!
4.7 (1,088 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.
6,652 students enrolled
$19
$60
68% off
Take This Course
  • Lectures 58
  • Length 9 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 9/2014 English

Course Description

You can launch a new career in web development today by learning HTML & CSS. You don't need a computer science degree or expensive software. All you need is a computer, a bit of time, a lot of determination, and a teacher you trust. I've taught HTML and CSS to countless coworkers and held training sessions for fortune 100 companies. I am that teacher you can trust.

Don't limit yourself by creating websites with some cheesy “site-builder" tool. This course teaches you how to take 100% control over your webpages by using the same concepts that every professional website is created with.

This course does not assume any prior experience. We start at square one and learn together bit by bit. By the end of the course you will have created (by hand) a website that looks great on phones, tablets, laptops, and desktops alike.

I have helped over 4,000 students and have received the following feedback:

“…A fantastic course… clear, definite and engaging."

“…Presentation is concise without being tedious… you honestly feel that you have a thorough understanding of the subject."

“…[Brad] explained the process. Not memorize this or that, he explained the process. If you're looking to take a course to understand the foundations of creating websites, look no further."

“Brad definitely has some of the best techniques to embed the lesson into your mind… hands down these are the best tutorials I have had the opportunity to view."

“I found this course really helpful and I highly recommend it… all things you learn are seen in action instantly."

“Brad has put together a great foundation for any body wishing to get a good understanding with front end web-development."

“…I would definitely recommend this course to most folks I know who want to learn web design."

What are the requirements?

  • No prerequisite knowledge required
  • No special ($$$) software required

What am I going to get from this course?

  • Create any website layout you can imagine
  • Support any device size with Responsive (mobile-friendly) Design
  • Add tasteful animations and effects with CSS3
  • Use common vocabulary from the design industry

What is the target audience?

  • Anyone who wants to build websites the "professional" way
  • Anyone who has practiced web design as a hobby but is not confident about their skillset in a professional arena
  • Experienced developers looking to renew their HTML5 & CSS3 knowledge

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!
Course Introduction
Preview
01:59
Section 2: HTML Essentials
Why HTML is Exciting
Preview
02:10
First Look at HTML
Preview
07:09
04:52

I strongly encourage you to use a dedicated text editor. I recommend the freely available Sublime Text.

Russian Stacking Dolls: Bulleted Lists
04:22
HTML Document Structure
04:51
First Look at Attributes: Linking Pages Together
06:25
Section 1 Review
02:18
Section 3: Adding Media to a Web Page
05:24

In this lesson we learn how to insert an image into a webpage. If you want to edit or resize an image before placing it on your webpage and you do not have access to Adobe Photoshop I recommend the free image editing software named GIMP.

05:48

In this lesson we learn about the "<audio>" element which allows us to include audio clips directly on our pages without relying on third party software (Flash). Download the supplementary material .zip file for a working demo of the audio element.

08:14

In this lesson we learn about the "<video>" element which allows us to natively include video clips on our pages. However, we learn that there are several factors which make including video on our pages without the help of third party services quite tricky.

Section 4: Text Basics
Headings
03:48
Lists
05:47
Bold & Italic
07:13
03:08

For a larger list of available HTML special characters visit this University page.

Also please note that in the video lesson I incorrectly referred to the "&" symbol as "ampersands" (plural). In this case the correct phrase would be simply "ampersand."

Section 5: Semantics & Organization
Semantic Structural Elements
07:35
Navigation
04:00
Non-semantic Elements ("div" and "span")
05:27
HTML Comments
02:41
The "Section" Element
04:47
Section 6: Forms
Forms
08:19
Different Types of Inputs
06:21
Choosing Between a set of options
10:35
Section 7: Tables
How to Create a Table of Data
07:18
Do Not Use Tables for Layout
01:46
Section 8: CSS Essentials
CSS Introduction
Preview
05:17
CSS Selectors
06:51
The Cascade
10:08
Box Model
08:19
Creating a Page Layout with Floats
15:34
11:44

Let's apply what we've learned about CSS so far to make our page easier on the eyes.

If you are looking for a color picker I recommend the free Adobe Kuler website / tool. Not only can you click on a circle in the color wheel to find color codes, but Kuler will also provide additional complimentary colors.

Section 9: Intermediate CSS
Styling Navigation Menu
08:02
Overlapping Content & Transparent Backgrounds
15:06
Section 10: Less Exciting Yet Still Necessary CSS Tasks
Styling Data Tables
12:46
17:20

In this lesson we learn how to customize the appearance of HTML forms. The lesson mentions third party CSS libraries you can leverage to tackle cross browser styling issues. Here are some of the most popular options in the webDev community:

Formalize

Normalize

Note that Formalize is strictly focused on forms, while Normalize helps level the playing field for all elements across all browsers (e.g. h1-h6, p, table, etc...).

Section 11: CSS Typography
CSS Typography
09:29
12:24

In the past web designer's were limited to a small handful of fonts, but in today's web we are free to use any font we desire thanks to "@font-face" technology.

My favorite free font resources are Google Fonts and Font Squirrel.

Section 12: Developer Timeout!
Developer Tools | Inspect Elements
05:43
Section 13: CSS Backgrounds
Background Images
Preview
15:12
Gradient Backgrounds
05:10
11:32

CSS Sprites allow our pages to load faster by combining many different graphics into a single image file. Many of the world's most popular websites use this technique.

Full Width Backgrounds - Fixed Width Content
07:00
Section 14: Responsive Web Design
Responsive Web Design
19:55
Responsive Grids
19:58
Section 15: CSS3 Special Effects
Box Shadows
05:55
Rounded Corners
06:39
12:49

The "transform" property can be used to manipulate the appearance of elements. In this lesson we learn about rotate, scale, skew, and positioning elements.

For extra credit you can explore the possibilities of 3D transforms. We don't delve into 3D transforms in this lesson because the topic demands its own five hour course but if you are interested in learning about 3D effects in the web browser the brilliant David DeSandro has created a freely-available must-read guide!

CSS Transitions
13:08
19:58

CSS animations allow us to add movement to any element we choose. In this lesson we learn the essentials of controlling how and when elements move.

If you're looking for inspiration regarding what types of animation / "fade-in" effects you can create or use be sure to visit the brilliant Dan Eden's "Animate.css" demo page.

Section 16: Leveraging JavaScript without Writing JavaScript
17:59

In this lesson we begin to learn what JavaScript is and what it is typically used for. Even though learning how to write JavaScript code is outside the scope of this course we can still leverage existing JavaScript solutions to add new functionality to our pages.

In particular, this lesson showcases the creation of a slideshow. In the lesson we make use of the excellent "Cycle2" script written by Mike Alsup. You can find the official Cycle2 documentation page here.

Be sure to download the .zip file attached to this lesson to dissect and analyze things for yourself.

Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.

09:06

In this lesson we begin to learn what JavaScript is and what it is typically used for. Even though learning how to write JavaScript code is outside the scope of this course we can still leverage existing JavaScript solutions to add new functionality to our pages.

In particular, this lesson showcases the creation of a slideshow. In the lesson we make use of the excellent "Cycle2" script written by Mike Alsup. You can find the official Cycle2 documentation page here.

Be sure to download the .zip file attached to this lesson to dissect and analyze things for yourself.

Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.

12:13

In this lesson we learn how to initially hide bits of content and then reveal that content later by clicking / tapping on a trigger element.

Here is a link to the declarativeToggle download & documentation page.

As always, you can download the .zip file associated with this lecture to grab a copy of the finished product.

Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.

18:40

In this lesson we learn how to open images in a modal window, and also how to align thumbnail images in a strict grid.

Here is a link to the Lightbox package we leverage during the lesson.

As always, you can download the .zip associated with this lecture to grab the finished product.

Quick note about website speed: in this lesson we include JavaScript files in the <head> section of our HTML. While this location may be simple to remember we can achieve better performance by placing JS directly before our page’s closing <body> element.

Section 17: Sass
19:58

Syntactically Awesome Style Sheets (Sass). In this lesson we learn what Sass is, what problems it solves, and why so many developers have made it an integral part of their workflow. Below are links to free resources mentioned in the lesson.

19:56

We continue to learn about Sass by reviewing Mixins and operators. Below are links to free resources mentioned in the lesson.

Section 18: Cross Browser Compatibility
11:17

In this lesson we learn how to leverage Can I Use and Modernizr to make sure that we can include modern CSS features such as animations without leaving visitors with older browsers out in the cold.

10:09

In this lesson we learn about testing your pages in different web browsers and devices. In particular we learn about Google Chrome's emulation tools and also the amazing Modern IE website which offers free screenshot services and a library of free virtual machines for legacy testing.

Section 19: Beyond This Course
07:52

In this lesson we discuss logical next steps after you have mastered the basics of HTML and CSS.

If you have any questions please feel free to start a course discussion or direct message me.

If you are interested in learning JavaScript I recommend two resources. The first is a YouTube video which explains the practical / traditional uses of JavaScript. The second is a free eBook which has become the industry standard for learning JavaScript, written by Marijn Haverbeke.

Below are links to the popular communities listed in the lesson:

If you are interested in WordPress; I have created a freely available video series on learning WordPress on YouTube.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

My name is Brad, and during my decade in the workforce I’ve taught HTML and CSS to countless coworkers and held training sessions for fortune 100 companies.

I’m a front-end developer, designer, and educator. I’ve been building user interfaces for over a decade for the world's largest brands, international technology leaders, and national political campaigns.

I'm fortunate to enjoy the development work I do, but my true passion is helping people learn. I look forward to answering your questions and am available for 1-on-1 chats with all of my students.

Ready to start learning?
Take This Course