Web Design For Beginners Real World Coding In Html Css

Launch a career as a web designer by learning HTML5, CSS3, responsive design, Sass and more!

Last updated 2022-01-10 | 4.6

- Create any website layout you can imagine
- Support any device size with Responsive (mobile-friendly) Design
- Add tasteful animations and effects with CSS3

What you'll learn

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

* Requirements

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

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.

In the summer of 2020 the course has received a new section where we push our website live up onto the web using the free GitHub Pages service; this means you'll be able to share a link to what you've created with your friends, family, colleagues and the world!

I have helped over 100,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."

Who this course is for:

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

Course content

22 sections • 71 lectures

Welcome! 2 lectures

Course Introduction Preview 01:59

Big Picture Overview of Course (What To Expect) Preview 02:15

HTML Essentials 8 lectures

Why HTML is Exciting Preview 02:11

First Look at HTML Preview 07:09

The Easiest Way to Get Started Preview 06:44

Hands On! Create your First HTML File Preview 06:42

Russian Stacking Dolls: Bulleted Lists Preview 04:22

HTML Document Structure Preview 04:51

First Look at Attributes: Linking Pages Together Preview 08:16

Section 1 Review Preview 02:18

Adding Media to a Web Page 4 lectures

Images Preview 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.

Audio Files Preview 05:48

In this lesson we learn about the "<audio>" element which allows us to include audio clips on our pages. Download the supplementary material .zip file for a working demo of the audio element.

Video Files Preview 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.

Vector Graphics & Illustrations (SVG & Figma) Preview 11:01

Text Basics 4 lectures

Headings Preview 03:48

Lists Preview 05:47

Bold & Italic Preview 07:13

Special Characters Preview 03:08

For a larger list of available HTML special characters visit this Wikipedia 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."

Semantics & Organization 5 lectures

Semantic Structural Elements Preview 07:35

Navigation Preview 04:00

Non-semantic Elements ("div" and "span") Preview 05:27

HTML Comments Preview 02:41

The "Section" Element Preview 04:47

Forms 3 lectures

Forms Preview 08:19

Different Types of Inputs Preview 06:21

Choosing Between a set of options Preview 10:35

Tables 2 lectures

How to Create a Table of Data Preview 07:18

Do Not Use Tables for Layout Preview 01:46

CSS Essentials 7 lectures

CSS Introduction Preview 05:17

CSS Selectors Preview 06:51

The Cascade Preview 10:08

Box Model Preview 08:19

Quick Note About CSS Floats Preview 01:36

Creating a Page Layout with Floats Preview 15:34

Beauty School! Apply What We've Learned Preview 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.

Intermediate CSS 2 lectures

Styling Navigation Menu Preview 08:02

Overlapping Content & Transparent Backgrounds Preview 15:06

Less Exciting Yet Still Necessary CSS Tasks 2 lectures

Styling Data Tables Preview 12:46

Styling Forms Preview 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...).

CSS Typography 2 lectures

CSS Typography Preview 09:29

Using Custom "Web" Fonts Preview 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.

Developer Timeout! 1 lectures

Developer Tools | Inspect Elements Preview 05:43

CSS Backgrounds 4 lectures

Background Images Preview 15:12

Gradient Backgrounds Preview 05:10

CSS Sprites Preview 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 Preview 07:00

Responsive Web Design 4 lectures

Chapter Introduction Preview 01:25

Responsive Web Design Preview 19:55

Responsive Grids Preview 19:58

Responsive Grid with Flexbox Preview 02:09

What is Flexbox in CSS? 2 lectures

Flexbox (Part 1) Preview 18:04

Flexbox (Part 2) Preview 09:59

CSS3 Special Effects 5 lectures

Box Shadows Preview 05:55

Rounded Corners Preview 06:39

CSS Transform Preview 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 Preview 13:08

CSS Animations Preview 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.

Leveraging JavaScript without Writing JavaScript 5 lectures

Chapter Introduction Preview 02:45

Slideshow (Part 1) Preview 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.