Our first CSS-focused exercise starts you off with this generic 2-column layout (right-click on the link and “save link as” to download the HTML page into your root folder). You’ll note I’ve color-coded the backgrounds to help you figure out what IDs and tag selectors are used for the design.
Your job is to adapt what you’ve got to create something that looks like this.Yep, seriously. You can do this!
You will also need these two image files — CTRL or right-click and save them in your images folder.
A few quick tips:
-
- The DesignWerx logo can be coded into the <header> with a simple <img> tag — no need to put it into the background.
- For the borders, try to find the fewest number of border declarations you’d need to add.
- For more details on how to code borders in CSS, check out this page at the W3C Schools.
- And don’t forget to look at my code if you’re looking for help!