Link to final exam: https://www.dropbox.com/s/onodglt2tqb7r6z/Web1%20-%20Final%20Exam.zip?dl=0
HOMEWORK — Portfolio Web Site Design
Web Design 1 Templates
Link to Template Files: https://adobe.ly/2Ibf8J0
ASSIGNMENT
Create a mockup in Photoshop of your Portfolio website.
You can use the link to these PSD templates. Each template has a screen shot of one of the existing pages of the template we uploaded in class as a background image. There are also layer groups with shape layers in them that you can use to create masks for your images. Each template is set up on a 12 column grid system, which is included as guidelines in the Photoshop file. The background images and shape layers are just there as reference. You can update, and change the design however you like. So if you want to have two columns instead of three on one page do it. Just extend your graphics and text layers so that they stretch across more columns.
COLOR SCHEME DEVELOPMENT
You should also use the photoshop mockup to plan your color scheme. You can develop color schemes in app using the Adobe Color Scheme panel. Check-out Window>Extensions>Adobe Color Schemes. Note: Just about every Adobe application has this same panel.
Or use websites like:
Adobe Color: color.adobe.com
Paletton: www.paletton.com
FONT SELECTION
Typography can make or break a website. A very good place to find fonts for your portfolio project is Google Fonts: fonts.google.com
You can download fonts for your mockup and I’ll show you how to integrate them into your site in our next class.
Front-End Developer Handbook 2018
Front-End Developer Handbook 2018
Written by Cody Lindley
This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018.
Mid-Term Exam
Click to download your test.
Download the exam, complete it and email it back to me at thepixelsmith@gmail.com
Articles on Resume Design
Articles on Resume Design
How to create the perfect design resumé
With designers fighting it out for every job that comes along, it’s important that you stand out from the crowd. Whether you’re just starting out or an old hand applying for a better position, your CV needs to be first rate for you to stand a chance of getting an interview.
https://www.creativebloq.com/career/design-resume-tips-11121145
50 Inspiring Resume Designs: And What You Can Learn From Them
It can make or break job applications, open doors to new careers, make a great (or dismal) first impression. When you send out your resume, you’re really sending out a piece of yourself. So make sure it’s representing you to your best advantage. Just like how you dress your best for an interview, it’s important to give your resume the same treatment — to make sure it’s polished and presentable.
https://www.canva.com/learn/50-inspiring-resume-designs/
26 Graphic Design Resume Tips for Landing Your Dream Job
When it comes to creating resumes, graphic designers are lucky. Not many fields allow for potential employees to directly demonstrate their work-related skills with the resume itself. Pastry chefs don’t get to bake their resumes into a cake, teachers can’t assign their resumes as homework, and lawyers aren’t given the chance to defend their resumes to a jury.
https://www.companyfolders.com/blog/graphic-design-resume-tips-examples
Web 1 Portfolio Template
Saving Files for the Web
Saving Files for the Web
Homework #3 – Advanced Layout
This homework reviews the work from our last class when we created a layout that included multiple columns and images.
Homework 3 – Advanced Layout
https://codepen.io/thepixelsmith/pen/GxZMLZ
As usual the instructions can be found in the CSS pane.
Supplemental Reading
If you are having trouble remembering how to create multi-column layouts on the web. This page, which is a complete guide to using the flexbox (flexible box model) may be of some help.
A Complete Guide to Flexbox
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the differnet possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
Supplemental Reading
If you are having trouble with the homework. This article/tutorial on the HTML 5 Layout elements may be helpful to you.
HTML Layouts
Websites often display content in multiple columns (like a magazine or newspaper). HTML5 offers new semantic elements that define the different parts of a web page