By the end of Code for Her, you should be able to:
- identify the difference between HTML, CSS, and JavaScript and what they are used for
- identify resources to help you code in the web
- know the structure of a webpage
- know how to write a basic HTML file
- know how to use CSS to help you design your webpages
- know the very beginnings of JavaScript
General syllabus for the course, subject to change. Please click tabs below to view corresponding materials for the week:
For those of you who have missed sessions, please use this link to access Lynda course videos on HTML, CSS, JS. This may help supplement your learning:
Access Lynda for Videos on Web Development
HTML (Week 1)
- Beginning Survey, Code For Her Initial Remarks, Introductions
- Introduction to HTML5 and Web Design
- p, a, em, br, img, title, h1 headings
- How to Format Your Text
- Bio Activity
- Hello World
Slides: Week 1 Here
HTML and CSS (Week 2)
- HTML5 structure (section, article, aside)
- Media (audio, video, img)
- Inspect Element, View Page Source, Box Model
- File Directory and Paths
- HOMEWORK: apply for webspace
Slides: Week 2 Here
HTML and CSS (Week 3)
- Start Grand Canyon Page
- Linking more than one page
- Tables and Forms and lists
- CSS styling
- Project Brainstorming Session
Slides: Week 3 Here
File Path Activity: Sara’s Activity
HTML and CSS (Week 4)
- CSS structure, ways it is implemented
- Discuss CSS (text colors, background colors, img background, ids, classes, font family, weight and size, a:hover
- Finish 2nd half of Grand Canyon page
CSS and Accessibility and Ethics (week 5)
- debugging exercise
- finish more Grand Canyon if needed
- discuss accessibility on websites / show examples
- CSS Color codes (HEX, RGB, name), color contrast
- Accessibility – WAVE tool
- Ethical Web
- Nav Menu
- HTML5 from Scratch
- Khan Academy Animations
- Animation Examples
Slides: Slide deck
JavaScript/CSS animations and Project Samples (week 6)
- JS Disable Browser Exercise
- JS Hello World – comments, alert box, var, function
- Project Brainstorm – show past projects?
- give hosting options
- HOMEWORK: upload an HTML file
Slides: Week 6 Here
JavaScript (week 7)
- Project Time (hr)
- Event listener, DOM, buttons, conditionals
- Survey Feedback
- Activity: type animation
Slides for Personal PSU: Click Here
Final Project Day, Survey Feedback, Last Remarks (week 9)
- Project Time
- Zip file
- Hand in Project
- Survey Feedback
- Last Remarks and Resources
1 week = 2 hours of classwork