1st Day (Know Your Resources)
- Digital Citizenship
- Google Hangouts
2nd Day (Computer Science)
- Walk Through “Comp. Sci Slideshow”
- What is a computer?
- Talk about pioneers in Comp. Science.
- Introduce Algorithms + Binary Code
- Have students become familiar with the CodePen content editor
3rd Day (What do you know?)
- Tech Exposure Quiz
- Keyboard shortcuts
- Copy:"Ctrl + C", Paste: "Ctrl + V", Cut: "Ctrl + X", Paste: "Ctrl + Z"
- Present “About Me Capstone Project”
- Explain some of the HTML Syntax
- Show + Explain Order
- Show How the HTML + CSS of About Me Site Affects Each Other
4th Day (Basic HTML Syntax)
- HTML Framework
5th Day (HTML Syntax + In-Line Styling Basics)
- Teach students how to utilize hyperlinks and how to create them using the tag a
- Teach students how to utilize and create 'img' tags
- Then students will combine the act of 'img' and 'a' tags to make a linked image (nesting).
- Introduce basics of in-line styling
6th Day (HTML Syntax Cont’d : Introducing Lists)
- Start explaining how HTML can be used to create lists.
- Explain and create ordered and unordered lists.
- Explain and teach students how to nest their lists within other lists.
- Talk about Commenting code
- Indenting Code and readability
7th Day (In-Class Assignment: Social Media Project)
- HTML Framework
- At least 2 photos (1 with anchor)
- At least 3 lists with 3 items each (at least 1 ordered and 1 unordered)
- At least 1 hyperlink
- At least 1 font color change
8th Day (HTML In-line Style Basics Cont’d + Improve Social Networking Profile In Class Assignment)
- Improve Social Networking Profile Class Activity
- Add at least 2 fonts
- Add at least 2 font stylings (bold, italicize)
- Align your text
- Font Family
- Times New Roman
- Bold <b></b>
- Italicize </i></i>
9th Day (HTML Quip 1+ Introduce Tables)
- HTML Quip 1 (alott 20-25 minutes)
- Introduce <table></table>
10th Day (Clickable Photo Page In Class Assignment )
- Clickable Photo Page In Class Assignment.
11th Day (Divs + Span)
- Introduce and explain to students what <divs></divs> are
- One of the most versatile structure tags available to you is the <divs></divs> tag. Short for "division," <div> allows you to divide your page into containers (that is, different pieces). This will come in handy when you begin learning CSS in the next unit: you'll be able to style different parts of your website individually!
- Have students complete HTML Basics III: Lessons 11 + 12 to showcase their understanding.
- Introduce and explain to students what <span></span> means
- While <div> allows you to divide your webpage up into pieces you can style individually, <span> allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in <span></span> tags and make them red using CSS!
- Have students complete HTML Basics III: Lessons 13-15 to demonstrate understanding.
12th Day (HTML Quip 2 + Introduction to CSS)
- Assign HTML Quip 2
- Students have 20 minutes to complete the quip.
- Introduce and explain to students what CSS is (Cascading Style Sheets)
- CSS (which stands for Cascading StyleSheets) is a language used to describe the appearance and formatting of your HTML.
- A style sheet is a file that describes how an HTML file should look. That's it!
- We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that! (We'll talk more about cascading in section four.)
- Explain to students how to link your CSS stylesheets from their HTML.
- <link rel=”stylesheet” type=”text/css” href=”main.css”> (Remember: this is a self closing tag)
- How to write proper CSS syntax and how to write a comment in CSS.
- Have the students complete CSS: An Overview Lessons 1-8.
13th Day (Introduction to CSS Cont’d + Importing Google Fonts)
- Introduce and explain Google Fonts.
- Introduce hexadecimal values (colors in sets of 6 numbers/ Google Color Palette).
- Explain the difference between pixels and ems.
- A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size.
- What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. (Don't confuse these with the <em></em> tags we use for emphasis!)
- The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font: it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size!"
14th Day (CSS Cont’d + In-Class Assignment: Design a Button for Your Website)
- Introduce students to Divs and Borders for CSS
- Introduce Link and text decoration properties for CSS
- Assign the Design a Button for Your Website lesson.
- For students who complete early, assign extra requirements to assignment: Background color, Import Fonts
15th Day (CSS Selectors)
- Introduce the concept of multiple selectors.
- Grabbing exactly the element you’d like to change. Think of fine-tuning.
- Introduce the universal selector *
- With this selector we can apply our styling to the entire document, without having to repeat the style properties to each element individually.
- Introduce Classes and IDs
- Class = .className
- Id = #idName
16th Day ( In-Class Assignment: Sorting Your Friends + CSS Quiz)
- Assign the CodeAcademy Lesson: Sorting Your Friends
- When students have completed their In Class Assignment, students will then take their CSS Quiz. (Students will have 20 minutes to complete)
17th Day (CSS Positioning)
- The Box Model
- Controlling the position of HTML elements allows you incredibly fine control over how your pages look. No longer will your <div>s sit directly on top of one another! (Unless you want them to.)
- As we mentioned, elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify.
- Block, In-line Block, None + Margins, Borders and Padding (Assign CSS: Positioning Lessons 2-12 in class.)
18th Day (CSS Positioning Cont’d)
- Floating, Relative, FIxed, and Absolute positioning. Assign CodeCademy: 13 - End
- Float Right
- Float Left
- Clear All
- Static by Default
- Absolute position
- Relative Position
- Fixed Position
19th Day (In-Class Assignment: Build A Resume)
- Assign the CodeAcademy Lesson: Build A Resume
- For any students who complete the assignment early, we will assign them more to do. (Importing fonts, adding more elements to the assignment)
20th Day (1st Day of Working on About Me Capstone Project)
- Use HTML Framework: DOCTYPE, head, title, body, etc.
- At Least Five Sections:
- About Me
- Extra Info
- More Exra Info
- At least 2 paragraphs
- At least two lists ("ul or "ol)
- At least one table
- 2-3 Images
- Presentation must be 8-10 minutes long
- A Footer section
- At Least Five Sections:
21th Day (2nd Day of Working on About Me Capstone Project)
- All styling must be done on CSS
- Set up different backgrounds
- At least two different fonts and font styles
- Use the box model for styling.
22th Day (3rd Day of Working on About Me Capstone Project)
23th Day (4th Day of Working on About Me Capstone Project)
24th Day (5th Day of Working on About Me Capstone Project)
25th Day (6th Day of Working on About Me Capstone Project)
26th Day(Present Your About Me Page)
27th Day (Present Your About Me Page)
- Students will present their website to their peers and talk about how they made it.