Topics

Learn to develop fantastic websites by following the program—split into sections for easier learning and understanding.

The Web

  1. The Open Web
  2. Web browsers
  3. Using URLs
  4. Domains & DNS
  5. History of the Web
  6. Security

Set up

  1. Computer shortcuts
  2. Keyboard shortcut cheat sheet
  3. Code editors
  4. Snippets cheat sheet
  5. Code character cheat sheet
  6. Version control & GitHub
  7. Commit message cheat sheet
  8. GitHub Issues
  9. Naming conventions
  10. Using paths & folders
  11. Naming & paths cheat sheet
  12. Troubleshooting checklist

Content

  1. Writing for the Web
  2. Writing checklist
  3. Information architecture
  4. HTML semantics
  5. HTML indentation
  6. HTML semantics cheat sheet
  7. HTML semantics checklist
  8. Marking up a webpage
  9. Tables
  10. Tables cheat sheet
  11. Search engine optimization
  12. Metadata & enhanced semantics
  13. Analytics & monitoring
  14. SEO cheat sheet
  15. SEO checklist
  16. Video & audio
  17. Forms
  18. Forms cheat sheet

Access-ibility

  1. Accessibility
  2. Content accessibility
  3. Accessibility for design
  4. Accessibility cheat sheet
  5. Accessibility checklist
  6. Accessibility testing checklist
  7. Accessibility of animations & effects
  8. Screen reader cheat sheet

Type

  1. Using CSS
  2. CSS indentation
  3. CSS selectors & units cheat sheet
  4. Basic typography
  5. Using Google Fonts
  6. Web typography cheat sheet
  7. Web typography checklist
  8. Typography-only layout
  9. Browser developer tools
  10. Validators

Layout

  1. Everything is a box
  2. Boxes & borders cheat sheet
  3. CSS layout models
  4. Flow & display
  5. Float & clear
  6. Flexbox
  7. Flexbox cheat sheet
  8. Position & z-index
  9. CSS grids
  10. CSS grid cheat sheet
  11. CSS layout cheat sheet
  12. Navigation
  13. Before & after pseudo elements
  14. Advanced CSS-only interactions
  15. Homepage checklist

Images

  1. Website file organization
  2. Images for the web
  3. Using images
  4. Responsive & retina images
  5. Images cheat sheet
  6. CSS animations & effects
  7. CSS animations & effects cheat sheet
  8. Advanced SVG
  9. SVG cheat sheet
  10. Performance
  11. Performance checklist
  12. Advanced performance
  13. Advanced performance checklist
  14. From wireframe to website

Many screens

  1. Small screen layout
  2. All devices setup
  3. Media queries
  4. Screen sizes cheat sheet
  5. Media queries layout
  6. Browser testing
  7. Browser testing checklist
  8. Progressive enhancement

Libraries

  1. Flexbox grids
  2. Gridifer »
  3. Gridifier cheat sheet
  4. Modular typography
  5. Typografier »
  6. Typografier cheat sheet
  7. Interactive wireframes
  8. Modules
  9. Modulifier »
  10. Modulifier cheat sheet
  11. Modular website layout

Design systems

  1. Pattern library timeline
  2. Project UX checklist
  3. CSS variables
  4. Jekyll
  5. Jekyll installation
  6. Jekyll terminal guide
  7. Jekyll cheat sheet
  8. Pattern libraries
  9. Pattern library cheat sheet
  10. Markdown
  11. YAML
  12. Markdown & YAML cheat sheet
  13. Writing a readme
  14. GitHub repository setup for teams
  15. Branching & GitHub Flow

Teams

  1. Agile development process
  2. Sprint checklist
  3. Better team communication
  4. Using GitHub for project management
  5. Branching flowchart
  6. Updating from master flowchart
  7. Usability testing checklist
  8. Interactive prototype checklist

JS

  1. JavaScript history
  2. JavaScript syntax
  3. Document object model (DOM)
  4. JavaScript debugging
  5. JavaScript cheat sheet
  6. JavaScript checklist
  7. Common JavaScript + jQuery components
  8. JavaScript + jQuery effects
  9. JavaScript, jQuery & accessibility
  10. JavaScript templates
  11. AJAX
  12. Responsive animated dashboard

What’s next?

  1. Portfolio timeline
  2. Launch checklist
  3. 404 pages
  4. Licenses & copyright
  5. Learning resources
  6. Blogs, companies & people
  7. Staying up to date
  8. Email newsletters
  9. Efficiency tools
  10. CSS preprocessors