HTML and CSS: A Guide to Web Design

Learn how to create an attractive and functional responsive website, without overly complicated terms and ideas.
4.7 (9 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
$25
Take This Course
  • Lectures 74
  • Contents Video: 14 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 6/2015 English

Course Description

Have you ever wondered how you could get that magnificent idea from your brain onto the web? You see so many great websites (and a couple of not so great ones), and you can't help but think, "I could do that!"

If so, then this course is perfect for you. Instead of drilling down with lots of useless snippets and complicated examples, this course will focus on functional application that you can use right away.

You will learn how to code a website from scratch, in a structure that will make it easy to apply Responsive Design styles to. You will also learn how to use basic PHP snippets to make updating common parts of your website easier than a traditional static website.

This course includes all the following, and more:

  • HTML Fundamentals
  • CSS Fundamentals
  • Basic PHP Introduction
  • Font Usage and Google Font Substitution
  • Website Testing
  • Responsive Design and Media Queries
  • Troubleshooting and Error checking Guidelines
  • 74 Lectures, File downloads, and 15 hours of content

The best part about this course is that it makes no assumptions on your skill level. If you know nothing, or a whole lot of something, you'll find techniques in this course that you can apply to your next project. All of the material used in this course is real world application. All of the examples used are based off the structure you will be learning, so it's been proven to work in production

If this sounds right for you and you're ready to get started, just click the Take This Course button to the right and we'll begin!

What are the requirements?

  • Mac or PC
  • Web Browser. Chrome or Firefox is recommended, but any will do.
  • Text editor. I use the Adobe Suite.

What am I going to get from this course?

  • take the structure and fundamentals learned to create simple, and complex websites for just about anything
  • take many CSS and HTML fundamentals from example to production
  • find and fix common errors that occur in the coding process
  • Create a responsive site from scratch, or retrofit an existing site

What is the target audience?

  • This HTML and CSS course is designed for those who have little to no experience creating websites, but want to learn. This is directed at static website development, so no major PHP or database applications will be covered.
  • If you are looking for a good refresher course - for more experienced individuals.
  • Individuals wanting to make websites more accessible with Responsive Design

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: Course Introduction
06:07

Welcome to the course and overview of things we'll be going over.

08:06

Programs and tools we'll be using, as well as suggested alternatives

06:56

A brief overview and history of what HTML and CSS are.

06:40

Practical examples of websites built with the exact HTML and CSS fundamentals and structures found inside the lessons in this course.

Section 2: Project Setup
06:06

We'll go over how to install MAMP and how to set it up for easy website development and testing.

04:46

We'll look into common website folder organization and the thinking behind why it's done

Section 3: HTML Fundamentals
Page Setup
05:41
H1 through H6 Tags
05:57
P (Paragraph) Tag
04:19
Ordered and Unordered Lists
06:32
Images
09:48
Links
12:27
Tables
08:16
iFrames and Embed
12:01
Blockquotes
05:47
Forms
14:35
Metadata & Title
Preview
07:45
Section 4: CSS Fundamentals
External, Internal, and Inline CSS
13:08
Selectors
16:31
DIV Containers
Preview
11:47
Font Color & BG Color
12:33
Float & Clear
16:33
Margins & Padding
07:42
Borders
16:33
Styling Links
16:13
Fonts
11:46
Background Images
12:58
Overflow
05:46
Text & Box Shadows
Preview
10:01
Positioning and Z-index
18:59
Form Styling Part 1
09:59
Form Styling Part 2
11:38
CSS Navigation
Preview
14:22
Google Fonts
15:16
Grouping CSS Classes
09:56
Section 5: Building Our Website
Introduction & Goals
05:26
Setting It Up
08:08
Our Grid Structure
20:40
Building the Home Page Part 1
Preview
15:15
Building the Home Page Part 2
11:45
Styling the Home Page Part 1
14:40
Styling the Home Page Part 2
10:32
Styling the Home Page Part 3
12:18
Info List
13:50
Navigation Menu
09:25
Header & Footer PHP
17:35
Active Links for Navigation
10:46
Section 6: Internal Pages of Our Website
Introduction
01:34
Experience Page Part 1
18:00
Experience Page Part 2
20:54
Portfolio Page Part 1
14:31
Portfolio Page Part 2
18:31
Portfolio Page Part 3
Preview
15:04
Testimonials Page
20:06
Contact Page Part 1
14:35
Contact Page Part 2
15:32
Contact Page Part 3
16:13
Section 7: Responsive Design
Introduction to Responsive Design
Preview
03:58
Media Queries
Preview
16:58
Meta Viewport
05:40
Tablet View Part 1
17:45
Tablet View Part 2
16:26
Mobile View Part 1
12:11
Mobile View Part 2
13:38
Section 8: Going Live With Our Website
Introduction
02:03
Domain and Hosting
16:40
Filezilla Upload
08:18
Website Testing
15:30
Thank You!
02:52
Section 9: Bonus Material
Bonus Introduction
01:21
Font-Awesome Integration
12:18
Image Optimization
12:44
Adding a Favicon
13:06
Google Analytics
07:43

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

James Rogers, Creative Thinker at Udemy

My name is James, and I'm a freelance graphic designer & web developer currently located in California. I have a Bachelor of Science in Graphic Design, graduated with Honors, and I've been building websites for over 10 years. Give me your creative problem, and I'll give you a creative solution.

My experience as a graphic designer has allowed me to combine the technical functions of building a website with the aesthetic side of creating art, which results in a clean, functional website that looks good and operates the same way. I believe in having a clean design, and clean code.

Ready to start learning?
Take This Course