HTML(5) and CSS(3) for beginners - I
•
2 j'aime•1,109 vues
This document provides an introduction to basic HTML and CSS elements for building web pages. It begins with an overview of the document structure, including the <html>, <head>, <title>, and <body> tags. It then covers common page elements like headings, paragraphs, lists, links, and images. The document progresses to explaining how to style elements with fonts, colors, backgrounds and more using inline CSS styles. Later it introduces external CSS files, IDs and classes, and properties like margins, padding, borders. Exercises are included throughout to help learn and practice the concepts. The goal is to teach the reader enough to build their own basic profile page using HTML and CSS.
![About Me
•
•
•
•
•
Founder SNTMNT!
Product guy!
Jack of all trades
vincentleeuwen[at]gmail.com!
@vincentleeuwen](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (14)
Similaire à HTML(5) and CSS(3) for beginners - I
Similaire à HTML(5) and CSS(3) for beginners - I (20)
Dernier
Dernier (20)
HTML(5) and CSS(3) for beginners - I
- 1. Welcome!
- 2. About Me • • • • • Founder SNTMNT! Product guy! Jack of all trades vincentleeuwen[at]gmail.com! @vincentleeuwen
- 3. About you • • Who are you?! What is your goal for today?
- 5. Client vs Server side
- 7. Client vs Server side
- 9. Basic Page Structure • • • • HTML <html>! Page Header <head>! Page Title <title>! Page Body <body>
- 10. Basic Page Elements • • • Headers <h1>! Paragraphs <p>! Lists <ul> / <ol> & <li> <ul> ! ! <li>…</li>! ! <li>…</li>! </ul>
- 12. Don’t forget to close tags! <html> </html>
- 13. Some More Basic Elements • • Links <a href=“”>! Images <img src=“” />
- 15. Basic Element Styling • • • • • Empty line <br/>! Filled line <hr/>! Bold <b>! Italic <i>! Underline <u>
- 16. Nested Elements <a href=“www.google.com”>! ! <p>First paragraph</p>! ! <p>Second pagragraph</p>! </a>! ! => Link your image to Google! !
- 17. What went wrong? <a href=“www.google.com”>! <a href=“http://google.com”>! ! Always use http:// in links!!
- 18. Advanced Element Styling <p style=“…”>! • • • • font-family: Helvetica; ! font-size: 38px;! color: green;! background: yellow; You can assign styles to ANY element! (h1-h6 / p / div / a / li) !
- 19. Exercise => Make your title blue and font type helvetica! => Make all elements on the page blue!
- 20. Advanced Styling: DIVs <div style=“…”> </div>! • • • • height: 200px; ! width: 200px;! color: green;! background: yellow;
- 21. Exercise => Make our national flag naming colours using 3 DIVs (100 x 400)!
- 22. 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) !
- 23. Exercise => Make a German flag using a DIV class ( .flagpart {} ) that can be scaled by changing the class.!
- 24. Some final DIVs styles .[yourdivname] {A:B; C:D;}! • • • • • margin: 20px 0 0 0;! padding-top: 30px;! padding-left: -20px;! border: 3px solid green;! background: url(“…”) [repeat / no-repeat];
- 25. Exercise => Push the flag colours a bit from the border using padding! => Load your profile image in the lowest div with a repeat.!
- 26. 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
- 27. Exercise => Move all styles currently in the style tag to a new file called style.css. !
- 28. Build your own profile page
- 29. CSS cheat sheet • • • • • • 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;
- 30. Some useful links • • • • • Codedacemy (codecacemy.com)! W3Schools (w3schools.com)! Bootstrap (getbootstrap.com)! SubtlePatterns (subtlepatterns.com)! StackOverflow (stackoverflow.com)
- 31. 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/