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

  • 4.5.1. Favicon
  • 4.5.2. Technologies
  • 4.5.3. More info

4.5. Useful links#

4.5.1. Favicon#

  • Icon Converter

  • Free Favicons

  • Favicon Generator

4.5.2. Technologies#

  • Emmet - makes writing HTML and CSS faster by allowing you to type shortcuts that are expanded into code

  • Git - popular version control software; used to track and manage changes to code

  • Github - a cloud-based service to store and share code

  • Github pages - a free hosting service for static websites

  • Github basic writing and formatting syntax - markdown for formatting README files on Github

  • validator.nu - site that validates HTML

4.5.3. More info#

  • Understanding HTML

  • Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?

previous

4.4. HTML Style Guide

next

4.6. First web page assignment
Contents
  • 4.5.1. Favicon
  • 4.5.2. Technologies
  • 4.5.3. More info

By Lara Burton

© Copyright 2023.