PSD to HTML 2.4) Structuring the Portfolio Samples

Previous: PSD to HTML 2.3) Structuring the Feature Section

Next: PSD to HTML 2.5) Structuring the Footer

PSD to HTML Complete Course

Transcription of PSD to HTML 2.4) Structuring the Portfolio Samples

hello and welcome back to the PSD to HTML responsive portfolio build now that we finished our never had her and her feature section we’re gonna move on tothe next couple sections were going chillin at xfer designed services whichis going to be pretty simple and then we’re going to start setting up theportfolio section and then in the next video will move forward actuallycreating our portfolio pieces so let’s start with our Design Services sectionyou you’ll see we have some dummy text here and I’m just going to jump intothat text field T to switch to the text tool in Photoshop and then we can justhighlight all of that text you can copy it to my clipboard and then once we getto that section will just paste it so let’s jump into text me now and if welook at finder you’ll see that this time I’ve already copied the site threefolder and made it into a new folder cults 804 so if your phone along withyour own files we’re starting with the files that we ended within the site 03folder and all of the changes we make in this lesson will be saved in the site 04folder already got her side 04 folder opened up here so now we can startmaking those changes so here we have our section with a class of feature in thatruns all the way down to here now if you want to make yourreached him a little more legible we can put a comment here after are closingsection tag here and say end of feature section or if you wanna keep it simplewe can just say feature here and we know that we’re closing the section with aclass of feature so once we get past that section we have another sectionwhich is just some simple text and someone put this inside an article tagand or an articleelement excuse me and we’ll give that article in class of body text and willalso get a class of containers remember that container classes going to keep allof our content here within a specified with now this particular section we lookat it in Photoshop this particular section doesn’t have a backgroundextending to the edges because the main background color four pages gonna bewhite so we don’t have to worry about creating another containing element toextend to the ends of the of the browser window instead we can just have thiscontainer element and that’ll be enough so it seemed back into our code and wehave our opening article tag here with the class of body i can text in anotherclass of container will skip a couple lines and power closing article tag hereand then inside that articlewe’re going to have an h2 tag with the title which is going to be designservices and then we’ll close or h2 tag and then we’ll have a paragraph with allof the texts we already copied from a Photoshop files will just take commandof your control via a PC to paste that content and then are closing paragraphtag to close that up so that’s all we need for that article section then we’regonna jump on to our next section which we’re gonna put in a section element andlet’s give this a class portfolio samples because that’s what this sectionis going to contain so let’s get a couple lines are closing section tag andlet’s go ahead and put a comment here that says portfolio samples were gonnahave a lot of content inside the section you want to make sure we know what thisparticular closing section tag is closing so again for this particularsection we do have a background that’s going to extend to the ends of thebrowser to the left and rightengines so we need that initial section element and that initial section elementwill extend to the ends will have a width of 100%and then inside this section element or put all of our content here inside ablock with a class of container to keep it within that specified with so insidethe section element here we’re going to create a div with a class of containerand we’re going to skip the polenta better closing day of there as well andthen inside that if we’re gonna have our portfolio samples and we’re going tostart with the title for this section which is portfolio so we’ll just putthat inside an h2 tag and then we’ll have an unordered list with her foritems and it’s so again this is basically a list of portfolio sampleswhich is why I’m putting it in an unordered list you could put these inseparate deals if you preferred but I’m gonna use an unordered list like we areyou mentioned so will jump back over here and I’ll create the unordered listand I’m gonna give this a class of portfolio to put quotation marks aroundtheir portfolio hyphen list so then asked if a couple lines put our closingunordered lists tagged and then we’ll have four different list items so it’screating the list items here each one of them different class because we’re gonnahave to style them separately so give this one a glass of port hyphen laptopshas again if we look at our content that’s what’s going to be in thebackground and so-called port hyphen laptops and inside that section willhave some contents will skip couple lines and closing Li tags there and sowill have two items basically we’re going to have a background image andthen we’re going to have this little caption at the bottom so I want to setup our background image in CSS and the reason for that is I want has weary sizeour browser I want these portfolio items to grow and shrink with it in as itgrows in shrink its going to the grows I should say it’s gonna reveal more of thebackgroundimage that’s inside that item so we’re gonna set that image of as a backgroundimage and then we’ll have a caption down here at the bottom which is going tohave some text and icon the small icon so come back to our code inside thislist item we’re gonna create a span and I’m gonna put our caption inside thespan so we’re gonna give it a class of caption skip a couple lines and put ourspan now span is usually an inline element but we’re gonna make it a blockelement and we’ll talk about what that means later on if you’re not sure butwe’re gonna put all of our caption content inside this band so it’s goingto be a link that’s going to contain text and are small icon so we’ll createour link here and again we’ll just linked to the current page and thenwe’ll put some dummy text in here so lorem ipsum dolor etc and we’ll put ourclosing anchor text here and then we’ll have an image so for our first vote skipthis image of class and we’ll call it simple icon that will be easy to targetthese icons in CSS to position them where we need them and then we’ll giveit resource so we’re gonna put it in her images folder and this is just a smallversion of our web design icon so we’ll call it web hyphens small and since itneeds that transparent background again we’re going to get a PNG file their egoand then we’ll put our closing anchor text there and we can extend this out alittle bit if you wanna see all of thatlet’s make this section here a little smaller so we can extend this content alittle bit and every governor can see the whole life CNN anchor tag and insidethe Intertek we have some text and image and we’ll talk about how to style thatlater on before announced just highlight that list item copy it and paste itthree times so our second item is going to have an acne logo on its all callthis pointAcmeand spans gonna have the same class of caption will go and leave the same textand their friend Alan will just changed the icon here let’s say this is anexample of graphic design so-called that graphic small that P&G and there goesour third section is going to be immediate demo reel for our videoproduction so we’ll call this porch demo reel in again port is short forportfolio and this is going to be an example of video works will use thevideo production icon and will use the small version of it which is going to becalled video small that P&G will come down to the last item here and we’llcall it port logo because it will be a logo design and we have her text andimage which is gonna be another example of graphic design so used to graphicdesign the graphics small image here as well so that takes care of our portfoliosection I thought we were gonna break this up into two videos but but wemanaged to work into one video just fine so in the next video will move on to thefather of our document and then once we’re done with our Father will be ableto jump into CSS and start styling everything so let’s make sure all of ourphones are saved and we’ll move on to the next video thank you for watching