jQuery and AJAX Tutorials 32 | AJAX Styling Outputs Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
this is your 30 second tutorial I hope
you guys liked the previous tutorials
where we wrote our first lines of jQuery
code to work with edge X and so far we
we have we have the descriptions for the
images out put it in the console and
this is not what we want to have so we
want this text pieces of text to be
displayed just right under every picture
and here so that every image has its
unique unique description right before
we do that of course we need to create a
container for this text so make sure you
go to your HTML document and find this
frame and if you don't know what frame
is the frame is this this frame pretty
much this y squared so you open the
frame and then you just under this image
tag you create a new div element and now
I just call it a description and inside
of this div element I will create a
paragraph element like P element and so
now we are all set with HTML and we can
proceed with JavaScript great instead of
getting this data out put it in the
console won't aware this data to be
outputted in this description and inside
of the description we have a paragraph
so let's just go ahead and select the
description like I teach you guys in the
first tutorials and then just go ahead
and select the P element alright and I
hope you remember this HTML function of
jQuery that allows you to edit HTML
contents of it over every element so in
this case we just pasted this data which
comes from the server to the inner HTML
of this P element and we can get rid of
this console output just delete it yep
so now we are done with the script with
a script part
of it and we can proceed to the CSS so
the reason why we need to style it I'll
show you real quick if I open this I see
that the description DF is transparent
and it and it's not Center so it's just
not styled and it looks crappy and this
is something wouldn't want to change so
let's just go ahead to our sis's
document and create some new rules and
the first rule is I will select this
description element and I'll set it
background color to be white because
every element create an HTML and you
don't in a Johnson set its color it is
transparent by default so now when I
open this I see that this element is not
not transferred anymore and we just need
to Center it so we just need to adjust
this distance between the edge and the
text and for the hats I created a
paragraph element inside this div
element so we'll just select this
paragraph element P element and you
remember guys that this frame this is
frames edge border is exactly 20 pixels
and so we want to add the same margin
left to this P element of 20 pixels and
now the text should be centered and now
it is and we also probably need to add
some padding to the div element so that
the text is not just right on the edge
of the frame so you just go ahead to the
description and say painting bottom and
I'll just say 10 pixels yeah but now it
looks better so we have the text
description under the picture styled and
have all these borders and depending on
how high how high the picture is we have
a variable height of the frame
and so it's just a perfect frame and
depending on how much text we have would
have also a variable height of the frame
so if you have like several lines of
text right here it will automatically
expand your frame to the bottom so now
we are down with this tutorial and in
the next one we are going to create some
cool features like filters and Astrid
where we will have our filters either on
the left side or on the top and what I
mean by filters will have different
different types of images and will split
them into like groups like architecture
or nature people cities or something
else and then we'll be able to filter
the pictures depending on this on its on
their category so that's it for now I
hope you guys like this tutorial and
make sure you program by yourself and
you practice on your own because it is
one of the keys to the success so I hope
you guys had fun and I'll see you in the
next tutorial have a nice