portfolio-blog

Lab: Build a Website Using HTML/CSS

Introduction

Description

Imagine it's 13 months from now, and you've started taking on work as a freelance developer. So far, you've done work for (imaginary) companies like Relaxr, Startup Matchmaker, and Citipix, and you want to showcase the web apps and landing pages you've built. Take what you've learned in class and in the pre-work, and build a portfolio site with HTML and simple CSS that showcases your hard work.

Create two pages — an "about page" and a "portfolio" — that link to one another. Your "about page" should describe your mission and value proposition, and your "portfolio" should include screenshots with descriptions of the work you've done for the companies mentioned above. Don't worry if you can't come up with any text for the pages — we've provided you with some sample copy.

Requirements

• Link both pages together using an a tag.
• Use a unique title and a single unique h1 tag.
• Show images using img tags, including unique alt attributes.
• Use an external CSS style sheet to style your pages.
• Select at least five elements on the page, and apply at least five different CSS properties to them (font-size, color, font-family, background, text-decoration).
• Use at least six different HTML tags on your pages (h1, h2, h3, h4, h5, h6, p, ul, ol, a, img).
• Follow naming conventions, maintaining consistency across your .html and .css files.
• Indent nested elements to increase your code's readability.

Bonus

• Experiment by adding additional HTML tags and CSS properties we did not cover in class — explore!

Starter Code

There is no starter code for this assignment, only starter text. You'll build this site from scratch and should feel free to get creative with its layout, color, styling, etc.

Deliverable

Here are examples of simple "about" and "portfolio" pages that fulfill the assignment requirements:

• Joe, the freelance developer's "about page:"

• Joe, the freelance developer's "portfolio page:"

Additional Resources

• MDN Docs on CSS and HTML.

Self Evaluation

Considering this exercise, rate your progress on a scale of 1-5 (5 being the highest) for the following criteria:

• Persistence: Do you handle frustration well? Do you independently pursue understanding?
• Organization: Do you thoughtfully implement best coding patterns and practices?
• Collaboration: Do you make an effort to solve problems and share your ideas with others?
• Communication: Do you clearly convey your thoughts to others in illustrative and clear ways?
• Self-Compassion: Do you try to turn failures into learning opportunities?
• Resourcefulness: Do you make an effort to compare and contrast new ideas with ones you already know?