Lesson 02

313 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
313
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 02

  1. 1. Front-End Web Development Lesson 2
  2. 2. Agenda ● HTML Basics Review ● Images ● Intro To CSS ○ Link Tag ○ Colors ○ Fonts ● Linking To Other Pages ● Lab Time
  3. 3. HTML Basics Review View template.txt <h1></h1> <p></p> <a href=””></a> <ul> <li></li> </ul>
  4. 4. HTML Basics > Images The img tag requires the src attribute, which tells the browser where to find the image to be placed. The alt attribute is a best practice. <img src=”logo.png” alt=”alternate text” />
  5. 5. HTML Basics > Images
  6. 6. HTML Basics > Images relative vs. absolute paths vs. full URL <img src=”images/logo.png” alt=”” /> <img src=”/images/logo.png” alt=””> <img src=”http://keebla.com/images/logo.jpg” alt=”” />
  7. 7. HTML Basics > Images alt attribute <img src=”logo.png” alt=”alternate text” /> ~ file not found ~ screen readers ~ validation (best practice)
  8. 8. HTML Basics > Images Three main image file formats” .gif (“It’s pronounced ‘JIF’”) .jpg (.jpeg) .png
  9. 9. HTML Basics > Images .jpg ~ no transparency ~ can be stored at different compression levels ~ varying amounts of "lossy-ness" ~ typically the best format for photos ~ balance between photo quality and file size
  10. 10. HTML Basics > Images .gif ~ supports transparency ~ ideal for logos, icons, tiles backgrounds
  11. 11. HTML Basics > Images .png ~ supports transparency ~ ideal for logos, icons, tiles backgrounds ~ preferable to .gif format
  12. 12. Intro to CSS
  13. 13. Intro to CSS Where does CSS go? ~ inline (within the tags) ~ in the <head> (embedded) ~ in a separate file (external) *** *** best practice (Why?)
  14. 14. Intro to CSS Separate File <link rel=”stylesheet” href=”style.css” />
  15. 15. Intro to CSS Inside style.css ... p{ color: red; font-weight: bold; }
  16. 16. Intro to CSS Colors can be specified in several ways. ~ keyword ~ hex codes ~ rgb ~ rgba ~ hsl ~ hsla
  17. 17. Intro to CSS Keyword Colors *** ~ red ~ green ~ blue *** google a list (css keyword colors)
  18. 18. Intro to CSS Hex Colors
  19. 19. Intro to CSS Hex Colors (BASE 16) 0123456789ABCDEF #FFFFFF (white) -- “blinded by the light” #000000 (black) -- “absence of light”
  20. 20. Intro to CSS RGB Color Values rgb(0,0,0) ~ each value can range from 0 to 255 ~ 00 to FF in base 16
  21. 21. Intro to CSS RGB Color Values rgb(0,0,0) -- black rgb(255, 255, 255) -- white rgb(255, 0, 0) -- red green? blue?
  22. 22. Intro to CSS RGBa Color Values ~ fourth value is called alpha ~ value between 0 and 1 ~ used to determine a color’s opacity 0 = completely transparent 1 = completely solid
  23. 23. Intro to CSS RGBa Color Values rgba(0, 0, 0, .25) ~ black at 25% opacity rgba(255, 255, 255, .80) ~ white at 80% opacity
  24. 24. Intro to CSS HSL and HSLa Color Values ~ Hue ~ Saturation ~ Lightness Explanation at W3Schools HSL Color Picker
  25. 25. Code Along Wendy G. Bite ~ About Me ~ Resume
  26. 26. Homework Assignment: Create a two-page personal website ~ About Me ~ Resume Videos: How the Internet Works video Don’t Fear the Internet video

×