Modern Web Design
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.
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
- A text editor (We suggest Visual Code Studio, it’s free, and available for Mac, Windows, and Linux)
- Google Chrome web browser