Build a Website using HTML/CSS Lab

Intro

Imagine it's 13 months from now, and you've started taking on work as a freelance developer. You're obviously renowned for the (imaginary) work you did on Relaxr, as well as some work you don't remember doing for Citipix and Startup Matchmaker. You now want to showcase your work in a personal portfolio. Take what you've learned from class and the prework to build a portfolio site, using HTML and simple CSS, that showcases your hard work from the past three days.

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 that you can use.

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 stylesheet to style your pages
• Select at least 5 elements on the page and apply at least 5 different css properties (font-size, color, font-family, background, text-decoration, etc.) to these elements
• Use at least 6 different HTML tags (such as h1, h2, h3, h4, h5, h6, p, ul, ol, a, img) on your pages
• Follow naming conventions, maintain 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're going to build this assignment from scratch and should feel free to get creative with regard to layout, color, styling, etc.

Deliverable

Here are examples of a simple "About" and "Portfolio" page 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

During the previous 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 make productive use of turning failures into learning opportunities?
• Resourcefulness: Do make an effort to compare and contrast new ideas with ones you already know?

Licensing

All content is licensed under a CC­BY­NC­SA 4.0 license. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].