Since learning HTML and CSS comes down to practice, I want to make sure you get as much practice as possible. So we’re going to build the portfolio page for this hypothetical website. This will not only give more practice coding, but more practice with columns which is critical to building web pages, and some exposure to optimizing images for web. The good news is that you did most of the heavy lifting in Assignment 2 when you build the home page. The challenge is that you need to figure out how to recycle your CSS.
What to do
- Build another web page for the site you began in the last assignment. Use this image.
- Using Photoshop, crop out all the images and save them as individual files. Use the “Save for Web” feature so you can experience optimizing images for the web. Make sure the width and height are appropriate to the widths of your columns. Use JPEGs for photographs, and PNGs for things like logos and flat colors. The game here is to try and get the smallest possible file size without sacrificing too much image quality. I can demo this in class, but otherwise there should be plenty of info on the web about this topic.
- Don’t start fresh, continue working from Assignment 2. Save this portfolio page as an HTML file in your folder from Assignment 2, but remember to name it using dashes instead of spaces and keep everything lowercase. So you should now have 2 HTML pages, a homepage and this portfolio page. They both should share the same CSS file.
- For the navigation on both pages, turn “what we do” into a hyperlink to portfolio page. Make the logo on both pages a hyperlink to the home page.
- Possibly all the CSS you need has already be created for the homepage. So the challenge here is not write new CSS, but to reuse and modify your CSS so it styles both pages using the same class names. This is the real benefit and power to CSS, so let’s see if you can make it happen. For example, you have 4 columns on the home page and this portfolio layout also has 4 columns, and both are styled pretty much the same. You should be able to create columns on the portfolio page by simply using class name and not writing any new CSS. I know this will be challenging for some, so bring your questions to class. It’s actually really easy once I reveal the answer.