Activity | Points |
---|---|
The Internet | |
1.1 Welcome to the Internet | |
1.1.1 Welcome to the Internet | 1 |
1.1.2 Welcome to the Internet Quiz | 5 |
1.1.3 Reflection: The Internet and You | 5 |
1.1.4 An Internet Timeline | 5 |
1.2 Viewing Websites | |
1.2.1 Viewing Websites | 1 |
1.2.2 Viewing Websites Quiz | 5 |
1.2.3 Free Response: Explaining a URL | 5 |
1.2.4 Viewing Websites In Different Browsers | 5 |
1.2.5 Reflection: Using Different Browsers | 5 |
1.3 Digital Footprint and Reputation | |
1.3.1 Digital Footprint and Reputation | 1 |
1.3.2 Digital Footprint and Reputation | 5 |
1.3.3 Social Media Clean-up | 1 |
1.3.4 Building a Positive Digital Footprint | 5 |
1.3.5 Right to be Forgotten? | 1 |
1.3.6 Right to be Forgotten | 5 |
1.3.7 What is your Digital Footprint? | 5 |
1.4 Ethics and Legal Considerations | |
1.4.1 Legal, Ethics, and Bias in Computing | 5 |
1.4.2 Which Laws? | 5 |
1.4.3 Self-driving Cars | 1 |
1.4.4 Self-driving Cars | 5 |
1.4.5 Negative Consequences | 5 |
1.5 Cybersecurity | |
1.5.1 Cybersecurity | 1 |
1.5.2 Cybersecurity Quiz | 5 |
1.5.3 You Can Be Tracked! | 1 |
1.5.4 Password Strength | 1 |
1.5.5 Reflection: Password Strength | 5 |
1.5.6 Phishing Simulator | 1 |
1.5.7 Rogue Access Points | 1 |
1.5.8 Phishing for Your Info | 1 |
1.5.9 Phishing Reflection | 5 |
1.6 Computer Science Careers | |
1.6.1 Computer Science All Around Us | 1 |
1.6.2 Computer Science All Around Us | 5 |
1.6.3 CS Careers | 1 |
1.6.4 CS Career Response | 5 |
1.6.5 Coding in the Wild | 1 |
1.6.6 Coding in the Wild Response | 5 |
1.6.7 Inclusive Coding | 1 |
1.6.8 Inclusive Coding Response | 5 |
1.6.9 Career Research | 5 |
1.6.10 Career & Technical Student Organizations (CTSO) | 5 |
1.6.11 Refection: CTSOs | 5 |
HTML - Structuring Websites | |
2.1 Introduction to HTML | |
2.1.1 Introduction to HTML | 1 |
2.1.2 Introduction to HTML Quiz | 5 |
2.1.3 Our First HTML Page | 1 |
2.1.4 Say Hello! | 5 |
2.2 Structure of an HTML Page | |
2.2.1 Structure of an HTML Page | 1 |
2.2.2 Structure of an HTML Page Quiz | 5 |
2.2.3 HTML Template | 1 |
2.2.4 Hello World Page | 1 |
2.2.5 Using Comments | 5 |
2.2.6 The <title> Tag | 5 |
2.2.7 Your First HTML Page | 5 |
2.3 Formatting Text | |
2.3.1 Formatting Text | 1 |
2.3.2 Formatting Text Quiz | 5 |
2.3.3 Dictionary | 1 |
2.3.4 Using Special Characters | 5 |
2.3.5 Word Definitions | 5 |
2.3.6 Pet Names | 5 |
2.3.7 Call of the Wild | 5 |
2.3.8 Formatting Badge | 1 |
2.4 Links | |
2.4.1 Links | 1 |
2.4.2 Links Quiz | 5 |
2.4.3 The <a> Tag | 1 |
2.4.4 Bookmarks | 5 |
2.4.5 Encyclopedias | 5 |
2.5 Images | |
2.5.1 Images | 1 |
2.5.2 Images Quiz | 5 |
2.5.3 The <img> Tag | 1 |
2.5.4 Collage on a Theme | 5 |
2.5.5 Linking an Image | 5 |
2.5.6 National Parks | 5 |
2.6 Copyright | |
2.6.1 Copyright | 1 |
2.6.2 Copyright Quiz | 5 |
2.6.3 Citing Sources Example | 1 |
2.6.4 Exploring Creative Commons | 1 |
2.6.5 Response: Creative Commons | 5 |
2.6.6 Finding Images | 5 |
2.6.7 Make a Collage | 5 |
2.6.8 Why Copyright is Important | 5 |
2.7 HTML Lists | |
2.7.1 HTML Lists | 1 |
2.7.2 HTML Lists Quiz | 5 |
2.7.3 Grocery Shopping | 1 |
2.7.4 Class Planning | 5 |
2.7.5 Dream Destinations | 5 |
2.7.6 Vacation Guides | 5 |
2.8 HTML Tables | |
2.8.1 HTML Tables | 1 |
2.8.2 HTML Tables Quiz | 5 |
2.8.3 Address Book | 1 |
2.8.4 National Sports | 5 |
2.8.5 Table of Favorites | 5 |
2.9 HTML Styling | |
2.9.1 HTML Styling | 1 |
2.9.2 HTML Styling Quiz | 5 |
2.9.3 Stylish Address Book | 1 |
2.9.4 Background Colors | 5 |
2.9.5 Style Your Class List | 5 |
2.9.6 Styling Badge | 1 |
2.10 HTML Colors | |
2.10.1 HTML Colors | 1 |
2.10.2 HTML Colors Quiz | 5 |
2.10.3 HTML Colors Examples | 1 |
2.10.4 Create Your Own Color | 5 |
2.10.5 Gradients | 5 |
2.10.6 Color Wheel | 1 |
2.10.7 Using Good Colors | 5 |
2.11 HTML - Structuring Websites Quiz | |
2.11.1 HTML - Structuring Websites Quiz | 10 |
2.11.2 HTML Badge | 1 |
CSS - Styling Websites | |
3.1 Introduction to CSS | |
3.1.1 Introduction to CSS | 1 |
3.1.2 Introduction to CSS Quiz | 5 |
3.1.3 Styling your H1s | 1 |
3.1.4 First style with CSS | 5 |
3.1.5 List Styling | 5 |
3.1.6 Endangered Animals: Skeleton | 5 |
3.2 CSS Select by Tag | |
3.2.1 CSS Select by Tag | 1 |
3.2.2 CSS Select by Tag Quiz | 5 |
3.2.3 Rainbow | 1 |
3.2.4 Puppy Styling | 1 |
3.2.5 Set List | 5 |
3.2.6 Your Appliance Recommendations | 5 |
3.2.7 Endangered Animals: Style the Headers | 5 |
3.3 CSS Select by Class | |
3.3.1 CSS Select by Class | 1 |
3.3.2 CSS Select by Class Quiz | 5 |
3.3.3 Simple Checkerboard | 1 |
3.3.4 Swim Meet | 5 |
3.3.5 Favorite Things | 5 |
3.3.6 Endangered Animals: Add Color Coding | 5 |
3.4 CSS Select by ID | |
3.4.1 CSS Select by ID | 1 |
3.4.2 CSS Select by ID Quiz | 5 |
3.4.3 Logo | 1 |
3.4.4 Must Do Today! | 5 |
3.4.5 Lomeli's Menu | 5 |
3.4.6 Endangered Animals: Add Pictures | 5 |
3.4.7 Selector Badge | 1 |
3.5 The Cascade | |
3.5.1 The Cascade | 1 |
3.5.2 The Cascade Quiz | 5 |
3.5.3 Using Importance | 1 |
3.5.4 Order of Precedence | 1 |
3.5.5 We Really Like Dairy | 5 |
3.5.6 Style the Table | 5 |
3.6 Multi-file Websites | |
3.6.1 Splitting Your Site Into Files | 5 |
3.6.2 Splitting Your Site Into Files Quiz | 5 |
3.6.3 Multipage Site Examples | 5 |
3.6.4 Absolute versus Relative Links | 5 |
3.6.5 Add a Style Sheet | 5 |
3.6.6 Dividing the Site | 5 |
3.6.7 Career Site: Creating Structure | 5 |
3.7 What is Web Optimization? | |
3.7.1 What is Web Optimization? | 5 |
3.7.2 What is Web Optimization? | 5 |
3.7.3 Website Folder Structure | 5 |
3.7.4 File Conventions | 5 |
3.7.5 Folders and Files | 5 |
3.8 CSS - Styling Websites Quiz | |
3.8.1 Optimizing Web Information | 5 |
3.8.2 Optimizing Web Information | 5 |
3.8.3 How Search Works | 5 |
3.8.4 How Search Works | 5 |
3.8.5 What is Search Engine Optimization (SEO)? | 5 |
3.8.6 SEO Definition | 5 |
3.8.7 Ethical Search Optimization | 5 |
3.8.8 Ethical Search Optimization | 5 |
3.8.9 Yoast Analyzer | 5 |
3.8.10 Yoast Tool Activity | 5 |
3.8.11 CSS - Styling Websites Quiz | 10 |
3.8.12 CSS Badge | 1 |
Advanced HTML and CSS | |
4.1 Getting Started - Advanced HTML and CSS | |
4.1.1 Getting Started | 1 |
4.1.2 Example: Image Filters | 1 |
4.1.3 Example: Animations | 1 |
4.1.4 Example: Interactions | 1 |
4.2 Embedding iframes | |
4.2.1 Embedding iframes | 1 |
4.2.2 Embedding IFrames Quiz | 2 |
4.2.3 Embedding CodeHS | 1 |
4.2.4 Embedding a Website | 5 |
4.2.5 Embed a Tweet | 5 |
4.2.6 Embed a Video | 5 |
4.2.7 Career Site: Include Outside Information | 5 |
4.3 Divs | |
4.3.1 Divs | 1 |
4.3.2 Divs Quiz | 2 |
4.3.3 Divvying up the Site | 1 |
4.3.4 Quotes | 5 |
4.3.5 Flags | 5 |
4.3.6 Career Site: Separate the Content | 5 |
4.3.7 Div Badge | 1 |
4.4 Spans | |
4.4.1 Spans | 1 |
4.4.2 Spans Quiz | 1 |
4.4.3 Span Formatting | 1 |
4.4.4 Vocabulary | 5 |
4.4.5 Text Decoration | 5 |
4.4.6 Career Site: Style Special Pieces | 5 |
4.5 Semantic Tags | |
4.5.1 Semantic Tags | 5 |
4.5.2 Semantic Skeleton | 5 |
4.5.3 Section Flowchart Example | 5 |
4.5.4 Semantic Article | 5 |
4.5.5 Great Quotes | 5 |
4.5.6 Article of Interest | 5 |
4.5.7 Career Site: Semantic Tags | 5 |
4.6 Combining CSS Selectors | |
4.6.1 Combining CSS Selectors | 1 |
4.6.2 Combining CSS Selectors Quiz | 2 |
4.6.3 More Specific Styling | 1 |
4.6.4 Choosing Nested Tags | 5 |
4.6.5 Highlight the First Item | 5 |
4.6.6 Calorie Recommendations | 5 |
4.7 The Don't Repeat Yourself Principle | |
4.7.1 Don't Repeat Yourself | 1 |
4.7.2 Don't Repeat Yourself Quiz | 2 |
4.7.3 Styling Multiple Tags | 1 |
4.7.4 Style Similar Items with Same Class | 1 |
4.7.5 Managing Change | 5 |
4.7.6 Condense CSS Rules | 5 |
4.7.7 Why DRY? | 5 |
4.8 Special Selectors | |
4.8.1 Special Selectors | 1 |
4.8.2 Special Selectors Quiz | 2 |
4.8.3 Vote For Me | 1 |
4.8.4 Vote For Me Pt 2 | 1 |
4.8.5 Extend Vote For Me | 5 |
4.8.6 Special Vendors | 5 |
4.8.7 Checklist | 5 |
4.8.8 Career Website: Add Milestones | 5 |
4.8.9 Special Selectors Badge | 1 |
4.9 Visibility | |
4.9.1 Visibility | 1 |
4.9.2 Visibility Quiz | 2 |
4.9.3 Display Example | 1 |
4.9.4 Fading Text | 1 |
4.9.5 Favorite Sea Creature | 5 |
4.9.6 Caption on Demand | 5 |
4.10 Reading Documentation | |
4.10.1 Reading Documentation | 1 |
4.10.2 Reading Documentation Quiz | 2 |
4.10.3 Using Docs: Float | 1 |
4.10.4 Using Docs: <blockquote> Tag | 1 |
4.10.5 HTML Forms | 5 |
4.10.6 Style the Table | 5 |
4.10.7 Electric Company | 5 |
4.10.8 Career Website: Add Pictures | 5 |
4.11 Using the Inspector | |
4.11.1 Using the Inspector | 1 |
4.11.2 Using the Inspector Tool Quiz | 1 |
4.11.3 Inspector Quick Start | 1 |
4.11.4 Classes and IDs | 5 |
4.11.5 Exploring the Art Museum | 5 |
4.11.6 What's Your Style? | 5 |
4.12 The Box Model | |
4.12.1 The Box Model | 1 |
4.12.2 The Box Model Quiz | 2 |
4.12.3 Adding Space Using Margin | 1 |
4.12.4 Adding Space Using Padding | 1 |
4.12.5 Combining Margin and Padding | 1 |
4.12.6 Margin and Padding with em | 1 |
4.12.7 I need some space! | 5 |
4.12.8 I need some breathing room! | 5 |
4.12.9 Where is space added? | 5 |
4.12.10 Relative Measurements | 5 |
4.12.11 Align Content Side by Side | 5 |
4.12.12 Career Website: Separate Content | 5 |
4.12.13 Design with the Box Model | 1 |
4.12.14 Box Badge | 1 |
4.13 Image Manipulation | |
4.13.1 Image Manipulation | 1 |
4.13.2 Image Manipulation Quiz | 2 |
4.13.3 Grayscale Filter | 1 |
4.13.4 Blur Filter | 1 |
4.13.5 Hue Rotation | 1 |
4.13.6 Invert Filter | 5 |
4.13.7 Blurred | 5 |
4.13.8 Hue Rotation Comparisons | 5 |
4.13.9 Overexposure | 5 |
4.13.10 Grayscale Art | 5 |
4.13.11 Aesop's Fables Part 1 | 5 |
4.13.12 Aesop's Fables Part 2 | 5 |
4.14 Animation | |
4.14.1 Animation | 1 |
4.14.2 Animation Quiz | 2 |
4.14.3 Animated Image Filter | 1 |
4.14.4 Animated Invert Filter | 5 |
4.14.5 Album Cover | 5 |
4.14.6 Aesop's Fables Part 3 | 5 |
4.15 Interaction | |
4.15.1 Interaction | 1 |
4.15.2 Interaction Quiz | 2 |
4.15.3 Interactive Image Filter | 1 |
4.15.4 Smooth Interactive Image Filter | 1 |
4.15.5 Smooth Change on Click | 1 |
4.15.6 Button Interaction | 5 |
4.15.7 Create Your Own Tooltip | 5 |
4.15.8 Aesop's Fables Part 4 | 5 |
4.15.9 Career Website: Engage the User | 5 |
4.15.10 CSS Tricks | 1 |
4.16 CSS Frameworks | |
4.16.1 What is a CSS Framework? | 5 |
4.16.2 Making Buttons | 1 |
4.16.3 Mobile Site Bootstrap Example | 5 |
4.16.4 Real World Bootstrap: OneNYC | 5 |
4.16.5 Real World Tailwind: Alastair Gray's Portfolio | 5 |
4.16.6 Tailwind CSS Component Examples | 5 |
4.16.7 Reflection: Using CSS Frameworks | 5 |
4.17 The CSS Grid Layout | |
4.17.1 The CSS Grid Layout | 5 |
4.17.2 CSS Grid Layout Quiz | 5 |
4.17.3 Grid Layout | 5 |
4.17.4 Applying The Grid Model | 5 |
4.17.5 The Rainbow in a Grid | 5 |
4.17.6 Image Gallery | 5 |
4.18 Web Accessibility | |
4.18.1 Accessibility | 5 |
4.18.2 Accessibility Tips | 5 |
4.18.3 Inaccessible Site Review | 5 |
4.18.4 Improve Site's Accessibility | 5 |
4.19 Advanced HTML and CSS Quiz | |
4.19.1 Advanced HTML and CSS Quiz | 15 |
4.19.2 Advanced HTML and CSS Badge | 1 |
Project - Create Your Homepage | |
5.1 Homepage: Your First Website | |
5.1.1 Example Homepage | 1 |
5.1.2 Real World Homepage | 1 |
5.1.3 Set Up Your codehs.me Website | 10 |
5.1.4 Analyzing Requirements | 5 |
5.1.5 Planning your Homepage | 5 |
5.1.6 Create Your Homepage | 10 |
5.1.7 Testing your homepage | 5 |
5.1.8 Create Your Homepage Badge | 1 |
Sign up for a free teacher account to get access to curriculum, teacher tools and teacher resources.
Teacher SignupSign up as a student if you are in a school and have a class code given to you by your teacher.
Student Signup