Create a Static Student Website

Build a simple personal website from scratch, writing every line of code by hand, from scratch.

This is a beginner-level set of lessons, with a focus on the essential basics of front-end web development. It does not cover any advanced concepts or technologies. Through a combination of brief overview lessons and hands-on activities, students will learn about core underlying web technologies and some best practices for front-end web development. Students go through the development process of coding a website from scratch. To succeed, students are encouraged to think critically and objectively about the underlying technologies of the web and to be open to various different factors and considerations that differentiate the medium of the web from other design media. Students will gain hands-on web design and development experience by designing and coding a simple, static web page writing each and every line of HTML and CSS by hand.

Course Outcomes

Upon completion, students should be able to:

• Understand the basics of how the web works and the underlying core front-end web technologies used for web design and development.
• Apply best practices for user-centered web design by embracing web standards.
• Communicate project-related goals and deliverables in a clear, concise, and organized manner.
• Synthesize the basic concepts and principles of graphic design, web design, and web development through the creation of a custom website.

Course Content

Further Reading & Learning Resources

Pre-approved Websites

During breaks and downtime, the following websites are pre-approved for students to visit:

• CreativeMedia.space (CMS) Resources
  • Specific CMS lessons to check out:
    • HTML Basics: Elements & Syntax
    • CSS Basics: Selectors and Syntax
    • The Web Design and Development Process
    • Web Design Terminology: A Primer
    • Intro to Front-end Web Development
    • The Box Model
    • Intro to Git using Github
  • Specific CMS exercises to check out:
    • Code a Simple HTML Web Page
    • Code a Simple Web Page with CSS

• W3schools.com
  • W3Schools HTML Tutorial
  • HTML Tag List
  • CSS Tutorial
  • CSS Selectors
  • JS Tutorial

• Codepen.io
  • Instructor’s pens (kccnma)
  • Specific pens to check out:
    • Intro to HTML Exercise – Test without Markup
    • Normal Flow: Block and Inline level elements
    • Exercise: Simple Horizontal Centering
    • Exercise: Simple Horizontal and Vertical Centering with Flexbox
    • Box Model and Box Sizing
    • Base Typography with a Traditional Typographic Scale
    • Intro to Divs (Div Test) Exercise
    • CSS Positioning Test: Inline-Blocks
    • Simple HTML web page with base CSS
    • Simple Header
    • Custom Numbered List: Circled Numbers
    • Custom Numbered List: Stacked Oversized Numbers
    • Layout Example: Media/Post Objects List – CSS Grid w/ Flexbox Fallback

• Sololearn (website & mobile app)
  • Specific courses to check out:
    • HTML fundamentals
    • CSS fundamentals
    • JS Tutorial

• Web Standards (Wikipedia definition)
• W3C (World Wide Web Consortium).
• HTML.com
• Digital.com’s HTML Cheat Sheet
• Adam Marsden’s CSS Cheat Sheet

• Awwwards.com
• One Page Love
• Art of the Menu

• Instructor’s teaching web site

• Books to check out:
  • Steve Krug’s Don’t Make Me Think
  • John Duckett’s HTML & CSS

Design & Code Related Games

• Kern Type (a typography kerning game)
• Shape Type (a typography letter shaping game)
• The Beziér Game (a pen tool game)
• Pixact.ly (a pixel size guessing game)
• CSS Diner (a CSS learning game)
• Flexbox Froggy (a flexbox learning game)
• Flexbox Defense (a flexbox learning game)
• RGB Challenge (a color guessing game)
• I Shot the Serif (a typography game)
• Code Combat
• Rag Time
• Type War
• iFont Game
• Font Game
• Hex Invaders