The Portfolio
For this project you will be designing and creating a website to communicate the essence of "you" to put on display for the world wide-web and most importantly future employers or clients.
Part 1: The Design
The portfolio you are designing is about you! You are trying to showcase you and your talents. Your website can have multiple pages or one page but it must be responsive.
The Requirements
- A Logo
- About Information
- A paragraph about you, your passions, your goals, etc...
- Any work experience you have
- Any school information
- Any achievements, awards, certificates, etc...
- Don't be afraid to show a little personality
- Gallery/Collection of your work images, projects, recordings, etc
- Contact Information
- Phone, email, carrier pigeon... how will someone get in touch with you?
- Mobile and Desktop website design
The Tools
- Adobe Illustrator or Canva (only paid canva can export svgs) to create the logo
- Adobe Illustrator, Photoshop, InDesign, Gimp, or Canva to design the website
- Canvas Discussion to get feedback and submit your assignment
Part 2: The Code
Attempt to recreate your design with HTML and CSS. Plan out the HTML container you will need to make your design transition from mobile to desktop.
The Requirments
- Setup for the files
- Add a favicon to your website
- Your site must look good on multiple screen widths
- Your site must be deployed using GitHub pages (instructions in second part of file setup)
- After deploying take a screenshot of your homepage. Go to this Padlet discussion and change "Your Name" to your name, upload the screenshot, and paste a link to your website where it says "Write something fantastic".
The Hints
Mobile First
For the portfolio it is recommended to use the mobile first model. What this means is you will code and style your website in mobile format first. When you get to the point of CSS coding make your browser window as narrow as possible before adding any CSS. Once your website looks great a narrow size, make the screen wider. Once your CSS no longer looks good, add a media query for that screen size.
Hint: If you use the inspector tool while resizing the screen size, it will tell you the pixel width.