Skip to content

Course: just learn to code

Course Summary: 

This course introduces the core skills needed to build a functional and stylish website. Learn how to construct web pages using HTML, style them with CSS, add interactivity with JavaScript, implement best practices related to responsive design and accessibility, and track changes with Git version control.

Instruction: 

  • Reading instructional texts and following online tutorials
  • Completing the Responsive Web Design Certification and JavaScript Certification courses from FreeCodeCamp
  • Mini-projects and final project

Core Units: 

  1. HTML: Learn the structure of web pages and semantic markup.
  2. CSS: Learn how to style content and create layouts.
  3. JavaScript: Add interactivity.
  4. Advanced Front-End Development: Implement responsive design and accessibility principles. Learn Git and GitHub for version control.

Course Learning Goals:

  • Understand semantic HTML and page structure
  • Learn different CSS frameworks for style and layouts
  • Explore interactive JavaScript web elements
  • Understand the principles behind responsive and accessible websites
  • Use Git and GitHub for version control

Ongoing Activities: 

  • Iterate on a personal Neocities site
  • Complete all of the FreeCodeCamp lessons
  • Keep a journal with key concepts and findings

Final Project: 

Design a complete personal Neocities site inspired by early web 1.0 design that incorporates modern usability standards in responsiveness and accessibility.

Weekly Plan: 

  • 10 hours per week
    • 5 hours studying
    • 5 hours building

Unit 1: HTML

Unit 1 Summary: 

Learn how to create web pages using semantic markup and understand how different HTML elements organize content.

Unit 1 Learning Goals: 

  • Understand HTML document and semantic structure
  • Recognize common HTML tags
  • Be comfortable using a code editor
  • Have all major personal site pages structurally complete

Unit 1 Activities: 

  • Organize files in folders
  • Build content for: 
    • index.html – home
    • about.html – about me
    • fieldnotes.html – blog homepage
    • binder.html – studies, syllabi
      • theory.html
      • writing.html
      • pjm.html
      • coding.html
    • desk.html – resources, favorites, links
  • Interlink pages

Unit 1 Materials: 

  • HTML, CSS, & JavaScript for Dummies (HTML chapters)
  • HTML and CSS – Jon Duckett (HTML chapters)
  • FreeCodeCamp – Responsive Web Design Certification (HTML course)
  • LinkedIn Learning: Advance Your Skills in HTML learning path

Unit 2: CSS

Unit 2 Summary: 

Develop a personal style and learn how to create dynamic layouts with CSS.

Unit 2 Learning Goals:

  • Recognize common CSS tags
  • Understand Flexbox and Grid layouts

Unit 2 Activities: 

  • Develop a visual theme for the final website
  • Build out additional pages
    • filing-cabinet.html – all my current and finished projects
    • bookshelf.html – my reading lists (TBR and completed)
    • bulletin-board.html – links to neighbors, webrings, and the (eventual) guestbook

Unit 2 Materials: 

  • HTML, CSS, & JavaScript for Dummies (CSS chapters)
  • HTML and CSS – Jon Duckett (CSS chapters)
  • FreeCodeCamp – Responsive Web Design Certification (CSS course)
  • LinkedIn Learning: Learn CSS learning path

Unit 3: JavaScript

Unit 3 Summary: 

Learn the fundamentals of programming in JavaScript to manipulate webpage content and add interactivity to pages.

Unit 3 Learning Goals: 

  • Understand variables, functions, conditionals, and events
  • Add simple interactive features to the personal site
  • Debug and troubleshoot basic JavaScript code

Unit 3 Activities: 

  • Create dark mode toggle
  • Create show/hide sections toggle for blog
  • Create guestbook for bulletin board page

Unit 3 Materials: 

  • HTML, CSS, & JavaScript for Dummies (JavaScript chapters)
  • FreeCodeCamp – Javascript Certification course
  • LinkedIn Learning: JavaScript Foundations learning path

Unit 4: Advanced Front-End Design

Unit 4 Summary: 

Learn how to implement responsive design, improve accessibility, enhance usability and interactivity, and manage code in Git and GitHub.

Unit 4 Learning Goals: 

  • Understand responsive design techniques
  • Understand accessibility guidelines and principles
  • Learn Git and GitHub for version control
  • Launch a fully-functioning site with all desired designs and features

Unit 4 Activities: 

  • Create RSS feed for blog
  • Develop responsive design and test on multiple device sizes
  • Review site for accessibility improvements
  • Create GitHub repository for final project

Unit 4 Materials: 

  • LinkedIn Learning courses: 
    • Git Essential Training
    • Using Git with Visual Studio Code
    • Learning Git and GitHub
    • Complete Guide to Git

Course note from Opal

This is the syllabus I’m using to learn how to make this site! Snapshots and notes will be included in Field Notes updates and the Marginalia page.