Learn to code: Lesson 3

Wrapping up the previous two lessons, and pushing everyone a little bit forward!

Transcript

1. Learn to code! Lesson 3: A recap & some new ideas. Kevin  Dowling  
2. 1  Recap HTML 2  Recap CSS 3  Divide & Spanner 4  Next steps over Christmas break
3. 1  Recap!
4. HTML powers the web! HyperText Markup Language
5. HTML: Semantics, not design! •  HTML provides semantic structure to the web. •  HTML does not provide design or structure to the web. •  Humans are awesome at inferring structure & meaning. Web browsers? Not so much.
6. What’s HTML look like again?! ! ! Opening tag | Content | Closing tag ! <h1>Beautiful headline</h1>!
7. Attributes for CSS classes HTML allows us to add attributes to our tags, which let us add structure & style from CSS!   <h1 class=“something- awesome”>!
8. HTML applied! How do you reckon this would look?   <p>Hey, <i>Jeetu</i>, did you see the <b>football match</b> <u>yesterday</ u>?</p>!
9. Riddle me this… •  What tools do you need to write a web page? •  What are the primary sections of a web page? •  What file type is a web page? •  I need to add some structure to a page, what do I use?
10. What do these mean? •  <em>! •  <i>! •  <strong>! •  <b>! •  <br>! •  <p>! •  <a>!
11. 2  Recap CSS
12. CSS Cascading Style Sheets
13. CSS styles & structures the web •  Applied to your semantic HTML. •  Specifies how things appear on your pages. •  Selectors (tags in HTML) identify what to target our style with. •  A CSS class is denoted with a dot. •  A CSS i.d. is denoted with specific elements.
14. Riddle me this… Explain these: •  Background-color! •  Font-size! •  Font-weight! •  Margin! •  Padding! •  float!
15. 3  Divide & Spanner
16. NEW STUFF: how do we group sections up? •  So we have a bunch of content on our site. But we want to group some of it in a semantic way that will help us add specific styles & structure to that content. •  E.g. you want your list of hobbies to be styled & placed differently to your images or different kinds of content! •  We can do this with <div> or <span>!
17. <div> & <span> •  <div> is simply a division of the site. It’s just a semantic mark to tell us & the browser to group this together. i.e. It does nothing to the page until you apply your CSS. •  <span> is similar, but it’s inline. Can anyone explain inline to us yet?!
18. Div, Span, Class… •  Now tell me what this code does: <div class=“my-div”>! •  And in CSS…: .my-div { float: left; background-color: #404040; color: #fff; }!
19. 4  Next steps for Christmas break!
20. Make your sexy page proper sexy. You now know a lot more about HTML & CSS than you did only a month ago. GO YOU!
21. TODO: 1  Wrap your web page elements with <div> tags & target them with CSS to float them left or right (i.e. put them side-by-side on a page). - You will run into difficulty with this. But use online resources to figure out the answer. We’ll review after break to help fix your problems.
22. Bonus TODO: 1  Target divs on all of your pages with the same CSS. Now you see why we use CSS – to add redundancy to our code & add efficiencies to how we work! 2  Figure out how to target a specific div on a specific page to look magically different. i.e. Target a div on another page different to a previous.
23. QUESTIONS?  
24. THANK  YOU