jQuery and AJAX Tutorials 19 | Creating a jQuery Portfolio Project Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Elias and
welcome to your 1902 toriel and in this
tutorial we are going to start creating
a new project and this is going to be a
simple portfolio so if you're an artist
or a photographer you can share your
works with the others but if you are
just a normal person like me not a
photographer or an artist you will have
a nice and fancy way to share your
pictures and your photographs with the
others so let's just go ahead and start
creating structure for portfolio so what
we need I already have the folder images
and I downloaded some images from the
internet and I'll provide you the link
or a zip archive or something so you can
download it as well
so for now we need a folder for the CSS
tiles
I usually separate them into folders and
the folder called Jas for the JavaScript
and we also need an empty HTML document
of course as well as empty CSS files and
JavaScript and we also need jQuery so
I'll just go ahead to the previous
tutorials folder and copy the jQuery
file jQuery 1.9 1.9 point 1 so just go
ahead and copy that and paste it to our
work folder to the GS folder actually
and then we as I said we need an empty
HTML document so I'm going to create one
right here I'll name it index dot HTML
so now we have an empty HTML document
and but we are still missing a CSS and
JavaScript so just go ahead and create a
new file go to the CSS folder call it
style dot CSS and create a new file go
to the J's folder and I'll name it
script
yes so now we have HTML CSS and
JavaScript and now we are ready to go
all right so I'll just go ahead and
start writing the HTML code for web page
and if you guys want only to learn
jQuery you can actually skip this
tutorial and proceed right to the next
one because in this tutorial I will only
create an HTML structure and some Styles
for the portfolio but if you still want
to have fun and learn how to create a
web page with images and stuff very
quick you can follow along so for the
title it's just going to go ahead and
say jQuery portfolio and when I usually
start making a web page I I start from
the top and go to the bottom so the
first thing I would create would be a
header and usually it's just div element
and I sometimes I just say it's ID
should be a header and then we need
something called a wrapper so leave oh
sorry
div ID equals wrapper and inside of this
wrapper we would have an UL element
called portfolio and instead of this UL
elements will have just list elements
well u L stands for unordered list and
inside of this unordered list we can
have list entries and every list entry
will be a picture and let's let me count
how many pictures we have we have a 6
plus 2 8 8 pictures so we can create
eight list entries so now we have h list
entries and inside of every list entry
will have an image tag
which well this elves property is not
very relevant but its standard so
usually would have this out and what
this out is if your image cannot be
loaded for some reason the browser will
display this image text this text
instead of the picture so image and let
me rename the image is real quick so
that I can easily add them to the web
page I'll just go ahead and do like this
7 and 8 yep and now we can say images
I'll just copy this images paste it or
everywhere and image one image to image
3 4 5 6 7 8 and don't forget to add the
the extension which is JPEG jpg so hold
on now if we take a look at our web page
you'll see all these pictures listed
like this of course we don't want to
have them look like so we'll create a
better way for it and this is something
what we are going to do in the next
tutorial so in this tutorial I hope
we'll finish the user interface I mean
the the appearance of the portfolio
alright guys I'll see you next tutorial
and thanks for watching