Learn CSS From Scratch - Part 2

Welcome!
Learning CSS From Scratch – Part 2

@steffbold

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

<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 who'd 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>

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

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

Start a free server on Google App Engine

1. 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 side
5. Download SDK for Python

6. Sign up: https://developers.google.com/appengine/
7. Create your domain name:

8. Go to your dashboard

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!”

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

1. Open main.py with your text editor
2. Find “Hello World” and change it to “Hello CSS Group”
3. Save it
4. Go back to localhost:8080 on your browser and refresh the
page, you should see the changes there

Now let’s deploy it to go live!

8. Go to GoogleAppEngineLauncher on your Desktop
9. Click Deploy

The name of the app you created goes here

14. When it’s done, go to http://learncssyou.appspot.com/

if: if:

You’re free to go! Raise your hand

Additional Learning Resources

Free CS101 online class: https://www.coursera.org/course/cs101
Free CS253 online class:
http://www.udacity.com/overview/Course/cs253/CourseRev/apr2012

Class and ID
for any tags you can make a class
class can be repeated
<p class=“copyright”>
the most specific rule overules
css should be
.copyright

id 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

Learn CSS From Scratch - Part 2

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (18)

Más de ecobold

Más de ecobold (10)

Último

Último (20)

Learn CSS From Scratch - Part 2

Notas del editor