Skip to content

Latest commit

 

History

History
 
 

week-1

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Week 1: Be Semantic

Prepare yourself, it's about to get real!


Prep Work

Git, GitHub & GitKraken

This module's main objective is to learn how Git & GitHub can be used to organize your development process. Come prepared for Sunday's activities by studying these links:

User Stories

Relative vs. Absolute Paths

Not super complicated, but a little tricky at first. And this will come up all the time forever.

Internet?

Code Review

Starting in this module, you will be using GitHub code review processes to ask for help on your projects and exercises (and to help your classmates!). Whenever you are struggling with something instead of sharing massive blocks of code or screen-shots on Slack, you will push your work to GitHub and create an issue containing screen shots and references the lines of code you are stuck on.

After sharing a link to this new issue on Slack, your peers and coaches will give feedback directly in your GitHub repository using pull requests & comments in your issue. When you've resolved the issue, close it and give everyone a big thank you!

For a while, this process will be a bit confusing and may even get in the way of solving your code problems. But it's worth it! Mastering code review workflows now will make it possible for you to focus on your code troubles later when your projects are a whole lot more complicated.


Lesson Plan


Assignments

This week you have 1 project, and 3 exercise sets.

Project

Code-Along

This week's project is to study the acme-web-design tutorial from Traversy Media.

Writing the same code as Mr. Traversy's code is not enough! You will be expected to submit your code from his tutorial in a new repository, cleanly organized with one branch per step. It's up to you to decide what counts as a step. Take a look through this example project to get an idea of what an incrementally developed project looks like. Be sure to also clone this repository and study it using GitKraken/VSC/Browser to explore what happens when you check out different branches.

You will be assessed not only on your live demo, but also on the quality of your code, the correctness of your branches, and the completeness of your repository. Your repository must contain:

  • A README describing your project in detail. Check out these articles to learn more about writing good README's: makeareadme.com, bulldogjob, meakaakka
  • One well-named branch per user story. If we check out any branch, it should contain only the code necessary to make that step work. and it should work!
  • A file called development-strategy.md in which you explain how you broke the project into user stories, describe each user story, and describe what code you wrote to implement this user story in detail. Check out the tomato timer code-along for an example.

There are two general paths you can take to get this finished repo, neither is better or worse. And if you find another way go for it!

  • Two-Stepping: First - follow the tutorial studying the code and understanding the project. Second - go through the tutorial another time, this time around focusing on using branches to create a finished repository.
  • One-Stepping: Follow the tutorial once more slowly, carefully building your finished repository as you go.

But wait! Before you dive right in, take a minute to set up your homework on the module project board:

  1. Start an empty repository called acme-web-design (Named exactly this!)
  2. Create an issue for this week's project in your class repo
    • YourName: week 1 - incremental development
  3. Move it to the "In Progres" column of this module's project board.
  4. Open the Responsive Layout tutorial.
  5. Begin coding!

Exercises

There are 3 sets of exercises to start (and hopefully finish!). One is on FreeCodeCamp, the other two are stand-alone repositories you will need to fork & clone.

  • Sign in to FreeCodeCamp using your GitHub account:
    • Complete all 22 of FreeCodeCamp's Applied Accessibility challenges.
    • Turn on your public portfolio so we can give feedback on your code
  • Fork and Clone HTML-CSS-Practice-Problems:
    • Turn on GitHub Pages
    • Complete the exercises in ./level-1
    • Push your work regularly, so you can ask questions with issues!
  • Fork and Clone css-exercises
    • Turn on GitHub Pages
    • Complete exercise-1 and exercise-2
    • Push your work regularly, so you can ask questions with issues!

Looking for an extra challenge? Try solving each exercise on a different branch!

TOP



Hack Your Future: Belgium