In the first weeks it's likely that you'll spend as much time figuring out how to plan and work with Git/GitHub as you will spend writing code. This is totally normal and OK! Working like a developer takes time and practice to get good at, and at this point in your learning it's even more important than mastering HTML & CSS!

So on days when you find yourself spending a couple hours struggling with branches, trying to push your homework or create an issue, remind yourself that it's all time well spent. Mastering these skills now will free your time later to focus on studying the more interesting and challenging skills in this course.

Developing a working web site is not enough! You will be expected to submit a development strategy and complete repository, cleanly developed with one branch per step. The goal of these projects is to practice planning and building clean projects in a structured way. The goal of these projects is not to build the fanciest most beautiful website, to use all the latest CSS tricks, or to use cool libraries.

Here's a short list of do's and don'ts that can help you stay on track:

• ... ask for help early and often
• ... pay as much attention to your branches & repository as your code
• ... be very careful about your CSS classes, selectors and id's
• ... properly format your code
• ... find the simplest solution to each task in your projects

• ... think that your site can be pretty enough to make up for messy code
• ... make any steps of your project do less or more than is described in the strategy
• ... move on to the next step before the previous one is finished

• Breaking large web-sites into small, manageable tasks
• Sharing tasks between group members

• Pulling & pushing specific branches
• Atomic commits with meaningful messages
• Branching and merging

• Using Pull Requests for code review
• Using Project Boards to track projects
• Using Issues to organize and discuss tasks

• Navigating directories: cd, ls, pwd
• Creating & removing files and directories

• Using plugins for efficient development
• Using linters & code formatters (plugins)
• Using the integrated terminal

1. Source Code: HTML & CSS files you edit in VSC
2. Document Object Model: What you see in the DevTools inspector
3. Rendered Page: What you see in the main browser window

• Finding the source for a website
• Inspecting a specific DOM Element
• Replicating styles and layout

• Use clear and consistent code formatting
• Meaningful names for classes & id's
• Correct usage of CSS selectors
• Responsive, mobile first development
• Accessible Rich Internet Applications (ARIA)

https://htmlpreview.github.io/ - see a live demo of any branch

• What is this?
• Agile Development by Cartoon
• Atlassian, Team Playbook
• Splitting User Stories
• Three key parts

• Managing Conflict

• learngitbranching
• git & github for poets
• lab.github.com:
  • First Day on GitHub
  • First Week on GitHub
• The Net Ninja
• git-it
• Understand how to use Atomic Commits

• Adding collaborators to a repository
• about code reviews
• requesting a code review
• Git Workflow for 2
• Pull Requests
• Git & GitHub for Poets
• The Net Ninja: 11
• linking PRs to Issues: reference 1, reference 2
• closing Issues using keywords

• Jesse Showalter
• CLI games:
  • bashcrawl - clone & play
  • Terminus - online
  • iTerm - online
• A huge cheat sheet
• study.hyf.be

• makeareadme.com
• bulldogjob
• meakaakka

• How to inspect an element
• inspecting-the-dom
• Modify the DOM. (does the source change?)

• FCC, Responsive Web Design: exercises, video
• mmtuts: HTML & CSS
• CSS Games
• 🥚 html-css-git-exercises
• 🐣 HTML-CSS-Practice-Problems
• 🐥 css-exercises

• User Stories
• Acceptance Criteria
  • Yodiz
  • RovitPM
  • Ruby Garage
  • The Infinity Project
• Setting Priorities
  • Many Strategies
  • The Priority Quadrant
    • The Quadrant
    • Problems with this method
  • Other Perspectives
    • Alex Ponomarev
    • Michael Lant

Do you have any questions from last week? Add the question label to an issue in your class repo so your coaches know what to review!

Planning and Collaborating: This is important, take your time to understand it!

In class you will get to know your coaches, discuss the Planning and Collaborating process, then get a start on this week's group project.

1. Introductions from each coach
2. Q/A time about the secret lives of developers
3. A walk-through and discussion of Planning and Collaborating

1. As a full class, take a look through the finished loruki-website code and discuss how it might be broken into small tasks
2. Break into small groups and get set up for this week's group project. You should aim to have created your group's repository by the end of class.

group project

This week's project is to study the loruki-website tutorial from Traversy Media. A working website is not enough! You are expected to create a group repository named loruki-website, as described in Planning and Collaborating. Your group is not expected to submit exactly the same code as Mr. Traversy. You are free to add features, remove features, or write your features differently than he did. His tutorial code is just a starting point.

