Coding Boot Camp Week 2

Veröffentlicht am: 21 Oktober 2018
auf dem Kanal: calm chess

This Video Is Best When Viewed Full Screen.

Week 2 Coding Boot Camp

Objective: Learn CSS3 Box Model and CSS3 Grid.

1)Modify week 1 firstpage.html to include CSS3 box model using CSS3 grid.

2)Learn terminology (CSS3 box model, CSS3 grid, attribute, HTML5 CSS3 class attribute, HTML5 CSS3 id attribute).

3)download and install a on screen pixel ruler.

4)Practice using pixel ruler to measure screen width and height and other boxes on screen.

5)Create boxes that have a height and width and 1px border for HTML5 header element, HTML5 nav element, HTML5 main content element and HTML5 footer element.

6)Create a folder called bak0 within the webdev folder to periodically keep backup copies of your web pages.

Search terms:

Attribute.
On screen pixel ruler.
CSS3 box model.
CSS3 border attributes.
CSS3 grid
CSS3 width
CSS3 height
CSS3 margin
CSS3 grid column
CSS3 grid row
CSS3 grid fractions
unit of measurement in pixels
length in pixels
HTML5 div Element
increment
decrement

Tasks:

Periodically backup firstpage0.html to bak0 folder. Increment the zero on the end of firstpage0.html for each copy.

Create a box for the header element usng CSS3 grid that is 100% of the screen width and has a height of 100 pixels with a 1px solid blue border. Using a pixel ruler and pixels as the unit of measurement.

Create a box for the nav element using CSS3 grid that is 100% of the screen width and has a height of 50 pixels with a 1px solid red border. Using a pixel ruler and pixels as the unit of measurement.

Create a box for the main content element using CSS3 grid that is 500-600 pixels by 500-600 pixels with a 1px solid green border. Use CSS3 grid to place the box to approx. center of the screen.

Create a box for the footer element using CSS3 grid that is 100% of the screen width and has a height of 75 pixels with a 1px solid purple border. Using a pixel ruler and pixels as the unit of measurement.

Notes:
There should be 16 columns and 4 rows.

A lot of your beginning CSS3 Grid layouts will be trial and error. Make a small change to the code then test it in the browser.

Use your pixel ruler to measure the box and to place it in approx. the center of the screen.

If you want things to be what is called pixel perfect you can change the grid values until everything is symmetrical. I suggest you do this as an exercise after you are comfortable with grid.

This concludes week 2 of boot camp.

sound by: http://www.bensound.com

Auf dieser Seite können Sie das Online-Video Coding Boot Camp Week 2 mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer calm chess 21 Oktober 2018 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 13 Mal angesehen und es wurde von 0 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

6,908