Skip to main content

Modern Web Design

Full Course

Modern Web Design will prepare you to be a front-end developer by walking you through the basics of HTML, CSS and JavaScript.

Course Preview

Modern Web Design

This course is an introduction to front-end development for the web. You will learn how to mark up content with HTML, use CSS as a design tool, and add interactivity to your web pages with JavaScript. You will also learn the basics of building a responsive website for mobile devices and tablets, as well as for the desktop.

Course Outline

  • Lesson 1: Getting Your Bearings

    Learn the core skills of being a front-end developer and how they fit into the larger ecosystem of web design and workflow. Additionally, you'll learn the principles and benefits of progressive enhancement, a philosophy and collection of techniques for building web pages used throughout this course.

  • Lesson 2: An Introduction to HTML

    In this lesson you'll learn the anatomy of HTML elements and attributes and take a look at the importance of nesting and the Document Object Model (or DOM). You'll also explore how to create well-structured documents that will serve as the foundation for the styles you will add in later lessons with CSS.

  • Lesson 3: Structuring HTML Content

    Learn how to logically divide and apply markup to your content using the building blocks of HTML such as lists, tables, and figures. Additionally, learn how to use the relatively new elements that were introduced in HTML5, such as the main, section, header, and footer elements.

  • Lesson 4: Getting Started With CSS

    Build upon your new knowledge of HTML with a dive into the core concepts of Cascading Style Sheets (CSS). You'll learn about the different categories of style rules, and more importantly, which type of rule to use in any given situation. Additionally, you'll explore how to control the typographic style of your page, how to work with color, how to control layout through margins and padding, and much more.

  • Lesson 5: CSS as a Design Tool

    In this lesson you'll expand your CSS toolbox by exploring a number of stylistic techniques you can use to enhance the appearance of your pages, including CSS backgrounds, text and drop shadows, borders, and positioning of elements. You will also learn how to begin constructing pages designed to adapt to multiple screen sizes, including phones and tablets, through the use of CSS media queries.

  • Lesson 6: Getting Started with JavaScript

    This lesson wraps up your tour of learning how to be a front-end developer with a look at JavaScript, the language used to add interactivity to your website. In addition to reviewing the basic concepts of this powerful scripting language, you will also walk through a real-world project and build a robust site navigation component which uses JavaScript to adapt to small screens (such as smartphones).

Prerequisites

  • Familiarity with the web
  • Experience with a text editor (such as Sublime Text, Atom, BBEdit, etc.)

Requirements

The requirements for this class are flexible and vary. Many of the assignments rely either on writing/sketching or using design software that you are familiar with. That being said, here's what you'll need:

  • Mac or Windows desktop or laptop
  • Google Chrome web browser
  • Text Editor

This Course is For

  • Aspiring Front-end Developers
  • Designers
  • Creatives

Meet the Instructor

Aaron Gustafson

Aaron Gustafson

As would be expected from a former manager of the Web Standards Project, Aaron Gustafson is passionate about web standards and accessibility.

In his two decades working on the Web, Aaron has worked with a number of companies you’ve probably heard of including Box, Happy Cog, Major League Baseball, McAfee, the New York Times, SAS, StubHub, the U.S. Environmental Protection Agency, Vanguard, Walgreens, and Yahoo. He joined Microsoft as a web standards advocate to work closely with their browser team.

Aaron loves to share his knowledge and insights in written form. His three-part series on progressive enhancement for A List Apart is a perennial favorite and his seminal book on the subject, Adaptive Web Design, has earned him numerous accolades and honors. When he’s not writing, Aaron is frequently on the road presenting at conferences and running workshops across the globe.

Back home in Chattanooga, TN, Aaron is the proprietor of the Chattanooga Open Device Lab and helps organize the Code & Creativity talk series with his partner Kelly McCarthy. He is a longtime member of Rosenfeld Media’s “experts” group and writes about whatever’s on his mind at aaron-gustafson.com.

Enroll