Transcription of PSD to HTML 2.3) Structuring the Feature Section
hello and welcome back to the PSD to HTML responsive portfolio build now that we’ve gotten our navigation items set up in HTML we’re gonna move on to the restof the header of our document which is just some simple text which is halfwaydone already but again we can see our site as is renowned as we mentionedbefore we do have a few broken images here the images haven’t been created yetand we’re not going to create them just yet because they are white imagesanyways so if we were to look at them right now we wouldn’t be able to seethem on the page they would just blend in with the white background so we’renot going to worry about the images until we start styling were page lateron right now we’re just concern yourself with the structure so now we’re gonnamove on to the next section are header let’s jump into was first let’s go tofind and create a new folder here 403 saudis copy signed through two and pasteit and remediate03 so we’re currently working with the files that we ended within the lastvideo which are contained in the same 02 folder and all the changes we make inthis video will be saved in the site 03 folder so I’m gonna drink 603 down tothe TextMate icon and then will close its already been closedcheck that out here we go close the same 02 folder as we know under need that its802 index HTML file and then we’ll open up index study gmail foresight 03 sohere we see all the changes we’ve already made and shipped back intoPhotoshop file and we have our design portfolio page here are better hereexcuse me and then below that we’re going to create a sub header for that sodesign solutions for your businessjumped back into HTML when entering text in we have our h1 tag here and then justbelow that i’m gonna put in each three tag and will type in the text we justtalked about design solutions for your businessthe middle close that each three tag easy enough and that’s really all wehave for that top intersection up here so now let’s go ahead and move on andget started with our featured section which has are three different categoriesof design web design graphic design video production and will create thestructure for that again this is another section that’s contained within the samewidth as the rest of our content but it has a background that extends out to theedges so again we’re gonna have to create two levels here and create oneblockextends all the way to the end is with the whip them 100% and another bookwithin that that’s contained within are specified with foresight so let’s jumpinto a code and make that happen so we have our header up here and right now wejust put in h1 and h3 tank that’s actually makes this may be a little moresense with html5 using the header element and and since this content needsto be contained within that with even though it probably won’t extend to thatwith anyway let’s go ahead and give this header in class of container that waythe content inside it won’t get any wider than its supposed to get and thenwe’ll put our closing header tank here after those two heading tax so there’s aheader now move on to the next section which will put inside a section elementwith a class of feature is going to be our featured section and then we’ll goin a couple lines are closing section tag so everything that we saw there withthe icons in the background in the dark grey background that extends to the endsall of that is going to be contained inside this particular sectionand then so will actually use this section for this class here against thisclass of feature will use that to extend the background to the edges that darkgrey background and then inside the section will create an unordered listthat has those three columns and unordered list we’re having class ofcontainer which will limit its with to the width of the website so inside thesection again will create an unordered list with a class of feature list sothat we can style it classic containers of you want to apply to classes to thisitem we simply put a space in between to class names we have feature hyphen listwhich we’re going to use to style the list itself and then the class ofcontainer which were going to use to set the width of that list so we’ll skipcouple lines here are closing an ordered list tag and then inside the unorderedlist if we go back to a Photoshop file each one of these large blocks ofcontent is going to be a different list item in that list now might not haveinitially occurred to you to make that a list and certainly you could make thisgives or other sections or something like that I like to use this as a listjust because it’s kind of what this is this is a list of our sections and Iwant my html to make sense from a semantic standpoint and by Symantec whatI mean is I want mark up to define what our content is in this particular pieceof content is kind of a list of categories are web design graphic designvideo production categories so we’re gonna make that a list so we’ve createdthe list here now we’re going to create our list items and we need to thinkabout what those lists items are going to look like if we go back to reachgmail we can see that these lists items are gonna have a large width and heightand inside them we’re gonna have an icon and some text now for the backgroundimage here we’re going to apply that to the list itself to the unordered listand will put the text and the icons inside each list item now I want theicon and the text to both beat clipso that when we click on that it will take us to the web page I want to putall of that content the icon and the text inside in a protector inside asleek then we’ll put our image which is going to be this icon and just afterthat we’ll put our title here for that section and will put that inciting h3tag so let’s go into our content and there are a dozen different ways youcould do this but this is the way I’m gonna handle it so skip a couple linesand closing list items tagged there then gonna put all of this inside a link sowe’re going to create opening Intertek capable lines and power closing eagertag and then inside that protect we’ll have our icon and our texts so again areicon is going to be an image in its own image we haven’t created yet so this iswhere we’re going to decide what are our image name is going to be so its creatorimage tag hereIMG space and let’s go ahead and give this a class of future wife and I caughtthat way we can go in and style these icons however we want you so calledfeature icons and for the source forgot how to spell therefore second src equalsand really put all of our images inside a folder called images forward slash andthis is for our web design section so let’s just call it web not P&G we needto use a P&G because we want that transparent background around it so callit web that P&G will give us an alt attribute of web design so there’s artimage now down to the next line will create our h3 and was going to give thisa class as well and will call it feature high-end title for describing what thecontent is here with our class names each three classical feature title inthis one is gonna say web design and then we’ll create or closing h3 tag sonow we can just take this list item Computand paste it twice so that we have three different list items here what you’regoing to amount to three different columns and for second one is going tobe a graphic design sections were gonna change your image name here too graphicP&G will change our alts text too graphic design and will change ourfuture title text graphic design as wellthird icon here going to be for video production so let’s call this imagevideo . PNG will change our old attribute here to read video productionwill change our future title here to video production as well in all capitalletters and you don’t have to do this at all capital letters you could do this inlower case letters if you wanted to in the NCSS you to make it all caps howeverI’m gonna have to leave it like that and let’s hear that looks let’s save ourpage open that page up and chrome and we’ll take a look at so again it’s notgonna look great yet we just want to make sure that everything is there so wecan see the header and so we can see that we have three icons with the taxbenefit and as far as the structure goes everything is looking fine so far so thenext video will move on to the next section and thank you for watching CNN
PSD to HTML 2.3) Structuring the Feature Section
Reviewed by Tayyab Saqlain Zakki
on
08:12
Rating: 5
Reviewed by Tayyab Saqlain Zakki
on
08:12
Rating:
No comments: