This week we’ll start to get to know a bit about each other and spend a little time reviewing how this course will work. Then we’ll move onto an overview of the programs, tools, and languages we will be using. We will also look at a few basic HTML elements and design concepts.
- 1.1: Introduction
- 1.2: Basic HTML
- 1.3: Grids & Spacing
- E1: 20 Questions
- E2: Make the Grid
- P1.1: Concept, content, and reference collection
- Learning Web Design: Chapters 1–5
- Interneting is Hard: Introduction & Basic Web Pages
This week we’ll go a little further into HTML and begin to introduce CSS. We will look at best practices for folder and file naming, organization, and structure as well as the first steps of planning and designing a website.
- 2.1: Organization, Naming, and Planning
- 2.2: Links
- 2.3: External Style Sheets
- 2.4: Images
- E3: Organization and Naming
- E4: Site Map
- E5: Wireframes
- P1.2: Site map, wireframes, and folder structure
- Learning Web Design: Chapters 6, 7, 11, 23, & 24
- Interneting is Hard: Links and Images & Hello CSS
Every element in HTML is a rectangular box and the box model will help us understand how those elements get drawn on the screen. We will also advance our knowledge of CSS and talk about hierarchy and typography on the web.
- 3.1: The Box Model
- 3.2: CSS Selectors
- 3.3: Hierarchy & Typography
- E6: Type on Screen I
- E7: seven-principles.txt
- P1.3: First 1440px designs, homepage content populated
- Learning Web Design: Chapters 12–14
- Interneting is Hard: The Box Model, CSS Selectors, & Web Typography
This week we are going to catch our breath and review what we talked about in the previous weeks.
- No new lessons
- No new exercises
- P1.4: Second 1440px designs, begin to style homepage, content in other pages
- Review previous references
There are many different ways to layout pages with HTML and CSS. This week we will talk about one of those — floats.
- 4.1: Floats
- P1.5: Third 1440px designs, full site styles, functioning navigation
- Learning Web Design: Chapters 15 & 16
- Interneting is Hard: Floats & if your looking for more flexibility in your layouts Flexbox
Responsive design is a key element of designing for the web today. This week we will introduce the concept and coding principles behind getting a website to show up well on a narrow phone screen and a wide desktop monitor. We will also talk about navigation design and coding.
- 5.1: Responsive Design
- 5.2: Navigation
- E10: Visualizing Responsiveness
- E11: Type on Screen II
- P1.6: First 320px designs, homepage responsive
- Learning Web Design: Chapters 6 & 17
- Interneting is Hard: Responsive Design
This week we will expand our knowledge of HTML and CSS by covering a few advanced ideas.
- 6.1: Advanced Positioning
- 6.2: Advanced CSS
- E12: CSS Drawing
- E13: Programmer and Computer
- P1.7: Second 320px designs, All pages responsive
- Learning Web Design: Chapters 15 & 23
- Interneting is Hard: Advanced Positioning & Responsive Images
- 7.2: Plugins
- E14: jQuery
- P1.8: Project complete. 4 final desktop designs at 1440px as pngs, 4 final mobile designs at 320px as pngs, 1 working website that is as close as possible to your desktop designs.
- Learning Web Design: Chapters 22