Lesson 6
This Lesson’s Focus: Flexbox
- Learn Flexbox
- Start Project 2 - Cake Project
At CoderGirl
- Quick Talk: Responsive Web Review
- Work Time
- TAKE SURVEY (if you haven’t)
At CoderGirl - PART II
- Activity: Peer Review Code
- Demo: Making things Responsive Guidelines
- Quick Talk: Project 2 Intro
- Work Time
Course Work
Assignment: Finish & Clean Up Kat Project
Do: The article from last week is listed here as reference… so basically clean up your code :)
Shay Howe - Good Code
Assignment: Learn Flexbox
Do: Complete the CodeSchool Flexbox class.
CodeSchool - Cracking the Case with Flexbox
Practice: Now that you’ve learned the concepts, take this Flexbox challenge…
Flexbox Froggy Challenge
Assignment: Project 2 - Cake Project
Do: Setup project 2 - Fork & Clone the repository located here:
Project 2 - Cake Project
Do: Setup file structure - For this project, we did not create an html file or a css file. So after you make a local copy of the project on your computer (with git clone), your first step is to create an index.html file and a main.css file. You can follow the same folder structure as the Kat project (css folder holds your css file, etc). Below are some resources to help you:
HTML Structure Shell
Help on Linking CSS file to HTML
Do: Code Index Page - Start coding the index page of the Cake Project. Pick one thing on the page to work on and start coding. That could be the just the nav bar, the footer, or the Flexbox layout. Remember to use git as you are working. Plan to do one thing, for example style the nav bar, code it, git add it, git commit it. Then plan the next thing and repeat.
Bored?!
Do: Remember that Portfolio project you worked on the first or second week? CodeSchool even has a quick design class you can check out to get started:
CodeSchool - Fundamentals Of Design
Read: This article has some great advice as to what to put on your portfolio:
Tips on Creating a Portfolio
Some Resourses to Use:
Balsamiq - Wireframing & Prototyping
note: CoderGirl cohort has a free subscription to balsamiq
Here’s how to use the free subscription:
1) Download: from their website
2) Register: follow these instruction to register with:
License Name: CoderGirl 2017
License Key: ask Katie for it on Slack…