Unit03 Portfolio

Overview

You will build a personal portfolio page that will lind to all other asignments from this class. You will use "Test Driven Development" to build this page.

Vocabulary

Minification

Minification is the process of minimizing code and markup in your web pages and script files. Removing hard returns, comments, extra spaces etc. It’s one of the many methods used to speed up download time on a websites. Minification slightly improves site speed and accessibility which can improve the user experience.

Test Driven Development

TDD is a software development process relying on software requirements being converted to test cases before a page is created.

Tools

• Download my personal collection of Social Media SVG icons

Objectives

At the end of this module, you should be able to...

• Create a single page site
• Practice Test Driven Development
• Use CSS view height
• Implement CSS scroll behavior
• Practice using CSS custom proprieties variables
• Implement the getFullYear method
• Practice using const block-scoped variables
• Use console log method to debug problems

Tasks

• Build and deploy your own portfolio
• Download the start file for this unit.
• Download and link this minified test file.

Watch

• Unit Lectures
• Watch 1720_03a Personal Portfolio Overview
• Watch 1720_03b Solving Test Driven Development
• Watch 1720_03c Solving Navigation
• Watch 1720_03d Solving Variables
• Watch 1720_03e Solving Progressive Enhancement
• Watch 1720_03f Solving Projects
• Watch 1720_03g Solving Contact
• Watch 1720_03h Wrapup

Reflection Questions

• Describe the relative importance of a resume and a portfolio to get a great job.

Assignment Example

• View the small screen version
• View the medium screen version
• View the large screen version

Assignment Checklist

Unit03 Portfolio (10 pts)

Please build a home page and upload it to GitHub. This page will contain the following items.

Test Driven

You will be building this page to meet preset criteria.

• Download the "minified test file" and place it in your "js" folder"
• Add this line just above your closing body tag to link to the minified test file. <script src="js/test-dev.min.js"></script>

Navigation

We will use a within page fixed navigation for this assignment.

• The navigation bar will be fixed to the top of the screen.
• The navigation bar will contain three within page links (About, Projects, Contact)

The About section

Your name and work goal

• Center your name on the page
• Below that put your desired work goal
• This section should be 100 percent of the view height

The Projects section

This is where you show icons for all the projects for this class.

• Use flex to create a responsive set of 4-6 linked icons
• Use a figure tag and figcaption to create these cards
• Icons should be about 300px wide and tall
• This section should be a min-height of 100 percent of the view height

The Contact section

Social links

• Show 4 social media links
• Icons should drop down a bit on hover
• Use SVG icons for these icons

The Footer section

Your footer should contain

• Include a copyright entity and your name
• Include a bullet entity and the assignemnt name
• Use JavaScript to iinsert the year
• Use an externally linked JS file

Overall Page Requirements

Your page needs to meet these requirements

• Link to a normailze.css file (this creates a common starting point for all browsers)
• Link to a small.css file
• Link to a medium.css file
• Link to a large.css file
• Link to an external Google Font of your choice
• Media Queries are included in the medium and large css files
• Demonstrate the design principles of Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Upload your assignemnt to GitHub
• Change your repository to private
• Publish the GitHub repository to Netlify using the name that they provide

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail