Kickstart Guide: Build a site with HTML and CSS
4.0 (1 rating)
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.
31 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Kickstart Guide: Build a site with HTML and CSS to your Wishlist.

Add to Wishlist

Kickstart Guide: Build a site with HTML and CSS

Build a multi-column web page from start to finish, covering all of the HTML and CSS that you need to know.
4.0 (1 rating)
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.
31 students enrolled
Created by Brian Wood
Published 7/2012
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand HTML and CSS
  • Create a multi-column layout
  • Markup text with HTML and style it with CSS
  • Insert Images and style them with CSS
  • Create links and style then with CSS
  • CSS features like clear, positioning, the box model and more
  • Create and style HTML lists
  • Insert tables and style them with CSS
  • Create a form and use CSS to add some styling
  • An introduction to SEO and metadata content you can add to your pages
View Curriculum
  • There are no requirements

In this HTML And CSS Tutorial you’ll build a multi-column web page from start to finish, covering all of the HTML and CSS that you'll need to start building a site. This course covers topics ranging from creating a layout using divs to creating and styling forms. After going through this course, you'll not only be learning HTML And CSS to be able to build a website, you'll be ready to begin integrating new functionality and features, all of which require you to know these essential basics.

Who is the target audience?
  • Marketing professionals
  • Print designers
  • New to web design
  • Anyone who wishes to learn more about how you can use HTML and CSS to build web pages.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
26 Lectures
26 Lectures 04:57:00

This introductory section is intended to describe what HTML and CSS can do, discuss HTML page structure and also where you can create and test your HTML and CSS.  

Preview 08:05

In this section, we’ll discuss what a doctype is and which to use, cover the basic syntax of HTML tags, and create and discuss what goes in the and sections of the page.

Preview 13:58

Discover the different places where CSS styles live (internal vs. external), create a stylesheet and link that style sheet to your page.

Preview 09:29

This section is intended to give an overview of the three types of styles that you can use on the web: classes, tags, and IDs.

Types of CSS Styles

You will learn the basic structure of a style and create your first tag styles that every site begins with.

Basic CSS styling every site needs

In this very important section, you will learn how we create multi-column layouts in a web page using DIV tags and CSS. This is a great introduction to these concepts and will make it easier if you decide later to learn more about HTML5 and it's semantic tags.

Understanding Web Layout

Lots of sites today use DIV tags and CSS to create the main structure of a page. In this section, you will insert a series of DIVs and create styles for each of them to lay the groundwork for your multi-column layout.

Add DIVs to your page for layout

You will learn one of the more widely used methods of turning DIVs into columns using the float property. You'll also learn how float actually works so that you can use it throughout your pages.

Create Layout Columns

The "Box Model" is an important concept to understand when laying out your pages using CSS.

Understanding the "Box Model"

Inserting text and adding HTML markup like paragraph and heading tags, for instance, are important for creating content hierarchy in your pages. In this section, you will insert HTML tags to begin styling your text. 

Add Text to the HTML

In this section you will begin to create CSS styles to modify the appearance of the HTML tags, as well as create other types of styles to apply to your text in different ways.

Style Text with CSS

Learn the HTML necessary to insert images and apply attributes to those images.

Insert Images into HTML

After inserting images, you are eventually going to want to wrap text around them, add a border, push text away, and more. In this section, you will create class styles to apply styling to the image.

Style Images with CSS

Adding CSS formatting to the backgrounds of objects can be a great way to add design depth to your pages. In this section, you will explore adding and editing the properties for a background image as well as working with background colors.

Add CSS Background images and color

In this short section, you will learn about an important concept called clear to help battle a problem we all face with floated elements.

Understanding Clear

There are many ways to create a multi-column layout. In this section, I want to introduce the position property and discuss the different methods for positioning content in your page.

Positioning Content

Links are really important when it comes to a website, and in this section, we will create several different types of links including links to other pages, links to other websites, email links, and linking to anchors.

Create Different Types of Links

After creating your text links, you will want to modify their appearance. In this section, you will create link styles for the bulk of your links and create another link style for specific links.

Style your links with CSS

Lists amy seem boring and not very useful, but they are used for a lot of formatting options on your site. In this section, you will create bullet and number lists in your HTML.

Create HTML lists

Styling lists with CSS is a great way to make them behave the way you want in your design. It also leads to what the next section will introduce: navigation systems.

Style lists with CSS

In this section, you will be taken to a favorite site of mine (from way back) that will give you tons of examples of navigation bars (menus) to learn from.

Understand how web navigation is built

Tables have become a dirty word in web circles, but they can still be used today to display data. In this section you will build an HTML table.

Create HTML tables for data

Controlling the appearance of your tables using CSS is the focus of this section.

Style Tables with CSS

In this section, you will create a web form from scratch using a series of different types of form fields, you'll create your own submit button and understand the process for gathering form data from users.

Create an HTML Form

Forms used to be so boring, but with CSS you can easily make your form much more attractive and useful to your users.

Style an HTML form with CSS

In this last section, you will discover a few of the tags that you can add to your pages to help with SEO (Search Engine Optimization), as well discover a great resource on the Google website for learning more about helping to get your pages a higher ranking in search engine results.

Add Metadata to your pages
About the Instructor
Brian Wood
3.8 Average rating
4 Reviews
59 Students
3 Courses
Web Developer/Trainer

Brian Wood is a web developer and an Adobe Certified Instructor in Dreamweaver CS5, Acrobat 9 Pro, Illustrator CS5, and the author of seven training books (Illustrator, Muse, and InDesign), all published by Peachpit Press, as well as numerous training videos and DVDs on Adobe Muse, Dreamweamver & CSS, InDesign, Illustrator, Acrobat, including Acrobat multimedia and forms, Expression Web and others. In addition to training clients like Nordstrom, REI, Boeing, Costco, Starbucks, Nintendo, NBBJ and many, many others, Brian speaks regularly at national conferences, such as Adobe MAX, CSS  for Designers tour, The InDesign Conference, The Web Design Conference, The Creative Suite Conference, as well as events hosted by AIGA, GAG, STC, CASE and other industry organizations. Brian has a free tips blog at