Django Tutorial for Beginners - 19 - Designing the Details Template Video Lecture | Django: The Ultimate Beginners Guide - Back-End Programming

alright punks welcome back and in this
video we are going to be designing the
details page so this is the home page
look how beautiful it is and let me bump
this up a little bit alright there we go
so the home page it says here or all of
my albums and then we can go ahead and
choose one but when we click on it
alright so we just have this really
boring text right there but what I want
to happen on this details page is I'm
going to have the album cover logo and
then under it maybe I'll have the I
don't know the album title and bold and
then all of the songs so now that we
finally have some songs in there I think
it'll be cool
alright so let's go ahead and delete
this don't need that anymore and again
I'm working in music templates music
detail the HTML alright so the first
thing I'm going to do is I'm just going
to add image source and let me just get
everything kind of taken care of right
now
so this is going to be the album logo
and then I'm going to have a heading one
and I'll just say that this is going to
be the album title and I'm just going to
have all my songs is an unordered list
so list item and there you go maybe I'll
have the artist name is like a heading 3
or something that we kind of cool say
artist now the album logo belongs to the
class album so if we just go ahead and
airy album that's the class album logo
that should display the logo right on
top now the app album title also belong
to the class album so album album title
in the artist also belong to the class
album
all right looking good mate so for
displaying the songs it's not going to
be quite as easy but pretty easy so
remember what we're going to need to do
is we're going to need to make a for
loop so what we're going to do is we're
going to loop through all of the songs
or items in the album's song set just
like we learned in the last video now
remember any time we use actual code we
need those different symbols so for each
item and I might as well just call it a
song so for each song in the album's
song set and we're just giving all the
songs so we can just write all and
before I forget let me just end this
loop and any time you want to end a for
loop this syntax is n-4 so there you go
and now we just have to do this I'll
write the song title and then I'll write
a little - and just because we can I'll
write the song file type so just like
that so for the song title it was just a
variable name song title which belong to
the class song now I'm going to copy
this because I'm lazy and do the same
thing for file type
so how quick is that so hopefully when I
go to one of these pages haha nice man I
forgot the artist name so the artist
we forgot to write album alright so that
should be a little bit better and by the
way I didn't want to get sued by using
the actual album cover so I just made
this sweet one myself it took me like
five hours not a big deal there you go
so again this is our home page and
whenever we click it according to our
template it prints out or displays all
of this beautiful information now for
our other album we actually don't have
any songs but it still has the logo
and of course the album title and the
band's name I think it will be a little
bit cooler if we use heading to alright
that looks a little bit better so
looking good I mean this is one of the
most beautiful websites I've ever seen I
think probably the second one the number
one website would be Craigslist in my
opinion but look how well designed this
is and yeah we use the template then
gets watching I'll see you guys in the
next video