Skip to main content
Ctrl+K
Logo image
  • Welcome to Introduction to Web Development

Part I - Getting started

  • 1. Software and accounts
    • 1.1. Required software
    • 1.2. Configure VS Code
    • 1.3. Create a Codepen Account
    • 1.4. Create a Github account
    • 1.5. Understand Git and GitHub basics
    • 1.6. Choose an image editor
  • 2. How the internet works
    • 2.1. Introductory videos
    • 2.2. Browser market share charts
    • 2.3. Learn more
  • 3. Style guides
    • 3.1. Color on the web
    • 3.2. Designing for accessibility
    • 3.3. Useful links
    • 3.4. Style guide assignment

Part II - HTML

  • 4. HTML basics
    • 4.1. HTML template
    • 4.2. Configuring HTML <head>
    • 4.3. Validating HTML
    • 4.4. HTML Style Guide
    • 4.5. Useful links
    • 4.6. First web page assignment
  • 5. Semantic HTML
    • 5.2. Semantic HTML assignment
  • 6. Accessibility basics
  • 7. Links and basic images
    • 7.2. Resources for images
  • 8. Responsive images and SVG
    • 8.1. Create a simple SVG learning task
    • 8.2. Responsive images and SVG assignment

Part III - CSS basics

  • 9. CSS basics
    • 9.3. CSS specificity
    • 9.4. Styling links
    • 9.5. CSS positioning
    • 9.6. CSS topic presentation learning task
    • 9.7. Whitespace and font size observations learning task
    • 9.8. Web button learning task
    • 9.9. Web card learning task
    • 9.10. CSS fonts and a button assignment

Part IV - Animation

  • 10. Animation

Part V - CSS layouts

  • 11. CSS layouts
  • 12. Overlays and cards assignment

Appendix

  • 13. Useful links
  • 14. Glossary
  • 15. Index
  • Repository
  • Open issue
  • .md

Useful links

Contents

  • Color
  • Design

3.3. Useful links#

Color#

  • Flat UI Colors - when you just need some colors

  • Smart Swatch Generator - a quick way to generate highlight colors for hover effects

  • Color Palette Generator from image - pull a color palette out of an image

  • UI gradient Generator - a “smart” generator that avoids the dead grey zone produced in many standard gradients

Design#

  • Figma - online layout design - limited free version available

  • Media Queries - for responsive design inspiration

  • CSS Zen Garden - dated, but a good demo of the impact of CSS on plain HTML

  • siteInspire - web design showcase

  • Land-book - a web design gallery

  • Adobe’s Flat vs. Material vs. Skeuomorphic Design Examples

  • Dribbble - design ideas

previous

3.2. Designing for accessibility

next

3.4. Style guide assignment

Contents
  • Color
  • Design

By Lara Burton

© Copyright 2023.