/01-mobile-first

01-mobile-first

Primary LanguageHTML

CF Lab 01: Mobile First

Code of Conduct

Welcome to your first lab assignment for Code 301!!

Today we'll be kicking off our Blog App by applying what we learned in lectures to implement a mobile-first design, using responsive web design techniques. You'll also need to spend some time getting familiar with the new Git/GitHub & Pair Programming workflow that we'll utilize throughout this course.

Please take the time to read carefully through each of the READMEs for lab assignments as they have detailed information regarding your assignment, such as: how to get started, resources, goals, grading rubrics, and how to submit your work.

Submission Instructions

When you are finished with lab, follow these steps to submit your work. Create one Pull Request (aka: "PR") from your Forked repo to the CF repo with your changes, and you'll each submit that same PR link in Canvas.

  1. Ensure that all your local changes are committed, and pushed to your origin repo.
  2. Visit the origin repo on github.com, and ensure that all of your completed work has been merged to master via Pull Requests within your repo.
  3. Create a new PR from your Fork to the CF repo and ensure the branches look correct.
  4. Fill in the template based on the text box prompts:
  5. Write a good descriptive summary of your changes: 1. Be sure to include how much time you spent on it, and who you worked with. 1. Briefly reflect on and summarize your process.
  6. When you create the PR, it will have a unique URL. Copy this link, share with your partner, and paste it into the assignment submission form in Canvas. Both the driver and the navigator will submit the same PR link.

Set up your repo

High-level Overview: Git Workflow

Here is the recommended workflow (We reviewed this in class):

  1. Driver: fork the CF Lab 01 repository if you haven't done so already.
  2. Your forked repo on GitHub will be your "origin" repo. Clone your fork to your local development environment:
  3. If you haven't done so yet, create a directory named "301" - mkdir 301/ (This will be your parent 301 directory and set you up for organizational success!)
  4. Next, cd 301/
  5. mkdir lab-assignments to house the pair assignment repos.
  6. cd lab-assignments
  7. mkdir my-forked-labs
  8. cd my-forked-labs
  9. git clone this repo.
  10. cd into this repo.
  11. Immediately git checkout -b <driverName-navigatorName> (ex: git checkout -b rick-brian).

Write code together!

Find those TODO items in the code, and tackle one of them.

  1. Driver: In your terminal, ensure that:

    • you are on a branch with you and your partner's namesake.
    • you are currently within the starter-code directory.

  2. Type atom . to open this starter-code folder as a project in Atom.

  3. Use the Atom "Find in Project" (command shift "f" if on a Mac) to locate all the TODO: items.

  4. Work through one or two TODO items before switching roles (or one hour, whichever arrives first), testing your code as you go.

  5. In your terminal type git status to view the files that you have changed. You should only see the files that you have worked on.

  6. Type git diff to see line-item changes with your down arrow key. (Type q to exit this mode!)

  7. Type git add file1 file2 where file1, file2, etc. are the files that you have changed.

  8. Type git status to view the files that have been added to your commit. You should only see the files that you worked on.

  9. Type git commit -m "some meaningful message" where Some meaningful message is a message that thoroughly explains your commit.

  10. Type git status to ensure there is nothing left to commit.

  11. Type git push origin your-name-partner-name to push this branch to your forked repo on GitHub.

  12. On GitHub, Add your navigator as a collaborator (go to settings -> collaborators).

  13. Once they have been added, Slack to your partner your forked repo link for them to clone down.

Switch roles

  1. Navigator (AKA new Driver): You can now clone the driver's fork, to your own local dev environment. If you haven't already:
  2. mkdir 301/ that will be the parent directory for all things 301.
  3. cd 301/
  4. mkdir lab-assignments
  5. cd lab-assignments
  6. mkdir partners-forked-labs
  7. cd partners-forked-labs
  8. The new driver (original navigator):
  9. git clone the repo your partner Slacked you into your navigator folder.
  10. git fetch origin branch-name
  11. Now open the starter-code in Atom. It's your turn to have the hands on the keyboard!

Learning Objectives

  • What is Mobile First design?
  • What is Responsive Web Design vs. Adaptive Web Design? - Discuss the difference between the two
  • Formula for flexible layouts
    • Percentage-based Media
    • Media Queries: include logical operators, and media types
    • Fluid Layout
  • Viewport and initial-scale meta tag
  • Provide as a way for students to test their own portfolio on mobile by starting live-server and connecting to their own IP locally.
  • Review embedded media in RWD; challenges, etc.
  • Understanding SMACSS and benefits
  • Breakdown common SMACSS stylesheets and usage
  • Introduction to icomoon icon fonts, how to setup, and usage
  • Introduction to students about the use of a vendor directory, as some may not be familiar with the regular use of third-party code.
  • Understand the basics of the :before and :after pseudo elements - these will be used to display icons on the front end.

Resources

Feature Tasks

  1. Set up the viewport and fluid media rules so content fits on mobile devices.
  2. Add a "Hamburger" menu button, that reveals the nav links when tapped on a mobile device.
  3. Ensure the images are responsive

Stretch Goals

  1. Use media queries to re-style the header and navigation on desktop-width screens. Nav should be tab-like links on one row.

Rubric

Criteria Pts
Meets all Assignment Reqs 6
Uses idiomatic code style 3
Follows proper Git workflow 1
Total 10