A Short Three Week Intro to Web Design
This is the home page for a beginner-level course designed for upper school students at `Iolani School interested in learning the basics of web design and development in a studio-based learning environment. Through a combination of lessons and hands-on activities, students will learn about underlying core web technologies and best practices for web design and development. Students will go through the creative design process of drafting, designing, and developing websites from scratch.
The Theme for 2021: E-Commerce Websites
Depending upon the current course and year, the primary theme for the main projects may change. For example, in 2019 the theme was “Summer Favorites” and students created websites documenting their summer favorites (e.g. music, movies, books, etc). This year’s theme is eCommerce. Think online stores and shopping websites. Think custom merch! Get ready to create your own custom-designed fictional products and merchandise to sell on your very own custom-designed fictional online store websites. NOTE: student websites will not be functioning eCommerce websites (there will be no functionality to accept credit card payments). Instead, students will dive into the world of user experience design and user interface design for online stores by designing custom interactive eCommerce website prototypes.
Two Main Projects:
- A Personal Store Website
- with fictional custom-designed personal products/merch
- `Iolani Collaborative Team Store Website
- with a collection of team-produced fictional custom-designed `Iolani products/merch
Links to Projects:
- Instructor-provided Google Site examples:
Student Sites
Have Fun!
Pre-approved Websites
During breaks and downtime, the following websites are pre-approved for students to visit:
- Fun Web-based Design Games
- Design/Typography-related:
- Web Design/Development-related:
- CreativeMedia.space (CMS) Resources
- Specific CMS lessons to check out:
- Specific CMS exercises to check out:
- 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:
- Web Standards (Wikipedia definition)
- W3C (World Wide Web Consortium).
- HTML.com
- Digital.com’s HTML Cheat Sheet
- Adam Marsden’s CSS Cheat Sheet
- For Web Design Visual Inspiration:
- Instructor’s teaching web site
- Specific NMA courses to check out:
- 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)
Be thoughtful, creative, safe, & kind.
Course Rules & Project-related Principles & Policies
To protect student identities, students are not permitted to use their real names on their websites. Students can not include photos of themselves nor their friends. All content must adhere to the standards of digital citizenship expected of all `Iolani students and in accordance with the student conduct code. All email accounts, usernames, and passwords provided by the instructor will be deleted or changed after the course is complete.
- For all team projects:
- All styling should be consistent and representative of the `Iolani brand, e.g. `Iolani Colors only (e.g. Black and Red)
- For all individual Google Sites & custom personal products
- The styling is up to you, so have fun!
- For all websites and products
- Try to create 100% custom designs and/or use copyright/royalty-free imagery (e.g. stock photography & found illustrations)
- Exception: modified mockups are OK
- Adhere to the privacy policy
- No Names of People (e.g. your friends, students)
- No Photos of People (e.g. your friends, students)
- Try to create 100% custom designs and/or use copyright/royalty-free imagery (e.g. stock photography & found illustrations)