PSD to HTML 2.5) Structuring the Footer

Previous: PSD to HTML 2.4) Structuring the Portfolio Samples

Next: PSD to HTML 3.1) Creating a Style sheet

PSD to HTML Complete Course

Transcription of PSD to HTML 2.5) Structuring the Footer

hello and welcome back to the PSD to HTML responsive portfolio build in this lesson will get started coding the footer of are not and as we can see yourfoot is broken up into three separate columns first two columns have somesimple text that should be pretty easy and then the third column has a simpleform still pretty easy but little bit more involved this rebuilding a foruminstead of just some text now keep in mind we’re not going to make this formwork we’re not going to build the back end for this to to make it actuallysubscribed to something we’re just building the front and we’re just makingit look right in HTML and CSS and then at the bottom will have this fall withfar darker gray bar with our copyright information on it so far any move toeverything into a new folder called site 205 so are starting files here will bethe files we ended with in the same 04 folder and at the end of this lesson allthe changes we make will be saved in the site 05 folder so very open that up inTextMate we have psych 05 index HTML here and we’re going to move on to thenext section now since we’ve labeled Ursus we’ve created a comment herelabeling the end of this section it’s easy to find we just come there and hitenter to go to the next line and get started on the next section which isgoing to be our father now we’re going to start with our footer elements willgo ahead and create our opening and closing further tags and if we look andour Photoshop document again we can see that this background does extend all theway to the edges of the browser so we don’t want to just give that furtherelement a class of container then her background would extend all the way tothe edge so for the footer element will create that dark grey background have it100% of the width of the browser and then inside the folder will create adiff with the class of container that will contain the rest of our content sowill jump back into our code go inside the element here and we’ll create our dowith a class of containercouple lines but are closing did here and we might even put a comment herethis is containers we wantand then inside that container we’re going to have three separate columnsagain our first two columns is gonna have some txt Edit and then our thirdcolumn is going to have a registration formwe’re going to create these columns using divs so let’s create our first dayof column here so created did with a class of 04 column 1 hyphen thirdbecause it’s gonna take up one-third of the with a couple lines in her closingdiv tag and their ego so beautiful size this column is going to take upone-third of the width of that container area and we can go ahead and createother two columns as welltitle again or we could just come up herecopy that and then pieced it down here twice so there are three columns andthen inside these columns were in has some content so for the first ColinMorgan have the from the blog section so many put the title in h3 tag and itsgonna say from the blog include h3 tags there and for this h3 organ use adefinition list and the title of the blog post is going to be the DET elementof the definition term element and actually it’s more accurately describedas a description list and each team 05 so let’s call it a description list soour DTE or description term element is going to be the title would he evencalled the description title and then DDD element is going to be the date downbelow and we can style it btw in the DDA elements separately so I mean you can dothis a number of different ways you could do this using an unordered listand in just stop hereyour titles and your date separately that way using spans or something likethat again there’s always a dozen different ways to do something in eachteam when I’m gonna do this using DL element so many of the same class offurther hyphen list of a couple lines and closing DL tagand then inside the DL we have a series of DTD pairs so we have a duty which isgoing to have the title of our element which I’m asking you some reading texthere and in her closing bTW tag and then we’ll have a DVD tag that spare with itand say on March 10 spell it right now and 2014 here in closer to the elementsso again if you’ve never used a DL element before a description lesterdefinition less that’s what it looks like so we have a DL which contains theentire list and then we have a series of pairs of DDT and DDE now originally thiswas a definition list here you would have the term and in the DVD tag wouldhave the definition so that’s kind of how it started but now it’s more of adescription list does not use just for definitions snow at stake this DTD deepair herecopy it and paste it three or two times that we have three total and I’m gonnagrab some text overhears just some more lorem ipsum text describing it fromanother window and copy it and paste it here is that we can have a little bit ofvariety and we’ll go and leave the third one like it is and we’ll just change thedates so maybe this will be March 8 and this one would be march 2nd or 3rd orwhenever ok so there’s our first call we have this deal with the class of columnone-third and then inside the day we’ve been reached three and description listso in our second column we just have a simple address so in this particularcolumn we’re going to put in each three here with the title of contact us whenour closing h3 tag and then we’re going to use the address element hereopalines her closing address element and then inside that address unmet will justenter in an address 0123 45th Street put a line break here anddon’t Texas 77077 put another line break and then overhears 0555 etcetera andwe’re going to put two line breaks here and then we’ll have an email address andI want to make that clickable sore gonna make it will put it inside a link and sowe might have mail to colon and then whatever the email addresses will justsay info @ gmail.com that’s an actual email address but we’re going to usethat for now in full and email.com and their ego so that takes care of thatsection for third section is going to have a registration form and even thoughit is a former so gonna be pretty easy to do because we don’t have to worryabout making it work going to leave that up to the developers so mp3 tag and willsay register for updatesclosing h3 tag that i’m gonna have a farm in when you have a form elementlike this you would usually have some kind of action related to it but I’msure the form tag as is with no attributes and then the developers cancome in and fill in however they wish you know we really need here’s a coupleof inputs and a button socreator inputs are first input type equals text is going to be a text fieldand let’s give us an idea of names were gonna enter in their name and from theplaceholder text me said that equal to name with a capital and then we’ll haveanother input with a type of text in this is we’re going to entering theiremail address or give us an idea of the email here we’ll have another placeholder and email at address dot com you can give them an example of what thatfeels the supposed to look like and then finally will have a button element ofthis type of submit the form using US Patent and we can put the text subscribeinside them by minimal put our closing but intactalright enough form is closed and there we go so all we need now at the verybottom would see after this closing containers here will put another div inwill give this actually no incentive in Davis greenspan here with a class ofcopyright in Wahpeton copyright information in here now to get thecopyright symbol we’re going to take him percent copies semicolongive us the copyright symbol or text copyright 2014 my portfolio design andthen close that span tag and now for all intents and purposes are HTML is doneI’m still gonna be some tweaking probably as we go back and forth workingon our CSS but again for the most part it’s done so we can save that and viewit in chrome and can scroll down and see all the new content that we just addedand we really just at this point just making sure that the content is than ayear and as we move forward her CSS will start to really designed it and makesure that it looks good so thank you for watching and I’ll see you in the nextvideo