jQuery and AJAX Tutorials 20 | Styling the Portfolio Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
welcome to your 20 tutorial on jquery
and in this tutorial we are going to
finish the user interface for the
portfolio so and if you hear this
background noise it's my computer it's
my computer's fan because right now i'm
exporting the previous video from the
previous tutorial that's why it's kind
of loud
alright let me be real quick and style
document before I do the rest I will set
margin and padding of the body to zero
and then I will continue with the header
set it with 100% and set it height 256
pixels and I will add the background
color background color not image I will
just say black so just a black header on
the top and then we already have a
wrapper in the previous tutorial and I
will set it with to 100 1024 pixels and
mean height of 500 pixels and then I
will Center it using this margin:0px
outer and then I also added this line of
code I didn't do it in the previous
tutorial which I did I just linked this
CSS file to the HTML document so let's
see what do we have so we have this
header and we have all the content
centered and then what I want to do
instead of this big pictures I want to
have some thumbnails so let's style this
unordered list so that it becomes like
some thumbnails portfolio first I want
to get rid of those bullets of this
bullets of this bullets from the list
and I will just style the portfolio say
list-style-type is none get rid of the
bullets and then I want to display the
list entries in line in line block
actually display
inline block and then let's set and fix
it
width and height or fix it with at least
for the images so that they look like
thumbnails and I'll just go ahead and
say 240 pixels it's a good size for us
on thumbnail
yeah now we have the thumbnails and yeah
we actually have a kind of a problem
because these pictures no I mean they
are not the same size not the equal size
I'll just get this picture as a
reference and measure its height its
height is 100 60 61 pixels and and this
pictures height is 180 so I'll just say
100 170 is kind of average yeah so now
they all the same height in width and
whatever else what I also want to do I
want to add some I want to make this
border between of them get bigger and
I'll just do it using some margin so
like margin 10 pixels 5 pixels 10 pixels
5 pixels now it looks better
yeah but still yeah I think it's okay
for for for now yep so what else what
else we have to do I'll just add some
some logo type right here just on the
top and I'll go to my header and I
create some logo type container just
create and a div and call it um I don't
know how'd it go just I'll just call it
menu or something and here I'll create
in an h2 tag same jQuery portfolio and
before I continue uh write in the HTML
code let me add some better font plans
to the web page
font-family:arial sons serve yep so and
what we also need is the HDH to tag and
the menu should be white because in HTML
of the standard color for text is black
and so how do you fold it if I put menu
menu color is white and vh2 should be
margin five six months zero pixel so now
we have this jQuery portfolio and now
let me put this checker portfolio word
just above this the first picture so
I'll just go to menu and copy this code
from the wrapper everything except the
mean height I can get rid of the mean
height first and now we have well it's
okay for this tutorial
alright so now we kind of build this
user interface for the for the portfolio
and the next tutorials will program the
portfolio we'll have this filter here so
you can select pictured categories I
think I'll also download some more
pictures and the pictures will go the
clickable and stuff so it's going to be
pretty much a fancy portfolio alright
guys thanks for watching and I hope you
see in the tutorial have a nice one