2015
Lynda
Justin Seeley
1:47
English

A great portfolio can make the difference between landing the job and getting passed over. This quick and fun project-based course will show you how to build a responsive portfolio site from start to finish. Staff author Justin Seeley shows how to plan the website in Photoshop and convert the plan into a single-page site. The backbone driving the portfolio will be Skeleton, an intuitive CSS framework that you'll learn how to use for your own projects. Along the way, you'll find out how to work with web fonts like Google fonts and icon fonts, how to start inserting content into containers, and how to style the look of headers, images, typography, and even social media buttons with some simple custom CSS. Add on a responsive lightbox effect and some media queries to make sure your site is ready for mobile, and you'll have a complete, high-quality platform for showcasing your work.

Introduction
Welcome
How to use exercise files
What you need to know before you begin
1. Getting Started
Planning your project
Downloading the Skeleton framework
Setting up your HTML document
Setting up and linking your CSS documents
Adding Google fonts to your project
Adding Font Awesome to your project
2. Laying the Groundwork
Understanding the Skeleton framework
Building your layout using the Skeleton grid
Inserting content into your containers
3. Styling Your Website
Building a CSS table of contents
Styling the header of your site
Defining your typography styles
Setting image-specific styles
Creating a CSS logo element
Styling social media icons
Styling the footer
4. Adding a Lightbox Effect
Downloading Magnific Popup
Linking the lightbox CSS and JavaScript files
Adding the lightbox effect to your HTML
Adding a zoom effect to the lightbox
5. Finalizing Responsiveness
Testing your website's responsiveness
Tweaking your media queries
Exploring the final project
Conclusion
Where to go from here

Download File Size:450.43 MB

---