My personal website project.
Excellent work here. The clarity with which you define your Purpose, Audience, Goals, Persona, and User Stories is thoughtful and very well defined. Your Use Case is actually a list of very well done User Stories. What we were actually looking for here was a paragraph outlining WHY, WHERE, WHEN, and with WHAT (technology) your Persona will be using the site. I find your User Stories to be very consice, clear, specific, and valuable here though.
Since Retina display devices are specifically mentioned in your Persona, I would highly recommend loading specific images for high resolution displays via CSS media queries. Especially if you plan on featuring prominent images in your design. We typically don't get around to covering this in lecture, but check the following tutorial out, and the bridge will be happy to assist! CSS Tricks - Retina Display Media Queries
Really great work here - you have a great foundation upon which to begin your design phase. Your HTML looks great, and your directory structure is perfect. Nice work - I'm looking forward to seeing your project take shape. Your Milestone 1 passes at Tier III.
Great job here defining the concept, direction, and layout of your project. Well done. The site map graphic you have up top is a bit of a hybrid between a traditional site map and a content schematic that maps out the relationships between content. A basic site map just outlines the pages to be built. You've done a great job here either way though!
I love the clarity with which you've outlined your content strategy, and your wireframes are sufficiently detailed as to provide you with an excellent guide for your development phase.
When it comes to large background images, I would aim to keep the default image less than 500kb if possible, with large enough pixel dimensions to display well on larger screens. I also encourage you to take a look at enabling a set of images for Retina/high-pixel-density displays. Have a look at the mini-tutorial we have up here.
When it comes to image galleries, there are plenty of mobile-friendly, responsive, jQuery-driven gallery plugins out there to choose from. Here are a few suggestions:
Take a look at smoothstate.js and the accompanying CSS Tricks Tutorial - this might interest you too.
I encourage you to continue with JavaScript, and have a look at jQuery too. I linked up to Codecademy's jQuery Tutorial on Slack. jQuery is a JavaScript library that is full of useful syntactic sugar that wraps up verbose JS in a layer of simple syntax. It's used all over the place to create interactive UIs. We'll be using jQuery to validate the contact forms for PWP too.
If you'd like to look ahead to what's coming next for PWP, read up on Templating Static Sites and the PWP Contact Form. These steps will come later, AFTER your layout has been created.
You're ahead of the curve here - so I encourage you to challenge yourself with your layout and design choices. Have a look at the rest of the CSS material on bootcamp-coders - we'll plan on covering some of this in class next week. Some other resources you may like are:
- The Codrops Blog
- Animate.css
- FontAwesome will have your social media icons covered.
Your Milestone 2α passes at Tier IV. Nice work. You are clear to begin development on your PWP.