Download - HTML(5) and CSS(3) for beginners - I
![Page 1: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/1.jpg)
Welcome!
![Page 2: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/2.jpg)
About Me
• Founder SNTMNT!• Product guy!• Jack of all trades
• vincentleeuwen[at]gmail.com!• @vincentleeuwen
![Page 3: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/3.jpg)
About you
• Who are you?!• What is your goal for today?
![Page 4: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/4.jpg)
![Page 5: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/5.jpg)
Client vs Server side
![Page 6: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/6.jpg)
![Page 7: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/7.jpg)
Client vs Server side
![Page 9: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/9.jpg)
• HTML <html>!• Page Header <head>!• Page Title <title>!• Page Body <body>
Basic Page Structure
![Page 10: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/10.jpg)
• Headers <h1>!• Paragraphs <p>!• Lists <ul> / <ol> & <li>
Basic Page Elements
<ul> !! <li>…</li>!! <li>…</li>!</ul>
![Page 11: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/11.jpg)
![Page 12: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/12.jpg)
<html> </html>
Don’t forget to close tags!
![Page 13: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/13.jpg)
• Links <a href=“”>!• Images <img src=“” />
Some More Basic Elements
![Page 14: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/14.jpg)
![Page 15: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/15.jpg)
• Empty line <br/>!• Filled line <hr/>!• Bold <b>!• Italic <i>!• Underline <u>
Basic Element Styling
![Page 16: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/16.jpg)
<a href=“www.google.com”>!! <p>First paragraph</p>!! <p>Second pagragraph</p>!</a>!!
=> Link your image to Google!!
Nested Elements
![Page 17: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/17.jpg)
<a href=“www.google.com”>!<a href=“http://google.com”>!!
Always use http:// in links!!
What went wrong?
![Page 18: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/18.jpg)
• 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) !
![Page 19: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/19.jpg)
=> Make your title blue and font type helvetica!=> Make all elements on the page blue!
Exercise
![Page 20: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/20.jpg)
Advanced Styling: DIVs
• height: 200px; !• width: 200px;!• color: green;!• background: yellow;
<div style=“…”> </div>!
![Page 21: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/21.jpg)
=> Make our national flag naming colours using 3 DIVs (100 x 400)!
Exercise
![Page 22: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/22.jpg)
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) !
![Page 23: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/23.jpg)
=> Make a German flag using a DIV class ( .flagpart {} ) that can be scaled by changing the class.!
Exercise
![Page 24: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/24.jpg)
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;}!
![Page 25: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/25.jpg)
=> Push the flag colours a bit from the border using padding!=> Load your profile image in the lowest div with a repeat.!
Exercise
![Page 26: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/26.jpg)
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
![Page 27: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/27.jpg)
=> Move all styles currently in the style tag to a new file called style.css. !
Exercise
![Page 28: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/28.jpg)
Build your own profile page
![Page 29: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/29.jpg)
• 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
![Page 30: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/30.jpg)
Some useful links
• Codedacemy (codecacemy.com)!• W3Schools (w3schools.com)!• Bootstrap (getbootstrap.com)!• SubtlePatterns (subtlepatterns.com)!• StackOverflow (stackoverflow.com)
![Page 31: HTML(5) and CSS(3) for beginners - I](https://reader030.vdocuments.site/reader030/viewer/2022020110/547b0e205906b58b798b457b/html5/thumbnails/31.jpg)
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/