log into Google Drive and create a new Google Drawing. Using shapes, create a simple sitemap based on your user stories from last week
log into Github and create HTML pages according to your sitemap. Make sure each Page has a title, a main heading, a paragraph describing what the page is for and links to the other pages.
Basic CSS
What are Cascading Style Sheets?
Cascading Style Sheets allow us to define how we want our HTML to appear on screen. The HTML gives our content structure, CSS presents it. Proper web design separates
content (HTML) from presentation (CSS). Separating content and presentation gives us several benefits:
we can work on each separately, which is easier in a team environment
helps us organize our projects, html is here, styling here
simplifies the creation of swappable “Themes”
Including Styles
Link external stylesheets using the <link> tag, e.g. <link rel="stylesheet" href="mystyles.css">
External stylesheets should be saved with the .css file extension, e.g. mystyle.css
Embed them using the <style>...</style> tag
Use them inline with the style="..." HTML element attribute
What does “Cascading” mean?
We can apply our styles in sequence, selectively overriding previously defined styles, by “cascading&rquo; a new style on top of it.
set your base styles using linked stylesheets
cascade override styles using the <style> tag
avoid inline styles because they break our ability to separate content and presentation
CSS Selectors
the wildcard, applies to all elements on the page, i.e * {...}
tag names, applies only to that tag, i.e. h1 {...}
ids, applies only to the element with that id assigned as an attribute, i.e. #myid {...}
classes, applies to all elements with that class assigned as an attribute, i.e. .myclass {...}
CSS Rules
CSS rules are the collection of properties and values you are assigning to your CSS Selectors. For example, to apply a font-family to all elements on your page (in essence setting the default font family), try this:
Type is the most basic mode of communication in web design – we use words to communicate first. Good design presents our ideas quickly & simply,
making it easy for our audience to understand what we're communicating. Typestyles are specific letter forms that have been developed for presenting text on different media
(stone, paper, computer screen, etc). A font is a packaged typestyle that includes additional specifications, including sizes, weights, styles (normal, italic, oblique) & spacing information.
Serif & Sans-Serif Fonts
There are two main font families used on the web:
Serif
Sans-Serif
Using Type with CSS
There are a number of properties you can use to control typestyles using CSS:
In the HTML pane, create a few html elements including an <h1>, a <p>, and an anchor tag <a>
In the CSS pane, create a few CSS selectors (one for each of your HTML elements), and try changing the font-family, font-size and font-style for all of them & each individually.
After you have completed the reading assignment, revisit your HTML pages and create a type treatment for them.
Pick a font or two (remember smaller text should probably be san serif for reading on the web, headings could be serif font, but choose carefully according to the guidelines in Appendix A in Design for HAckers
Create a stylesheet in your Github repository by navigating to your repository, making sure your master branch is selected and then clicking on the + (plus) icon next to your repo name. Give it a name like mystyle.css
Using the various font properties, create a type treatment for your web pages.