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 miss sessions, please use this link to access LinkedIn Learning (formerly known as Lynda) course videos on HTML, CSS, JS. This may help supplement your learning:
Access LinkedIn Learning Playlist
*Here is a direct gitlab link to code we will use during the workshop: Code for Her Gitlab Repository
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)
- File paths
- Linking more than one page
- Tables and Forms and lists
- Finishing media
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
- Start Grand Canyon – tables, lists, link pages
Finish Grand Canyon (week 5)
- more css
- finish more Grand Canyon
- Complete Mid-Surveys at Top with links
- CSS Color codes (HEX, RGB, name), color contrast
- review CSS selectors, IDs, properties
Accessibility and Ethics (week 6)
- HOMEWORK: debugging exercise (instructions sent after Zoom Session)
- discuss accessibility on websites / show examples
- Accessibility – WAVE tool
- Ethical Web
- Nav Menu
- HTML5 from Scratch
- Khan Academy Animations
- Animation Examples
Slides: Slide deck
JavaScript (week 7)
- JS Disable Browser Exercise
- JS Hello World – comments, alert box, var, function
- debugging exercise answers
- Project Brainstorm
- give hosting options
- Event listener, DOM, buttons, conditionals
Slides for Personal PSU: Click Here
Slides: Week 7 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