1. Using CSS

2. From Fiddle to Web Page

3. Revisit Lab 1 1. Open COMP101 folder 2. Create lab1 folder
3. Open Komodo Edit
4. Create index.html from template
5. Adjust template
6. Open fiddle
7. Copy fiddle to body 8. Format 9. Validate with file upload 10. Upload to ISIS with Filezilla 11. Open with browser 12. Validate with URI

4. Adding CSS to the fiddle
Fork your lab1 fiddle
Change the whole body characteristics
Colors
Font Families
Centering

5. Centering
Elements such as body, div, main, header, footer can be given widths
Specific size (px): never change
Percentage of window (%): change
By default, they will be on the left edge
But you can change margins
To center, tell it to AUTOmatically compute the margin

6. Adding CSS to the fiddle
Fork your lab1 fiddle
Change the whole body characteristics
Colors
Font Families
Centering
Change the format of the list
Pseudo-element

7. PSEUDO-ELEMENTS Relate to a piece rather than all of the element
selector::pseudo-element
Style the first letter, or line, of an element
first-line
first-letter
Insert content before, or after, the content of an element
before
after

8. Post Lab 2 1. Open COMP101 folder 2. Create lab2 folder
3. Open Komodo Edit
4. Create index.html from template
5. Adjust template
6. Create CSS template
7. Create lab2.css from template
8. Open fiddle
9. Copy fiddle HTML to body of index.html
10. Format
11. Copy fiddle CSS to lab2.css
12. Validate HTML and CSS with file upload
13. Upload to ISIS with Filezilla
14. Open with browser
15. Validate HTML and CSS with URI

9. HOME PAGE

10. Creating Your Home Page
Download coursepage.html
Save as index.html in COMP101
Upload to ISIS
If lab1 and lab2 were set up correctly, you’ll be able to reach them!
And assign1…