Learn CSS From Scratch - Part 2


Published on

Part 1 can be found here: http://www.slideshare.net/ecobold/learn-css-from-scratch

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • We are following the book “CSS: The Missing Manual” by David Sawyer McFarland Buy the print version here: http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447 Buy and download the ebook version here: http://www.ebooks.com/536649/css-the-missing-manual/mcfarland-david/ Before starting, watch this great CSS Beginners tutorial: http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/ This presentation is targeted towards chapter 4-6 which you should’ve read and done the tutorial by now You should also download http://aptana.com/ to work on your files and the tutorials
  • For more read: http://www.impressivewebs.com/difference-class-id-css/
  • Learn CSS From Scratch - Part 2

    1. 1. Welcome!Learning CSS From Scratch – Part 2 @steffbold
    2. 2. Let’s do something from scratch• Create a new folder called EAD on your workspace• Download the image on this file: http://tinyurl.com/btoxujl (make sure it goes inside a folder called images)• Download the index.html file (or copy and paste the code on a new index.html file you create)4. Create an external css file (called style.css) on your editor (mine is Aptana) save them under EAD folder• By now you should have inside your EAD folder: - index.html (with some code on it) - style.css (without any code on it) - images folder with 1 image
    3. 3. <html><head> <title>Engagement and Wedding Films in California Silicon Valley by EAD Productions</title> <link href="style.css" rel="stylesheet" type="text/css"></head> <body> <div> <h1>Engagement Films & Wedding Films</h1> <h2>Interview Style Love Story</h2> <p>Below is a sample of a Hollywood interview style video, for the couple whod love to keep verbal memories</p> <h2>Music Video Style Love Story</h2> <p>Below is a sample of a Music Video style, for the couple who wants a more romantic video</p> </div> <div> <ul> <li><a href="http://eadfilms.com/aboutus.html" title="about us">about us</a></li> <li><a href="http://eadfilms.com/services.html" title="services">services</a></li> <li><a href="http://eadfilms.com/prices.html" title="prices">prices</a></li> <li><a href="http://eadfilms.com/links.html" title="links">links</a></li> <li><a href="mailto:s@eadfilms.com" title="contact us">contact us</a></li> </ul> </div> <p>Copyright 2012 EAD Films. All Rights Reserved.</p> </body></html>
    4. 4. Point your index.html file to your style.css file:<link href="style.css" rel="stylesheet" type="text/css" />between </title> and </head>1. On CSS file: add image to the <body> & style it style h1 style h2 style p• On HTML file: add “page-wrap” On CSS file: style #page-wrap
    5. 5. 3. On HTML file: add “footer” On CSS file: style #footer style #footer ul style #footer li style #footer li a style #footer li a:hover• On HTML file: add class=“copyright” On CSS file: style .copyright• On HTML file: add a link to h2 On CSS file: style h2 a style h2 a:hover
    6. 6. Start a free server on Google App Engine1. Go to http://python.org/download/2. Download python for your computer (Mac, Windows – check which version you have!)3. Go here: https://developers.google.com/appengine/4. Click “Downloads” on the L side5. Download SDK for Python
    7. 7. 6. Sign up: https://developers.google.com/appengine/7. Create your domain name:8. Go to your dashboard
    8. 8. 9. Double click on the App Engine on your Desktop:10. File / New Application• Name your application 8080 is the port that’s under• Click “Run”13. On your browser go to http://localhost:8080/14. It should say “Hello world!”
    9. 9. Now let’s change that file to say “Hello CSS Group”3. Go to the location where you created the file Mine is under this path: Users/steffany/learncssyou
    10. 10. 1. Open main.py with your text editor2. Find “Hello World” and change it to “Hello CSS Group”3. Save it4. Go back to localhost:8080 on your browser and refresh the page, you should see the changes thereNow let’s deploy it to go live!8. Go to GoogleAppEngineLauncher on your Desktop9. Click Deploy The name of the app you created goes here14. When it’s done, go to http://learncssyou.appspot.com/
    11. 11. if: if:You’re free to go! Raise your hand
    12. 12. Additional Learning ResourcesFree CS101 online class: https://www.coursera.org/course/cs101Free CS253 online class:http://www.udacity.com/overview/Course/cs253/CourseRev/apr2012
    13. 13. Class and IDfor any tags you can make a classclass can be repeated<p class=“copyright”>the most specific rule overulescss should be.copyrightid is for one specific element, it is unique and cannot be repeated<div id=“banner”>css should be#banner what would CSS look like for this class?<div class="photo"><img src="holidays.jpg"alt="Penguins getting frisky"/><p>Mom, dad and me on our yearly trip to Antarctica.</p></div> Demo with validator.w3.org the difference between id and class