Downloaded 27 times
![About Me
•
•
•
•
•
Founder SNTMNT!
Product guy!
Jack of all trades
vincentleeuwen[at]gmail.com!
@vincentleeuwen](https://image.slidesharecdn.com/html-workshop-131204043757-phpapp02/85/HTML-5-and-CSS-3-for-beginners-I-2-320.jpg)
![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];](https://image.slidesharecdn.com/html-workshop-131204043757-phpapp02/85/HTML-5-and-CSS-3-for-beginners-I-24-320.jpg)
Uploaded byvincentleeuwen
HTML(5) and CSS(3) for beginners - I
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.
More Related Content
![[Basic HTML/CSS] 5. css - selector, units](https://cdn.slidesharecdn.com/ss_thumbnails/5-170304052513-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to HTML(5) and CSS(3) for beginners - I
![[SUTD GDSC] Intro to HTML and CSS](https://cdn.slidesharecdn.com/ss_thumbnails/introtohtml-230215093923-21d7cfc6-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML(5) and CSS(3) for beginners - I
- 1.
- 2. About Me • • • • • Founder SNTMNT! Productguy! Jack of all trades vincentleeuwen[at]gmail.com! @vincentleeuwen
- 3. About you • • Who areyou?! What is your goal for today?
- 5. Client vs Serverside
- 7. Client vs Serverside
- 8.
- 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 toclose tags! <html> </html>
- 13. Some More BasicElements • • Links <a href=“”>! Images <img src=“” />
- 15. Basic Element Styling • • • • • Emptyline <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? <ahref=“www.google.com”>! <a href=“http://google.com”>! ! Always use http:// in links!!
- 18. Advanced Element Styling <pstyle=“…”>! • • • • 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 yourtitle blue and font type helvetica! => Make all elements on the page blue!
- 20. Advanced Styling: DIVs <divstyle=“…”> </div>! • • • • height: 200px; ! width: 200px;! color: green;! background: yellow;
- 21. Exercise => Make ournational flag naming colours using 3 DIVs (100 x 400)!
- 22. Element ID andElement 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 aGerman flag using a DIV class ( .flagpart {} ) that can be scaled by changing the class.!
- 24. Some final DIVsstyles .[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 theflag colours a bit from the border using padding! => Load your profile image in the lowest div with a repeat.!
- 26. Cascading Style Sheets <linkhref="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 allstyles currently in the style tag to a new file called style.css. !
- 28. Build your ownprofile page
- 29. CSS cheat sheet • • • • • • Makea 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 ??? • • • Launcha Landing Page over coffee! Next week Saturday, 14th December! Hosted by Dwight Gunning (@dwightgunning) passiontree.com/workshop/launch-a-landing-page/