Coding Boot Camp Week 3
This Video Is Best When Viewed Full Screen
Week 3 Coding Boot Camp
Objective: Populate CSS3 box model created in week 2 with images.
1) Modify week 2 firstpage0.html to populate the header, nav, main content,footer with images you create/modify with GIMP.
2) Learn terminology (GIMP scale image, GIMP border, GIMP text, CSS3 background-image).
3) Create a header image using GIMP and your pixel ruler to rescale an image that fills the HTML5 header element.
4) Create 4 images with borders to be used as navigation buttons to other parts of our site if we had multiple pages.
5) Create a main content image using GIMP and the pixel ruler that fills the main content area.
Search terms:
CSS3 background-image
Uniform Resource Indicator (URL)
HTML5 image tag
HTML5 image tag source(src) attribute.
CSS3 display
Review HTML5 div tag
Resolution
Width
Height
image file extension
PNG
Tasks:
Periodically backup firstpage0.html to bak0 folder. Renameing the backup to firstpage2.html.
Use Gimp and pixel ruler to resize a image to fill the HTML5 Header Element.
Use Gimp to create 4 square images with borders to be used as buttons. Export the images from GIMP with the file extension .png, saving in webdev folder. Create 4 HTML5 div elements within the HTML5 nav tag. Position the buttons approx. in the center of the nav element.
Use Gimp and pixel ruler to resize a image to fill the main content div element.
Notes:
I'm using filled rectangles as my images for simplicities sake.Use any images you like.
Spend a full week resizing and messing with values for this page saving a backup of each new page you create.
Continue modifying this page you need a lot of exsperience with GIMP and CSS3 Grid to be successful.
This concludes week 3 of boot camp.
Sound by : http://www.bensound.com
In questa pagina del sito puoi guardare il video online Coding Boot Camp Week 3 della durata di ore minuti seconda in buona qualità , che l'utente ha caricato calm chess 21 ottobre 2018, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 8 volte e gli è piaciuto 0 spettatori. Buona visione!
