right on this one before we get started actually just wanna thank you for
watching launch
code I realize that there's some things I might be a little bit overlap for some
view
for others have you everything's brand-new but all this stuff this code
is all on our get her
get hot dot com slash cut in front runners slash
launch dash with dash code I'm so you can actually check out all the code that
we're working with
and you'll be able to use it hopefully no time
annual understand kinda how it works also
hopefully no tax if you don't that's okay because
there's plenty of other tutorials that we have that can help you
learn and master Django and all the other things that we do
I'm so I'm also at this point if you like these videos
I really hope that you like the actual pages
or each video themselves and then please share my friends
Wii U brute really want more people to code no cocaine front-runners
I know it says for us first barbara Lee as for non-technical people
and people who want to become more technical and might have an idea for a
project
so filmmakers they are entrepreneurs they don't call themselves on jurors
and they don't think of themselves as making a business a really start a film
is so much like archbishop takes a lot of creativity
probably more creativity to actually launch in Creighton XQ film but
the solar market stability all those things but the same time
bunch code how do you think differently have you think
in it see the world in little bit have a different perspective
and also having your perspective if you can code
you can make some cool interesting projects that most people just don't
think about
because a lot people just don't coat so
does your friends that are really kept talent in creative please
invite them to come learn even if they haven't done anything before this would
be a good
time for them to come check it out I'm so
now that's done I'm I also want to mention that
if you have any suggestions for cutting front-runners you're coming
front-runners are calm
I slush suggests and
you will be able to actually suggest projects RN vote up other suggestions
that people like me
have this quite a few suggestions on here obviously
and then you can just add in one and you can login and its
you can create a free account and here's actually login scene I actually have to
become a full member
to still be able to suggest new projects or topics or just anything in general
that you think would be nice
and then on each one they have like a little comment to and
as you also notice they are anonymous and I want to keep it that way just so
we can
tentative allow people just give their honest
suggestion without you know having too much time in there
right so now but actually get back to work
we're gonna be working with get bootstrap dark ominous one
so we left off where our template files
make sure service running doesn't look so great so
let's go back in here an hour
save a few things if I see this is how welcome
I'm okay so that's all right but I wanted to look
a lot nicer like temperature so we're gonna do is
I'm gonna go into I are getting started here
and then there's some examples now you can read about all this stuff but
we're gonna go of the examples jumps right into the examples
and what i'mma do you is on a grab this one right here
jumbotron I like this jumbotron 1 it's pretty solid
and a nice thing about bootstrap is it's responsive
so I change the size other browser
it changes with it now I can't cover
Ste all the bootstrap stuff but on because it's just it's
there's a lot to it so what we'll do is just kinda
the basics Engish jump right into the coding I'm
so I want to actually copy this page now so there's a few ways to do it but when
I do
is owning right click or control-click if you own a Mac
and go to view page source another way to do it is view
developer view source %ah babies can be different I want whatever browser you're
on but you just want to view the page source if you don't have to do any
browser you can also
just search it Google on how to actually
YouTube page source but you date source we see here as much
HTML code
so actually one copy the entire thing right so this is probably not the
fastest method to do this but
its one that everyone can caterpillar said so my copy that
up you know you can do control chocolate can copy a right click and copy
or unique man see or control see if you're on a Windows
to copy a and then I'm going to put it below
we did with our base right so now we have two
HTML stuff so I actually want your this I just want to keep a lot content really
I'm so dominated cut that and now we have all the HTML code
I scroll down I've got this now far here and then I have a Jumbotron
and then container writers as jumbotrons as container
so container is gonna be this bottom part
right and you can know that by just looking okay it's heading heading
heading
-3 a farm any any mystery about so
let's actually give Rideau all of that container everything that's in it
with the exception other div class itself so I'm gonna
make it simple on us and just delete one at a time
that way I am NOT confuse anybody some going from
give to give and it its underlined in Sublime Text Search shows you kinda
weird opens or closes
so that our HTML works I and then
last not least throw and this comment
writes on her blog content in there now
and we'll do something about the jumbotron here shortly and
the now bar I'm going to
cuts gonna my templates got a new file
save it as now have bar
at HTML and just pasted in there
I can use it right now but there go I'd so
we now just have a Jumbotron and block content so
let's actually look at our page now so very precious it's gonna look a lot more
like this page exactly because we got rather than at bar
very similar suffer refreshing here up
I'll well coat there so what sections gonna
let's roll up this means mics s not
working so if you ever see this that that's all it means
your CSS is not working men also were probably mean jobs from some work into
but we'll worry about that later for now
go back into our source and let's see what well
says dot dot slash dot dot slash for the first style she
well this doesn't slash is a good notation
if it's relative so that means is relative to this domain
right so Tegra pass a little bit this is a path
that's linked to bootstrap but its relative to that domain so if I actually
copied this
and it put it up here
giving them right path so enter
gives me the right path and it shows me the CSS not know this means but this is
a file that's going to make urself look good
go back well I can also click on this
acting in that same page but all its doing
the dot dots makes relative to whatever pages on
I so that also might be an air they might see
now this one on the other hand is
not get any relative merits unit its
also relatives still tilted to that page as well
on but it's not going back any folders right-o
I can see here it's like I'm back now if it had a slow just a slash in the front
that would mean that I would go to
the homepage but you can click on it to see like where they're going something
that
so I'm a news I'm used to copy link a billing address
and then replace wariness this is how we're gonna do it now
was not how we're going to long term for the cell do it now just so we can get
things working
and if you're any kind at No what to do
for the CSS stuff
NJ know you can go ahead and parson just come back in a little while
are so pace this Sun just copying all their stuff
ok this one more than any which is this one right here
and
Payson top there copy that pieces for now
and its its commented out that's why it's doing that but it's for a
II Internet Explorer 9 for those users that have it
be do you still want to give them some spore I took a back
and then this one thirty rain through that's good
I scroll to the bottom I see that jQuery sorry there and then I have bootstrap
and I just wanna grab that
last month copy link address side like that wealth screens or copy here
and scroll down to bottom pace there
by so that tedious work I am
is now done and if a refreshing here we see
alright look at this it's actually starting to look better and if I
reef change the size of it it does change the size
its since looking looking better looking closer to what we want right
so let's reference what we what so
or building towards its were front-runners
so months we check out this site
alright so like we see ours here aunts were French press here
right so we see that okay well it's getting there we got this like John will
try area like this
we don't have that image in the background which will work on but
it's mostly very similar right we have a footer here and
yeah so we're we're getting we're getting there
as far as the designs I am are will call
so in here we can change stuff so like this my changes to launch
with code and
that what that does is changed this here and you won't have this alike on here
and that's because it's a theme icon which is just
in my browser's cache so you can you could have a link here
to an image PNG or ICO that will allow that iconic come through
on so like what we've got now is just
we have a decent design in the works it's pretty much ready to go
we have boot shop now in here there's still a lot more that we need to do
one thing you might notice like well why is this
way up here rises this gap here
mess because at the well their
never appear I saw the navigation bar is not there
to get out so for a look at our penny if we look at here
and I could embody I see the jumbotron that CSS has these
aksha patterns here right so the sexual stuff
I click on it changes its I can I can actually play around with Los esse an
official down to see this color how wall
paying location change the color too alright so this is a way to like
actually kinda
test things in real time for your refresh goes back to exactly how what's
unless a override which is what I'm gonna do solver inspect element
on body and click on money
see these pent-up I don't want to get into fact all the pain bottom
either so I'm a change it to zero my pages cross it out I want to be 0
pixels and to do
to actually make that be the case we have to go
into are Bay study shemale in underneath
our CSS files that we have linked N we
can do style style tag and just at in here
so body and well
faster way to do this would just be a copy this whole thing here
selected and pace in here
and FA selected Tab tablet I saw this
will allow us to have that actually working so I refresh now
there is and if we seen here we have a body styles
and if I and comment them the jumbotron at CSS
takes over so effectually for the brothers doing is reading
from left to right to the bottom and it seems that this new style
is there and change it now if you want to learn more about how to change styles
make
it really cool then you have to learn CSS
I am to really customize is completely but
all we did can be used on anything so if I go to inspect element here
at learn more I can see that hey look I got this button
if I scroll over here on styles I see that the
scholar here so I can change this color right
well a change the background color
it doesn't seem to be changing a whole lot silence
and see if I can scroll down a little bit and see if there's another color
that I would need to change
and it looks like it's still not
0 I change the harbor that's nice right so
looks like a minute actually selected inspect element when I was hovering so
let's
refresh and up to inspect element again
and button large
so here we go BT and primary right so
in that case I just selective weird and now I'm back and I see that it is
beating primary master class and it is
I can change the color of it somebody for color I can come in here and change
now again this is kinda hacking CSS if you wanna further understand CSS you
have to actually
I just learn more about it to actually make changes
bike real substantial changes but for minor changes
what we're doing here is actually pretty good happen to do I noticed that beach
in primary
is a type of color temperature comes with so free looking kid butcher PACOM
go back there and look in CSS
and then we looking buttons we see
there's all these different colors here so
we can change the defaults but if you wanna green buttons that a blue one you
could use use BTN
success so do that we would come in here
and we'd go charge I'll try and change preteen primary which is what we see
here to you BTM
success so we change this
alright come back in here to refresh
now straight so there's RTD fall colors actually come through
and worst case scenario you can just copy
all these and put them in
so you can test it on your own
that having
do too much work here so it seemed that there refresh now I have all these
buttons
well Haven is big so let's actually look at that one
oversee BTN dash LG
well the Sun BTN de Xiao Jie so month
at actual makes a mayor that's what that is
art so I'm you can play around with that
and that's true for all types components inside a butcher
I to give you code so you can actually play around with it
your site since right you see the colors are there
and BTN is signifying its actually classy nude at beach and to me about
and that has some other stuff so when you press a
when you have it as an anchor active tag like so
its are depressed yet same old all types of stuff
get butcher is has a lot of things to it or not recover
anymore really that's that's pretty much it me know my I will cover things
that are necessary but that's pretty much it when it comes to entrap
so if you want to learn more definitely check out
so over either up for other classes cuz we do go into more with push up there
rights over now I'm in Toledo is buttons to remove them
and keep it like this and that's it
so in the next one we're actually going to create
in ap to handle
some stuff for us which would include eventually saving
a user's email address I see you next