Think guys what's up.
Welcome to a brand new lecture that I have decided to record just for you.
This is a free lecture and as you already know we are building a brand B is the design with some advanced
C S S.
So without further ado let's go.
Now if you go to deal lessons number thirty two and forty three if I'm not mistaken you would find the
project blueprint attached file and the advanced project the attached felt introspective lectures.
So go ahead and download DOS to this advanced project is the final project.
The completed code from the brand new Photoshop design and this project blueprint is a template that
you should use whenever you are creating a new Web site.
Or whenever you are starting to code because it has all the necessary things it has DCR says it's ready
for you.
The JSE script is ready for you.
The index is ready for you so go ahead and open a brackets and then we're going to open up these two
Fullers here so go on file open folder and go to desktop.
Click on Project blueprint and select folder is going to be right here.
So open it up open an index and see SS as you can see it's totally empty.
It is the skeleton with these installed as the libraries and some other options and also these use Jay
queery and the main dungeon as an out.
If we go to the advanced project and open up to the exact h t m l inside brackets as well and then the
C S S of that file.
We are now here in the brackets with the index and CSSA of the project blueprint.
The empty file and the index and the sucess of the final advanced project file.
So right now we're going to be coding in their advanced project fell right here inside the project blueprint
and I also what I have open here is the Photoshop with the design.
So we're going to start right in this first lecture to create and write the necessary h DML for this
project.
But before we do that one more thing.
This project blueprint lags and I'm full.
So if we just create an image folder and open up our our address project and copy these.
I am Jees these images that I have took away from this because the.
By the way we learn how to cut away and paste the images from a file to a separate image file like this.
So we have learned that the earlier lessons so if you're not sure how to do it go ahead and rewash that
lectures.
But if you don't feel like it.
I have cut and created all of those for you so you could save some time so I would just copy this whole
folder here and pasted inside my project blueprint and we have the images right there are perfect exit
out of here and now we're basically ready to start.
So as I said in this lecture we are going to be taking care of the index.
H t m l r.
Let's name this title advanced project and now do Photoshop.
The uses very boring font which is merely a pro-wrestler and I really dislike these fonts so I have
decided to use something fun which is called Open sense and open sand's can dance.
Now we've already went through on how to look for fonts on Google so if I just now write open sans Google
fund I can see there is right there and you already know how to do this.
You already know how to implement the fonts some exit out of here and to save time.
I'm willing to leave you do that.
Or if you want to save time as well.
Go to the advanced project which is the final finished project that we were building and copy the forms.
So these two fonts here are present condensed and open Sans.
Notice that I have included the taluk and bold and light options here so this is ultra bold semi bold
and I've included everything just to make sure.
So you go ahead and copy those from the advanced project or go ahead and do that by your own through
Google fonts.
CVN with which we already did.
In some of the earlier lessons.
I'm just going to copy this here.
OK that is perfect.
So the phones are now installed and we are basically ready to build our website.
We try to do side by side comparison with Photoshop.
I'll be back in a second.
So there we have it our Photoshop is on the right side and our brackets is on the left side.
So inside the body image is going to zoom in reasoning to zoom in quite a bit so you can see better.
That's right.
Let's create a div that's going to hold all of these content here.
So the class of wrapper and let's create the first thing first we see here it is a red rectangle or
with some text inside.
So let's do that inside the wrapper.
Just create a div with a class of for example div dash Erard dash rectangle throws at any side.
Ride some lorem ipsum.
So if I now ride lips and press on tab I can get some random Lorem Ipsum here.
I think this is too much for non-sale.
I'm going to save it just like that.
So now this red box is taking care of what now we need to do is the next section here so as can see
when we see the background of the days.
Next section is a bit Quraysh compare to the white background here.
So why not create a div with a class of Quraysh perfect.
And we have here the next one we need do is the paragraphs here.
So this is going to create a div for the content holder here just like that.
And image too.
So let's create a div with a class of for example A.H. Paris which stands for paragraphs and this could
be like three or four I'm just going to write in The Age paragraphs.
Perfect inside of this div.
Let's try to beautify this whole selection.
Ok that's better.
And let's remove these whitespace.
OK.
Perfect.
This is not doing a nice job but right now it is pretty fun.
And inside is and Paris Dave let's first insert this image of our guy here.
So I'm g s r c i m g and go to person Dot be Angey.
Let's create a class with a person.
And because this guy here is on the right we're going to do a line.
All right.
Class which if you remember in our helper class is a line.
Right.
What it does.
It simply floats the elements.
Right.
Burford close this.
Now let's see how does it looks.
So far in our life preview here.
All right good.
Nowhere near close but we're getting there.
And now we have these four paragraphs here with some larm some code and that is pretty self-explanatory.
We can do B Times foreign press on time and we get these four paragraphs here and I can just copy the
code from the Photoshop and insert into the corresponding paragraphs.
Perfect.
We're going to take care of these arrowed next because that is the CSSA three part following.
We have this image of our guy here named John Downey.
So under the grayish div..
OK because the section is ending here and we have a new section here.
We can create the image source and image is called Person dash 2.
And the class will be as well person dash 2.
All right.
Next up we have the media.
Meet John Downey and these red background here so let's try to create the demo for dance so we're going
to call this heading for.
This is going to be having for glass of call out this I'm going to write.
Meet John Downey.
So far obviously doing anything this is just the markup and what we have here is these three paragraphs
so self-explanatory again type the times three and then press on tab and just copy the code press on
escape click on the d i can click here and copy the code.
Same for this
same for this.
Now what's left to do is this footer here which has some text and a gray background.
So all we can do is let's create this heading 3.
This is going to be heading 3 this next year because it's bigger slightly bigger and is John Downey
silk How do you treat glass of silver hatting.
That's how we're going to close Colet because it is it has a silver background and we're going to add
a class of text Center which basically what it does.
Whoops we don't have that class here.
We can just add it as a helper class which is going to do text center text the line center.
That is all.
So we're going to add a super heading class and text center class and it's going to read the exact Lorem
Ipsum from here.
So those are HD M-L Let's see how it looks.
Our code editor and obviously it looks nowhere near close to what we want to achieve.
So we've compared this to the photoshop file.
Right here you can see how powerful C Ss actually is because these are the next lessons will be about
history and how we can make things ugly looking website to be exact as is.
So make sure you don't miss on those three lectures.
They will be released in the upcoming weeks so stay tuned.
And thank you for watching.