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

Styling links

Contents

  • 9.4.1. Button samples from previous semesters
  • 9.4.2. Helpful links for buttons
  • 9.4.3. Extra reading for more in-depth info

9.4. Styling links#

9.4.1. Button samples from previous semesters#

  • Winter 2022 buttons

  • Fall 2021 buttons

  • Winter 2021 buttons

  • Fall 2020 buttons

  • Winter 2020 web buttons

9.4.2. Helpful links for buttons#

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

  • Smart gradient generator - generates gradients without gray zones

  • Neumorphism generator

  • Button Buddy - check that your button contract is accessible

9.4.3. Extra reading for more in-depth info#

CSS Trick’s Styling Links Like a Boss Smashing Magazine’s Everything You Need To Know About CSS Margins - pay particular attention to the “Margin Collapsing” section a tl;dr of margin collapse: avoid using both top and bottom margins

previous

9.3. CSS specificity

next

9.5. CSS positioning
Contents
  • 9.4.1. Button samples from previous semesters
  • 9.4.2. Helpful links for buttons
  • 9.4.3. Extra reading for more in-depth info

By Lara Burton

© Copyright 2023.