Lesson Plan wk 3

Agenda

• Homework Review
• GitHub Practice
• Developing with Branches
• Life-Cycle of a Web Page
• Homework Launch

---

Homework Review

Don't be shy, questions don't answer themselves!

relative vs. absolute paths

TOP

---

GitHub Practice

• Do some Pull Requesting
• And some Basic Collaboration
• Then try Collaborating with Branches

TOP

---

Developing with Branches

Finally, it all comes together!

Q: What do Incremental Development and Git Branches have in common?
A: They're both part of well-structured software development!

Split into groups of 2-3 and study Built with Branches

Study it on GitHub:

• How many branches do you see, what do you see when you open each one?
• Does changing branches change what you see on GitHub Pages?
• Take a look at the Network view, what are you looking at?
• Now everyone fork this repository and refresh the Network view.
  • What's changed?
  • What is a fork?
  • What is a branch?

Clone it and study it on your computer with GitKraken:

• Open the cloned folder in VSC
• Open the index.html in your broswer
• Check out a different branch from GitKraken
  • Has anything changed in VSC?
  • What happens when you refresh your browser?
• What happens in GitKraken if you make a commit from master branch?
• What happens in GitKraken if you make a commit from aside-info branch?

Practice fixing an issue with a new branch:

• Read this issue from the built-with-branches repository
• Create & check out a new branch called adding-ids in GitKraken
• Add meaningful id's to the different elements in the index.html file (using VSC)
• Commit your changes with a helpful commit message
• Push the adding-ids branch to your fork on GitHub
• Merge adding-ids into master on your computer
• Push master to GitHub

This is just a taster of what's to come. There's lots of opportunity to practice this next module: you'll be expected to complete each week's project and the module exercises on separate branches!

TOP

---

Life Cycle of a Web Page

How does your HTML & CSS become a live web page? In 3 steps!

1. Source Code: this is what you write in your code editor
2. The DOM: This is what you inspect with the DevTools
3. Rendered Website: This is what you see on your screen when you visit a web site

Lets take another look at Inspecting the DOM to see this in action:

• These 3 examples are very helpful for understanding the web page life cycle and that the DOM is not always a perfect copy of what you write in your HTML:
  • Basic without CSS
  • Basic with CSS
  • Tables
  • the HTML Bugs: no <tr>, unclosed tags,
  • (Be sure to click on the "see it all side-by-side" button!)
• Different ways of including CSS
  • inline css
  • internal css
  • external css
• Editing the DOM from developer tools will change what is rendered on the screen but will not effect the source code HTML & CSS (ie. changes will disappear when you refresh the browser):
  • how to editing CSS from the dev tools
  • how to editing HTML from the dev tools
  • some practice: exercise 1, exercise 2, exercise 3, exercise 4

TOP

---

Homework Launch

This week's project is to replicate DuckDuckGo. Let's get a start by practicing three key skills:

1. Finding which colors a website uses
2. Which fonts a website uses
3. Which images a website uses

With these skills under your belt, the rest of the project is just a lot of tinkering!

TOP