Welcome to the Foundations of Web Design course.
This course is divided into 4 parts, of 3 lessons each. Each lesson has 4 activities or projects to build. The third lesson of each part is called a Project Lab, because it is focused on combining the skills of the previous two lessons into several larger and more practical projects.
Work In Progress: This course is in "early access". Presently, Part 1 is mostly complete, while Parts 2 through 4 are still in heavy development and are in varying levels of completion.
Learn single page and single columns designs. Learn the most basic core of HTML and CSS, letting you create simple one column layouts for things like landing pages, profile pages or "link trees", or business pages.
PROJECT LAB: After just 3 lessons that can be completed by beginners in under 2 hours each, you will have the skills to build each of the following designs, even learning how to integrate plug-ins that permit e-commerce, audio, video, and more:
Learn how to link together multiple HTML and CSS files. You'll also get a chance to learn more HTML and CSS concepts, such as tag nesting, classes, and flex-based column layouts, and be able to build more sophisticated designs with multiple pages to navigate to.
PROJECT LAB: After only more 3 lessons that can be completed by beginners in under 2 hours each, you will have the skills to build more complicated websites, complete with menus, navigations, subpages, article pages, integrations with Shopify, and more:
Learn how to use popular frontend frameworks like Tailwind and popular hosting platforms like Netlify to rapidly create and deploy sites. You'll also get practice creating and designing useful, practical forms, allowing for people to submit information or go through sign-up processes. You'll get practice integrating with other popular APIs as well, such as Google Fonts and AirTable.
PROJECT LAB: After just 3 lessons that can be completed by beginners in under 2 hours each, you will have the skills to build rich designs using pre-made design elements, forms that submit their contents, and complex websites that accept more complex user input:
Learn how to build re-usable web components and refactor your code to save time and rapidly develop more complex sites. You'll learn how to use Modulo.js to build layouts and individual components with re-usable bits of HTML and CSS. This last portion of the course will bring your understanding of frontend more up-to-date with the modern style of making websites, using the so-called JAM-Stack.
PROJECT LAB: After just 3 lessons that can be completed by beginners in under 2 hours each, you will have the skills to build web apps that have JavaScript-powered interactivity, with examples in data analytics, web publishing, and even how to create a web-based keyboard or synthesizer. The projects are somewhat more advanced than previous ones, and show the huge variety of new things you can build with your new skills:
- Activity 1 - Intro to HTML H1-tag
- Activity 2 - More HTML tags, p-tag, h1-H4-tag
- Activity 3 - Your first CSS (style tag, color, p selector, h1 selector)
- Activity 4 - Body and background (Using "body" selector, setting background colors)
- Activity 1 - More HTML tags: img (to absolute path), a (to absolute link)
- Activity 2 - Sizing - font-size, margin, padding
- Activity 3 - First Layout - Centered - Width and
margin: autoto make centered layouts - Activity 4 - Gradients and box shadows - Learn how to make box shadows and gradient backgrounds
- Activity 1 - Nested tags, indentation, tables, and lists
- Activity 2 - Relative paths (Linking local elements for multi-page layouts)
- Activity 3 - Sharing CSS between files, doctype (adding link tag, also introduces boilerplate)
- Activity 4 - HTML tag marathon: Semantic tags, div, and span
- Activity 1 - CSS Classes
- Activity 2 - Position flex: Show how to make things stack horizontally (simple layout system with .container { display: flex })
- Activity 3 - More CSS - Border, border radius
- Activity 4 - Media queries - Show how to make responsive design for mobile friendly (simple system that just turns off flex when it's mobile)
- Activity 1 - Fonts and CDNs (Learn font-family and how to use Google Fonts)
- Activity 2 - Intro to Tailwind
- Activity 3 - Tailwind Styles
- Activity 4 - Tailwind Layouts
- Activity 1 - HTML form tags
- Activity 2 - Tailwind styled forms
- Activity 3 - (Tooling) Launching with a web-host
- Activity 4 - (Tooling) Forms with Netlify
- Activity 1 - Hello Modulo World - Including Modulo and defining your first component (Template and Style)
- Activity 2 - Slots - How to add "slot" based placeholders
- Activity 3 - Props and variable templating - How to accept extra info and template values
- Activity 4 - Library files and x-Page layout - How to move your components to a library file
- Activity 1 - StaticData - How to import JSON, CSV, or text data into your component
- Activity 2 - Template for loop - How to repeat HTML for data in a CSV or JSON file
- Activity 3 - State and Bind - Forms that show their data
- Activity 4 - Fixing JS slowness - prebuilding Launching Modulo on Netlify or GitHub Pages (how to get it to prebuild)
Note: These are most likely to change. Also, may be ordered as 1.2 instead.
- Each design lab activity produces an image (that's in the preview)
- Activity 1 - PenPot Basics
- How to sign-up and/or download PenPot (or Figma)
- How to draw some simple shapes
- Don't worry about drawing designs, for Design Lab 1 it's just doodling
- Image: Students produce a simple little doodle (e.g. a landscape, with a blue square for sky and a green square for the horizon, a yellow circle for the sun, some green circles for hills or something, a free-form drawn river, something like that.)
- Activity 2 - PenPot Colors, Palettes, and Color Theory
- How to select different colors in PenPot
- The idea of mixing "primary colors" to make others (RGB and RGBA, maybe also briefly the subtractive primaries CMY / CMYK)
- The idea of "alpha" (transparency)
- Show how these generate hex codes
- Starting the style guide: As an on-going activity, students will be "building up" a style guide.
- Image: Students assemble a few color palettes, one that should be light on dark, and another that's and dark on light (this consists of a drawing that's basically squares with named colors, e.g. Canary Yellow)
- Activity 3 - PenPot export, file format exploration
- How to export as PNG or SVG
- How to export as HTML / CSS
- Talk about difference between popular image file formats (PNG, JPG, SVG), and how to turn on extensions on different file systems
- PNG: Show how PNG can have transparency and is lossless, no artifacts, but is often bigger. It's a good choice for anything except large photos.
- JPG: Show how JPG can't have transparency, and also is "lossy" and thus can have "artifacts" (mistakes during encoding), but is the most size efficient for large photographs.
- SVG: Show how SVG is crisp even when zoomed in, but is a "vector" format meaning it can only be exported from vector editors like PenPot since "remembers" the shapes and drawing (unlike "raster" formats JPG/PNG), and is actually rendered on the device, meaning more complicated SVGs risk being inconsistent accross devices, or in even slow to display.
- Image: Students work further on their "style guide", exporting in each format to see how it looks in different image viewers.
- Activity 4 - Single-file Netlify Launch
- How to sign-up for Netlify and upload single files
- Practice uploading images (e.g. their style guide)
- Practice uploading HTML files (e.g. the ones they made in 1.1)
- Image: Upload style guide, including SVG and PNG formats
- Activity 1 - PenPot Layouts
- Teach the concept of PenPot for web design
- Teach the concept of "Mock Up"
- Teach the concept of "Wireframe"
- Student produces a wireframe / mockup of a single-column design
- Activity 2 - Column-Based Layouts
- Show how you can now make multi-column layouts
- Show other alignments
- Student produces a wireframe / then mockup of a multi-column layout
- Activity 3 - Project file management
- Since projects are getting more complicated, start practicing file management and paths
- Show good practices of having a "work" or "projects" etc directory
- Activity 4 - Multi-File Netlify Launch
- Create fool-proof guides for launching entire directories with Netlify.
- If the drag n drop approach of Design Lab 1 is too hard, maybe using Git Kraken, or something else that's cross platform and graphical?
- Activity 1 - PenPot Palette and Typography
- Show how you can use Google Fonts
- Demonstrate sharing a palette
- Practice wireframe -> mockup
- Activity: Add to Style Guide typographic
- Activity 2 - PenPot Linking
- Show how to add interactivity to mockups
- Show how to share a preview mode
- Practice wireframe -> mockup
- Activity: Draw
- Activity 3 - Design Languages and Human Interface Guidelines
- Look at design languages
- Learn concept of design elements
- Examine Microsoft's Metro, Apple HIG, GNOME HIG, Google's Material design, etc.
- Practice identifying design elements
- Practice spotting HIG violations in interfaces
- Activity: Draw something in each design language
- Activity 4 - Design Trends
- History: Survey of trends in 90s, 00s, 10s, and now 20s
- Mention: early web, skeumorphism, metro and "flat" design, material design, new-skeumorphism, glassmorphism, "corporate memphis", "web neau brutalism"
- Actiaty:v
- Activity 1 - PenPot Components
- Show how to make components in PenPot
- Activity 2 - PenPot Anchoring
- Show how to do anchoring / size adjustable components
- Activity 3 - PenPot Component Libraries
- Show how to import or export libraries
- Activity 4 - Launching the JAMStack with Netlify
- Show how to configure Netlify to launch JAMStack powered apps