Class Exercise 6:
Practicing CSS Positioning
Goal:
Understand and apply different CSS positioning properties (static,
relative, absolute, fixed, sticky)
Instructions:
- Unzip the folder to get started.
Setup your Files:
-
Open your “Week 3” folder and drag the files from the “starter_code”
folder into your “Week 3” folder.
-
Open your “CE06” folder and open the CSS file named “styles.css”.
Follow along:
-
We will be adjusting the styles so that our website looks like this
site.
Viewing Your Web Page:
-
Run Your Project with Live Server:
-
Right-click on your “CE06.html” file and select “Open with Live
Server”.
- This will open your web page in your default browser.
- You should now see your custom-styled web page.
-
Run Your Project with Live Preview:
-
Right-click on your “CE06.html” file and select “Show Preview”.
-
This will open your web page in a tab in VS Code next to your
HTML file.