Class 1
Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
Some "rules"
Tell us about yourself.
Thank you to our wonderful TAs!
Course website: http://anything.codes
Instructor contact info: lizs@girldevelopit.com
We'll be jumping into HTML/CSS right where the beginner class left off
A block of CSS rules that reset all default styles
Why?
A reset lets us start from a clean slate
How to use a CSS reset
Example
See the Pen CSS Reset - Before by Liz Shaw (@anythingcodes) on CodePen.
Go ahead and create your folders
Ignore the HTML and CSS files for now
HTML5 is the latest version (version 5) of HTML
All modern browsers support HTML5
HTML5 elements are more semantic (e.g. compared to <div>)
Semantic means the tag name says what it does
Semantic Elements
Using semantic HTML5 elements makes it much easier to read, write, and understand your code
It's also great for Search Engine Optimization (a.k.a. SEO) and accessibility reasons (e.g. visually-impaired people using screen readers)
Let's use block-level HTML5 elements to layout our header and banner (a.k.a. hero)
Interactive Features
HTML5 has a lot of new interactive elements, including <canvas>
, <svg>
(example 1 and example 2), and <video>
HTML5 works on all devices
These new features replace the need for Flash videos, which Apple devices don't support
CSS image replacement is a technique of replacing a text element (usually a heading) with an image
For example, you may want to use a <h1> for accessibility and SEO benefits, but want to show a logo instead of text
selector {
background-image: url('images/yourimage.png');
width: 300px; /* the width of your image */
height: 300px; /* the height of your image */
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
See the Pen CSS Image Replacement - Before by Liz Shaw (@anythingcodes) on CodePen.
Image too big?
Use background-size: contain;
to contain the background within a smaller width and height
Let's use CSS image replacement on our <h1> to show our logo instead of text
See the Pen Relative Positioning by Liz Shaw (@anythingcodes) on CodePen.
See the Pen Absolute Positioning by Liz Shaw (@anythingcodes) on CodePen.
See the Pen Limiting an Absolute Element's Scope by Liz Shaw (@anythingcodes) on CodePen.
When an element is floated, subsequent elements wrap around it
See the Pen Float - Before by Liz Shaw (@anythingcodes) on CodePen.
selector {
position: fixed;
}
To make an element scroll with the browser window (a.k.a. the viewport), use fixed positioning
Unlike static elements, a fixed element can overlap other elements
Fixed positioning is often applied to a page's header
Examples:
Setting the Location
Use the top, bottom, right, and left properties to set the location
These values position the element relative to the viewport so that it scrolls with the page
See the Pen Fixed Positioning - Before by Liz Shaw (@anythingcodes) on CodePen.
Let's use fixed positioning to style our header, and style our navigation menu while we're at it
A large banner image, prominently placed on a page, generally in front and center
Use several CSS properties — background-image
, background-size
, background-repeat
and height
— together to make a scalable responsive banner
Use background-size: cover;
to scale the image to the largest size such that both its width and its height can fit inside the content area
Let's start styling our banner section
Beyond Layouts — Shaping Elements, Custom Fonts, CSS Animations, & More Advanced CSS Goodness
If you haven't already, try to use each of the CSS properties discussed today. Next week we'll pick up the pace and apply some cool cutting-edge CSS. We'll also start talking about responsive development!