Welcome to Web Design I. Here is the class overview and quick reference for what we be learning. This is a 10 week semester and web design is a vast and ever-changing subject. We will cover web design and development basics including HTML, HTTP, and CSS as well as learn the tools of modern practicing web designers and developers. Additionally, we’ll be merging our more general design skills into this new web design space. I’m really excited to be able to teach this class and have know doubt we will learn a lot together!

Winter 2022

Lectures: Wednesdays, 3:30pm PT
Office Hours: By appointment

WEEK 1 //
The Internet & HTML

Topics

• The history of the Internet
• How the internet works
• HTML is a templating language
• HTML Page
• HTML Elements and Attributes
• HTTP Verbs and Statuses

Exercise

WEEK 2 //
The Design Thinking Process & CSS/SASS/SCSS

Topics

• Having a method to your work: The Design Thinking Process
• CSS is a styling language
• CSS (inline and imported)
• CSS Properties
• SASS/SCSS

Exercise

WEEK 3 //
HTML, CSS, Fonts, & Media

Topics

• More HTML Elements and Attributes
• More CSS Properties
• CSS Pseudo Class and Pseudo Elements
• Embedding media
• Using fonts
• Using icons
• Brief review of design principles and information design

Exercise

WEEK 4 //
Chrome Dev Tools

Topics

• Inspector and Viewing Source
• Lighthouse
• Network
• Console
• Editing code in the browser

Exercise

WEEK 5 //
Web Design Frameworks & Understanding Usability

Topics

• Grids
• Bootstrap
• Material UI
• Understanding the user’s expectations

Exercise

WEEK 6 //
Usability & User experience

Topics

• Methods for getting feedback
• UX testing
• Quality Assurances and User Acceptance Testing

Exercise

WEEK 7 //
Deploying, Hosting, & Backend Development

Topics

• Servers, Networking, Domain names, DNS
• Cloud hosting with Github pages and Netlify

Exercise

WEEK 8 //
Responsive Web Design

Topics

• Media queries and points
• Testing on multiple devices
• Chrome Dev Tools and Browserstack

Exercise

WEEK 9 //
Analytics, A/B Testing, & Website Performance

Topics

• Google Analytics
• Testing designs on a subset of users
• Time to first paint
• SEO and selecting domain names

Exercise

WEEK 10 //
Advance Web Design & Managing Software Projects

Topics

• Javascript
• Casing: camel, kebab, snake, etc. Follow the standard for the language.
• Hiring and managing developers
• Agile Developing and task management (vs Waterfall)
  • Standups
  • Sprints
  • Planning Mettings
  • Retrosceptives
• Gantt Charts

Exercise

• Final Demos