Intro to Web Development Nesting Elements

Create Web Page with Nested <div> Elements

<div> "division" HTML element Rectangle can Contain Anything

Example <div> Element Code

Nested <div> Elements

<div> Element with Gold Background Using CSS Code

Gold "Stuff 1" <div>

Step 1: Start with nested.html Go to Web Development Course: www.ScottsDevelopers.com/intro-to-web-development Open nesting.html PC View source code ctrl - u Select All ctrl - a Copy ctrl - c

Step 1: Start with nested.html Go to Web Development Course: www.ScottsDevelopers.com/intro-to-web-development Open nesting.html Mac View source code Select All Copy a c

Step 2: Paste into Atom Start Atom Create New File (File > New File) PC Paste into Atom (ctrl-v) Save to Desktop (ctrl-c) as nesting.html

Step 2: Paste into Atom Start Atom Create New File (File > New File) Mac Paste into Atom ( ) Save to Desktop ( ) as nesting.html v s

Step 3: Open in Chrome

Step 4: Nest Gold "Stuff1" <div> In Aqua <div>

Step 4: Nest Gold "Stuff1" <div> In Aqua <div>

Step 4: Nest Gold "Stuff1" <div> In Aqua <div>

Step 4: Nest Gold "Stuff 1" div> In Aqua <div>

Step 5: Create Nested <div> Page

Hint Colors Used are "aqua" "gold" "pink"