Welcome! In this course you will learn HTML and CSS, Photoshop basics, and principles of designing for the web. This website is your resource for assignments, due dates, and useful information.
Ms. AndersonSubmit a request to have NHS Advanced Web Design students build or maintain your site.
Submit A Request!
Global Learner Badge
Khan Academy videos + challenges: CSS Text Properties
iBuild: Flexbox Challenge
weBuild: Flexbox tutorial - together in class
Flexbox video tutorial- for review if needed
iBuild: Flexbox Challenge: Create a layout with two side-by-side divs each containing an image, as you did using floats, but this time use flexbox. Below the images place a div containing text. Link to Lorem Ipsum. The layout should be centered on the page.
Flexbox Playground
Flexbox Froggy Game
iBuild: Floats Challenge
weBuild: Floats
iBuild: Floats Challenge: Create a layout with two side-by-side divs each containing an image. Below the images place a div containing text. The layout should be centered on the page.
HTML Skeleton Quiz - Wednesday
HTML Worksheet
Khan Academy videos + challenges: More HTML Tags
Introduction to CSS worksheet
HTML Skeleton Quiz
Topics In-class:
1. HTML Worksheet
2. Introduction to the Box Model in CSS + Adding divs, id and class to HTML
3. CSS Worksheet
4. CSS Diner Game
Reset CSS
Introduction to CSS
Boilerplate Skeleton for HTML & CSS document
CSS Reference at w3schools.com
CSS Zen Garden
HTML to make your own Zen Garden Design
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Understanding the Structure of an HTML Document study guide for quiz
HTML Worksheet
Khan Academy videos + challenges of CSS Basics: selectors, color, id, class
HTML Skeleton Quiz
Work through assignments in class:
HTML Worksheet (W3schools as a resource), Introduction to CSS, Setting up file structure for NB website.
Reset CSS
Introduction to CSS
Boilerplate Skeleton for HTML & CSS document
CSS Reference at w3schools.com
CSS Zen Garden
HTML to make your own Zen Garden Design
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Chimera Project
Global Learner Badge
Khan Academy: Join class: 4CXVN432 and Complete Intro to HTML Challenges
HTML Markup Article + Image to include
1. Chimera Gallery Walk
2. Video: What Most Schools Don't Teach, Inspiration in Coding Reflection Questions: Why do you think people may be intimidated by coding? Why is coding worth learning? What are some other classes at Natick High related to computer science?
3. What is HTML? (A very brief overview of an html file, browser, and the internet.)What is a Web Browser? video
- Download Sublime Text from Managed Software Center (or use text edit: see Text Edit preferences set-up in Resources)
- Offline Challenge: Create an html skeleton in the text editor: Look at how the text editor and browser are used to create and preview html documents.
4. Introduction to HTML: Skeleton for HTML document, essential tags (paragraphs, headings, lists, emphasis, images. Khan Academy videos of HTML Basics and work through the Challenges
5. Small Group Activity: Understanding the Structure of an HTML Document study guide for quiz
Introduction Card
Homework: Welcome Letter + Bring a flash drive to class - Due Thursday 1/30 or Monday 2/3
1. Tool Demonstrations: layers, cut + paste, transform, lassos
2. Time to explore some photoshop tools on your own: Photoshop Tool Galleries
3. Chimera Project
4. Saving your project for submission: Understanding image size and resolution
5. Join Google Classroom - to be used for submitting digital work
Scholastic Copyright Guidelines
Remixed Artwork Attribution Guidelines
Pexels: A Free Stock Photo Library
Creative Commons Images
Photoshop Tool Galleries
Photoshop Basic Tools Tutorial
Photoshop Interface (very basics)
Videos to Inspire
Creative Commons Video
Photoshop Preview
Next Revolution in Beauty, A-dobe Fotoshop (social criticism)
Photoshop Games!
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
Welcome to the course syllabus! Assignments to be submitted each week are indicated with the symbol. Classtime is provided for most assignments, however any unfinished work must be completed as homework at the end of each week, and are due the following class.
Introduction Card
Exploring the digital classroom-
HTML pre-assessment- complete in class
File Structure pre-assessment - complete in class
Informed Consent Letter for Online Resources
Keywords/Units & Seating: students take a random card with a keyword from the course - seats are assigned by keyword groups
Logging in to your computer: Login with period#, no password
Next week: Welcome letter + Bring a flash drive to class
Introductions: Turn Around and Meet My Friend
Exploring the digital classroom- Teacher will print handout for group activity
Pre-Assessments: Not graded, checking prior knowledge (no experience required)
Looking Ahead: Photoshop Preview Video
Photoshop Tool Demonstrations: layers, cut + paste, transform, lassos
Handbook
Fire Escape Plan from room 201
Creative Commons Search
Pexels: A CC-Zero Image Library
Student Website Examples
Here is to the Crazy Ones
Smart is Sexy
Why I Create, by: Adobe
Photoshop Preview
Using Standard District Template
Unit 1: Photoshop
Unit 2: Design Principles
Unit 3: HTML
Unit 4: CSS
Unit 5: Project Management
Unit 6: Dreamweaver | Project Website
Archived syllabus: Spring 2017
Archived syllabus: Fall 2017
Archived syllabus: Spring 2018
Projects by Introduction to Web Design Students.
See my schedule for after-school hours and free periods.