This is a large project to finish in one week, it's ok if you don't finish all the code! What's most important is that you get used to the Planning and Collaborating workflows.

In the tutorial, Mr. Traversy deployes his website using Netlify. For your group project you can use GitHub Pages instead.

Here's a good way to approach the group project:

1. Before watching the tutorial video (aim to have this finished on Tuesday):
   • Backlog: Study the finished website as a group to come up with your backlog and priorities. You won't need to look at the actual code for this step, backlogs are all about what the user sees!
   • Wireframe: Study the finished website as a group, comparing it to the backlog you wrote. How would you simplify the website into a wireframe?
   • Development Strategy: Study the finished code as a group. What code did Mr. Traversy write for each step? how would you break that code into different tasks?
   • Project Board: Convert your Development Strategy into issues and a project board in your group repo.
2. While studying the tutorial individually, each group member can assign themselves tasks from the project board to practice the HTML & CSS they are learning in the tutorial.
3. After everyone has finished studying the tutorial you can already organize a group call to discuss what you learned and write your Retrospective. Your group does not need to have finished the project before doing the Retrospective.

Copy-paste this checklist into a new project issue and move your issue to the project board, your issue should have:

• labels:group, project, week-1
• milestone: incremental-development

- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_) (GitHub Pages, not Netlify)
- [/planning](https://github.com/_/_/tree/master/planning)
  - [ ] communication plan
  - [ ] constraints
  - [ ] backlog
  - [ ] wireframe
  - [ ] development strategy
  - [ ] retrospective
- [ ] [project board](https://github.com/_/_/projects/1)

Do you have any questions from last week? Add the question label to an issue in your class repo so your coaches know what to review!

You and your group should come prepared to present your Retrospective. Each group will have ~5 minutes to share how the project went last week. Keep it short and clear!

Besides the Retrospectives, this Sunday will be all review and preparation for the week's project. Come ready with all sorts of questions!

1. Questions & review
2. Retrospective presentations, ~5 minutes per group
3. Coach-led discussion of challenges and Lessons Learned

1. Read over step 6, Development all together
2. Study the hackyourfuture.be website as a full class
   • how would you break this into small steps?
   • which pieces are most important?
3. Break into small groups and prepare your repository for the group project

group project

Your group will have 2 weeks to reverse-engineer as much of hackyourfuture.be as possible. If your team has some different ideas for layout or design, go for it. The HYF site is just a starting point. Beginning with an empty repository your group will need to define a backlog with priorities, create a project board full of tasks, and get coding!

Pay special attention to:

• HTML/CSS Good Practice
• Using HTML5 Semantic Element
• Accessibility
• Responsive Design

Careful! When you inspect the hackyourfuture.be the DOM, HTML and CSS will be hard to read. The class names will be meaningless, there will be many extra nested elements, and the sources will be split into many strange files. Ignore this! You aren't trying to recreate the exact code (which is actually written in React), you're trying to reverse-engineer the website - creating something that looks, and feels like hackyourfuture.be but is not.

One of the challenges with this project will be inspecting hackyourfuture.be to find the fonts, colors, assets and layout without losing your way in the DevTools :)

Copy-paste this checklist into a new project issue and move your issue to the project board, your issue should have:

• labels:group, project, week-2, week-3
• milestone: incremental-development

- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [/planning](https://github.com/_/_/tree/master/planning)
  - [ ] communication plan
  - [ ] constraints
  - [ ] backlog
  - [ ] wireframe
  - [ ] development strategy
  - [ ] retrospective
- [ ] [project board](https://github.com/_/_/projects/1)

Do you have any questions from last week? Add the question label to an issue in your class repo so your coaches know what to review!

Nothing new! Come ready to discuss your group's work last week, and to share tips for a better next week.

1. Questions & review
2. ~5 minute status report from each group
3. Discussion of challenges and Lessons Learned

Git workshop! Come ready with your questions and your git conflicts from the week.

group project

Finish building as much of hackyourfuture.be as possible before Friday. On Friday or Saturday your group should gather to discuss how the project went and to fill out your Retrospective.

You can move your group issue into "Ready for Review" after you have finished your Retrospective. Just like the first week's project, you will be assessed on your planning and collaborating not on a finished project.