- Writing development strategy files for HTML/CSS projects
- Breaking down existing websites into development strategies
- Using Git branches to organize your development process
- Pushing and pulling branches
- Using HTML5 semantic elements for page layout
- Determining which CSS units to use when
- Understanding CSS specificity rules
There is a lot of prep work for this week, but it's doable! Remember that the goal of prep work isn't to understand everything in depth. It's just to be familiar so that you're not hearing about these topics for the first time on Sunday.
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:
- git & github for poets - no need to go past 1.4
- The Net Ninja - #8 & #9
- Understand how to use Atomic Commits
- Development Strategy (required)
-
development-strategy.mdfiles - example: Team Branchies - What is this?
- Agile Development by Cartoon
- Splitting User Stories
- The "what" not the "how"
Not very complicated but a little tricky at first. This will come up all the time, forever.
Learn how to use a development-strategy.md file to plan your projects, and git branches to organize your code.
Build another group intro repository?! Your main focus this time will be understanding development strategies, and using git branches to turn the strategy into a reality.
While in your small groups each group member will create their own repository. You can help each other all you need to, but you will each need to work on a separate project. There is no need to fork or send pull requests (that's for next week).
- a completed example to study: Team Branchies
- to get you started: a template development strategy
Connect what you've learned about development strategies, Git & GitHub with what you already know about HTML/CSS:
- development strategy
- wireframe
- starter repo (project starter repo)
Example project to study: separated, stepped
Before getting started on the homework, take a minute to set up your Homework Issue on this module's project board.
- inspecting-the-dom
- FCC, Responsive Web Design: exercises, video
- mmtuts: HTML & CSS
- 🥚 html-css-git-exercises - Week 1
- Fork & clone the repository
- Complete the exercises in
week-1 - Push your work regularly to GitHub
- You should ignore the instructions under When you have completed all exercises
- 🐣 HTML-CSS-Practice-Problems
- 🐥 css-exercises
This week's project is to study and reverse-engineer the acme-web-design tutorial from Traversy Media.
Writing the same code as Mr. Traversy's code is not enough! You are expected to submit your code from his tutorial in a new repository generated from this starter template. Your repository should be named acme-web-design and should be cleanly developed with one branch per step. It's up to you to write the development strategy!
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.mdwhich describes how you broke the project into user stories, and describes how you implemented each user story in detail.
There are two general strategies 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.