Learn how to build a responsive portfolio site to showcase your art, photography, writing, or other content with HTML, CSS, jQuery, and some easy-to-use frameworks.
- [Voiceover] Hi there, and welcome to building a responsive portfolio site. My name is Justin Seeley, and I'm a staff author at Lynda.com In this course, we'll be going through a responsive web design project together. Building a portfolio website for our fictional photographer, Amy McAdams. We'll start off by planning our project in Photoshop using guide layouts. And from there, we'll move onto converting that PSD document into an actual single page website. The backbone of our website is the skeleton CSS framework, which is a responsive grid system that allows for quick and easy layouts.
I'll show you were to download it, and how to work with it, so that you're comfortable using it in your own projects as well. We'll also be covering things like adding Google web fonts to your project, working with the icon font, font awesome. And we'll be adding a neat Lightbox effect to our images that is totally responsive as well. Finally, we'll wrap things up by tacking on a few media queries to ensure our content looks great across all mobile and tablet devices. This is going to be a quick, but fun course, and I'm really excited to get started with you, so if you're ready, let's begin building a responsive portfolio site.
Released
6/22/2015- Planning and setting up an HTML layout
- Creating responsive CSS grids
- Incorporating web and icon fonts
- Building a layout with the Skeleton grid
- Styling the website
- Using jQuery for simple lightbox effects
- Testing a website's responsiveness
- Adjusting media queries
Share this video
Embed this video
Video: Welcome