PSD to HTML 4.1) Reviewing the Photoshop Files

Previous: PSD to HTML 3.15)  Styling the Footer Content

Next: PSD to HTML 4.2) Our First Media Query

PSD to HTML Complete Course

Transcription of PSD to HTML 4.1) Reviewing the Photoshop Files

hello and welcome back to the PSD to HTML responsive portfolio build now thatwe finished building out our website in HTML and CSS we’re going to take it tothe next level and make it responsive so that as we resize it downwards it willchange in a way that makes sense instead of just collapsing these columns untilthey no longer look we’re going to change the way they look also you’ll seeour navigation kind of breaks down once we get to a certain break point here andonce we get below 900 pixels a lot of the content just jumps up against theedge of the stage which doesn’t look very good in our portfolio section downhere starts breaking also are further content doesn’t look too high and itactually starts to get pretty cluttered once we get down to these smaller sizesso luckily we already have a design for that we jump into Photoshop and take alook at our original design we can see our site as it looks now and I think wedid a pretty good job of capturing what was in the Photoshop file but let’s jumpover to this other file responsive portfolio small which you can find inyour project files folder and this is what we want the site to look like anysmaller size so it’s just a couple of small changes it’s a little simpler thanyou might think it would be the tricky part is going to be the menu at the topbut other than that it’s going to be fairly simple so a few things change ourmenu has disappeared and didn’t replace with this menu icon our feature sectioninstead of having three columns is now stacked on top of each other and itlooks like we now have three different images for a background images whereasin the full-size version we just had one image however we didn’t change thenumber of images being displayed here instead we’re simply going to take awaythe background image for the unordered list itself and then set that samebackground imageas the background for each of our list items and then just position thatbackground image differently in each list item so it gives it a little bit ofvariety and then as we scroll down we can see the portfolio section haschanged the sizes of these columns are no wider than more rectangular than theywere before and it looks pretty good so then the water finally at the bottominstead of having three columns is now just stacked and that’s what it’s goingto look like in a mobile browser so in the next video will get started stylingall of this appropriately