HTML and CSS Essentials
Learn to create standards compliant Web sites using HTML and CSS
In order to build a Web site today, you need to know how to code using HTML and CSS.
In this course, you'll learn just how fun and creative hand coding and designing Web sites can be. Working with a professional Web designer, you'll discover how to create Web pages with HTML and control page design and layout with CSS. With simple, step by step lessons and assignments, the course get you up to speed with current Web design practices including HTML5, CSS3, semantic coding, Web fonts, and responsive design.
Even if you're totally new to coding for the Web, this designer-friendly course will show you how to master coding principles and use them to improve your Web design and layouts. By the end of the course, you'll have designed and launched several Web sites, including your first responsive Web design. And you'll have learned clean, standards-compliant coding practices along the way!
Course content developed by
To take this course you'll need:
- Computer with Internet connection (56 Kbps modem or faster).
- An account with an ad-free Web hosting service (free services are available and listed in the course). An ad-free Web space allows students to upload assignments without interference from forced ads like popups or banners.
Students learn how to:
- Write clean, standards-compliant HTML and CSS.
- Create and structure HTML documents using common tags, adding hyperlinks and images.
- Reserve Web hosting and FTP files to the Web.
- Write CSS rules and apply styles using stylesheets.
- Use CSS to control color and typography.
- Use selectors: classes, IDs, and spans to apply CSS styles.
- Style elements with the box model, using borders, padding, and margins.
- Design page layouts using relative positioning, absolute positioning, and floats.
- Create fixed and fluid one and two-column layouts.
- Use HTML5 semantic elements to structure page content.
- Use HTML5 code to add audio and video content.
- Create and style horizontal navigation and standardize layout proportions.
- Add Web fonts to your site's HTML and CSS.
- Create a functioning responsive site with a framework or boilerplate.
- Set up the Skeleton framework for a Web design project.
LESSON 1 An Intro to HTML
LESSON 2 CSS Color and Typography
Web design today is all about using CSS (Cascading Style Sheets) to style the color and typography of your Web site pages. In Lesson Two, you'll learn the benefits of using CSS to control the design of a Web site. Through practical, step by step examples, you'll learn the three primary ways of applying CSS to an HTML page, explore how to correctly write CSS rules, and then apply your design styles using CSS selectors: classes, IDs, and spans. You'll also get an overview of how to use color and typography styles from a design perspective. In the assignment, you'll show your mastery of color and typography styles.
LESSON 3 Page Layout with CSS
The power of CSS is not limited to color and typography: CSS is also a tool for controlling Web page layout. Lesson Three begins by showing you how to apply CSS using the box model to style elements using borders, padding, and margins. This design approach will help your content breathe. You'll explore the ins and outs of CSS positioning, learning how relative positioning, absolute positioning, and floats are used to lay out page sections and create fixed and fluid one and two-column layouts. The lesson wraps up with some essential troubleshooting tips for CSS positioning and floats. You're all set as you lay out a small business site in the assignment.
LESSON 4 HTML5 Semantic Elements
In recent years, HTML5 has introduced new ways of structuring and delivering Web page content. Lesson Four explores this new world with a look at how to use HTML5 uses semantic elements to mark up Web pages to improve layout control and accessibility. Since HTML5 has set new standards for multimedia, you'll learn how to audio and video content to your Web pages and learn principles for testing sites on multiple platforms and browsers. You'll test them out in an assignment that your challenges your markup skills.
LESSON 5 Advanced CSS Techniques
The continued evolution of HTML and CSS has provided so much more flexibility for designers. Lesson Five explores various techniques that will improve your site designs. First, you'll examine how to create and style horizontal navigation and how to use CSS height and width properties to standardize layout proportions. Then you'll gain an introduction to the many new typographical options offered by Web fonts and Google fonts. Finally, you'll explore some simple but awesome CSS3 effects that will take your Web sites out of the ordinary. In the assignment, you'll put these designer-friendly techniques into practice.
LESSON 6 Intro to Responsive Web Design
Web design today is undergoing a transformation, as more and more sites convert to a responsive design methodology that meets the needs of both desktop computer and mobile users. In the final lesson, you'll learn how responsive sites work, and explore the concept of media queries and how to include them in your style sheets. This will equip you to actually build your own responsive site by working for a framework or boilerplate. In the final assignment, you'll do just that: build a responsive site that modifies its content display based on the device used to access the site.