Files From Class:
DOWNLOAD: Here are the files we created in class based on our sketch: https://www.dropbox.com/s/q5n75j2ffp1bxxp/Bonobos-inClass-9.9.19.zip?dl=0
Wireframe Sketch: here is a pic of the wireframe from the board. I converted it to a PDF. https://www.dropbox.com/s/vpsbsbs5mvhzvnw/Bonobos-Wireframe-Sketch-.pdf?dl=0
For the homework you would upload two files like these, the HTML and a Sketch to the Assignment in Blackboard.
Today we will recap what we worked on Thursday and then move into the basics of CSS.
Wireframe and HTML Section Elements
We are going to start by sketching out the main sections of this web page: https://bonobos.com/
I chose it because it is relatively straightforward and will be relatively easy to write HTML and CSS for. However, you should note that the actual markup of the page is an example of what I do NOT want you to do. They use divs for all of the major page sectioning elements.
Instead we are going to use the HTML5 elements. For a good article on this issue and picking out the elements you should use read this: Stop Using So Many Divs: An intro to Semantic HTML
Wireframe Sketch
As a class we will sketch out the page
HTML Sectioning Elements
We will go through the following:
- Basic Web Page: All of the basic elements you need before starting the content. We will see how to get this started with a simple Emmet extension ( type ! then tab on a blank page). Note: there are some other elements we will need to add to this.
- Basic Page Elements:
- Header <header></header>
- Main <main></header>
- Footer <footer></footer>
- Other Sectioning and Grouping Elements: div, section, article, aside, nav
CSS Fundamentals
We will go through the basics of CSS and use:
- This presentation: Keynote version, PowerPoint version
- These files: compressed zip file
As we follow along in the presentation we will write some basic CSS. Download the compressed zip file above and open it in Brackets or Sublime. We will also use Emmet as we work.
This post has a couple of good diagrams of CSS ruleset terminology: https://css-tricks.com/css-ruleset-terminology/
