Web Design for All Ages

An introduction-level web design and development course designed for students of all ages with no experience in design or coding.

This is a beginner-level course with a focus on the essential basics of web design and development. It does not cover any advanced web design concepts or web development technologies. Through a combination of brief overview lessons and hands-on activities, students students will learn about core underlying web technologies and best practices for web design and development. Students will go through the creative design process of drafting, designing, and developing a custom personal website from scratch. To succeed in this course, students are encouraged to think creatively and be willing to work on a series of different visual exercises, such as sketching with a pencil and paper, designing interfaces digitally with design software, 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 the how the web works and the underlying core technologies used for web design and development.
• Apply best practices for user centered web design by embracing web standards and an iterative creative design process.
• Communicate project-related goals and deliverables in a clear, concise, and organized manner.
• Synthesize the basic concepts and principles of web design and 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
  • Specific NMA courses to check out:
    • ART 128 Interface Programming 1
    • ART 229 Interface Design 1

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

• Shared Photos (photos shot with the Canon 5D and GoPro)
  • Our Shared Google Photos Album

Pre-Approved Sites for Fun Fridays

• 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