Chapter 7: Create a detailed project page
Last step! Let’s build a page with more details about the Magenta Lime project.
Open up project-start.html. You should have downloaded this file in Chapter 6 as part of the image bundle. Rename this file to lime.html.
7a: Markup
Much of the markup is in place for this page, notably the header/navigation, footer, and the structure of the featured block. However, the content inside of these areas may not be marked up. Get some meaningful HTML around the content. Don't worry about how it looks.
7b: Styling the header
We'll swap out the stars image for the comet, and we'll tweak the styling to work with this image and this content.
7c: Styling the featured area
The featured area looks more than a bit odd because the figures have the styling from the home page. Learn to overcome these issues with an extra class and some crafty CSS overrides.
7d: Footer and jagged backgrounds
Finally, we need to add back our jagged background. Normally it would go on the footer. However, because the footer background image has a background-fit: cover set on it, that will also affect the jagged background. We have to put these images on separate elements to make this work. If we put the jagged background on the featured section, it doesn’t show. Instead, we’ll change the HTML to make a new section just for the jagged background inside of this footer.
7E: Tablet and mobile display
Finally, add a few appropriate media queries and overrides to get the page looking great on tablet and mobile.
🎉Congratulations!!!🎉
At this point you should have two complete web pages that link to each other, comprised of HTML, CSS, and image files. You are welcome to post these to Github Pages or another hosting platform. Continue to add portfolio items and update these pages with all of your latest accomplishments. You've done great work today!