html(5) and css(3) for beginners - i
DESCRIPTION
Slideshow for Workshop HTML and CSS3 for beginners on December 3rd 2013.TRANSCRIPT
Welcome!
About Me
• Founder SNTMNT!• Product guy!• Jack of all trades
• vincentleeuwen[at]gmail.com!• @vincentleeuwen
About you
• Who are you?!• What is your goal for today?
Client vs Server side
Client vs Server side
• HTML <html>!• Page Header <head>!• Page Title <title>!• Page Body <body>
Basic Page Structure
• Headers <h1>!• Paragraphs <p>!• Lists <ul> / <ol> & <li>
Basic Page Elements
<ul> !! <li>…</li>!! <li>…</li>!</ul>
<html> </html>
Don’t forget to close tags!
• Links <a href=“”>!• Images <img src=“” />
Some More Basic Elements
• Empty line <br/>!• Filled line <hr/>!• Bold <b>!• Italic <i>!• Underline <u>
Basic Element Styling
<a href=“www.google.com”>!! <p>First paragraph</p>!! <p>Second pagragraph</p>!</a>!!
=> Link your image to Google!!
Nested Elements
<a href=“www.google.com”>!<a href=“http://google.com”>!!
Always use http:// in links!!
What went wrong?
• font-family: Helvetica; !• font-size: 38px;!• color: green;!• background: yellow;
Advanced Element Styling
<p style=“…”>!
You can assign styles to ANY element! (h1-h6 / p / div / a / li) !
=> Make your title blue and font type helvetica!=> Make all elements on the page blue!
Exercise
Advanced Styling: DIVs
• height: 200px; !• width: 200px;!• color: green;!• background: yellow;
<div style=“…”> </div>!
=> Make our national flag naming colours using 3 DIVs (100 x 400)!
Exercise
Element ID and Element Class
• Don’t Repeat Yourself!• IDs #MyFirstID {}!• Class .MyFirstClass {}
You can assign classes and IDs to ANY element! (h1-h6 / p / div / a / li) !
=> Make a German flag using a DIV class ( .flagpart {} ) that can be scaled by changing the class.!
Exercise
Some final DIVs styles
• margin: 20px 0 0 0;!• padding-top: 30px;!• padding-left: -20px;!• border: 3px solid green;!• background: url(“…”) [repeat /
no-repeat];
.[yourdivname] {A:B; C:D;}!
=> Push the flag colours a bit from the border using padding!=> Load your profile image in the lowest div with a repeat.!
Exercise
Cascading Style Sheets
<link href="style.css" rel="stylesheet">
• .css files capture style tags like classes and IDs!
• Style across html files!• If there are several files, the lowest
one has priority in case of conflicts
=> Move all styles currently in the style tag to a new file called style.css. !
Exercise
Build your own profile page
• Make a background div .bg {} that has a fixed height of 400px and set background-size: cover; !
• Style .bg with background: url(“”) no-repeat; as the image http://static.sntmnt.com/workshop/img1.jpg!
• Make a container div that has a width: 960px; and margin: 0 auto 0 auto;!
• Give the profile image a class with negative top margin and a white solid border of 5px.!
• Get lorem ipsum content from http://www.lipsum.com/ or write it yourself :)!
• Get the links horizontal by giving the li {} element !display: inline; and ul {} a list-style-type:none;
CSS cheat sheet
Some useful links
• Codedacemy (codecacemy.com)!• W3Schools (w3schools.com)!• Bootstrap (getbootstrap.com)!• SubtlePatterns (subtlepatterns.com)!• StackOverflow (stackoverflow.com)
Want more ???• Launch a Landing Page over coffee!• Next week Saturday, 14th December!• Hosted by Dwight Gunning (@dwightgunning)
passiontree.com/workshop/launch-a-landing-page/