Create a Responsive Website With the W3 CSS Framework [w/ subs]



00:00:00 – hey guys in this video we're going to be
00:00:01 – creating a simple website a responsive
00:00:04 – website using the w3c CSS framework the
00:00:09 – spring mark is similar to bootstrap
00:00:11 – foundation i guess they're all pretty
00:00:13 – similar and gives you things like
00:00:15 – buttons alert text classes it has its
00:00:19 – own grid system so it has quite a bit
00:00:22 – you look over on the sidebar here this
00:00:25 – is the documentation w3schools dot-com /
00:00:28 – w3c CSS alright so we'll be building is
00:00:31 – this site here this is basically a
00:00:34 – one-page website by clicking about
00:00:36 – brings us down services contact so let's
00:00:39 – start the top here we have this we have
00:00:41 – the nav bar which is pretty simple i
00:00:44 – think it's easier to implement them the
00:00:47 – bootstrap bar but it doesn't give you as
00:00:49 – much features and then we have the
00:00:51 – showcase the area here we're not using
00:00:53 – too much of the framework here it's
00:00:55 – basically just a background image with a
00:00:57 – heading and then a paragraph and a
00:00:59 – button
00:01:00 – all right now that's what I reload the
00:01:02 – heading in the paragraph kind of speed
00:01:04 – in which is kind of nice and that's
00:01:06 – that's just from adding a certain class
00:01:08 – to it
00:01:09 – same thing here with the opacity you can
00:01:11 – see through the button here
00:01:13 – alright then we just have this area and
00:01:15 – notice when i hover over these they get
00:01:17 – a little lighter they're not links or
00:01:20 – anything I just wanted to add that
00:01:22 – affect all right we're using fought
00:01:24 – awesome for icons just by including the
00:01:27 – font awesome CDN so this is the about
00:01:30 – area
00:01:31 – ok we get these little tabs or
00:01:33 – accordions whatever you want to call
00:01:34 – them than just a simple image another
00:01:38 – heading here our services and we're
00:01:40 – using smaller font awesome icons and we
00:01:43 – added some background color to them
00:01:45 – using the framework and then down here
00:01:47 – we just have a simple contact form and
00:01:50 – footer
00:01:50 – alright so very very simple only click
00:01:53 – on start here with it opens up a modal
00:01:56 – with form a registration form this
00:02:00 – doesn't work it's just the UI ok and if
00:02:04 – we go ahead and make it smaller this is
00:02:06 – the mobile view which is actually I
00:02:08 – think better looking
00:02:10 – the website view all right so we have
00:02:12 – our menu which turns into a responsive
00:02:15 – menu and have our little areas here you
00:02:19 – have our accordion services you can see
00:02:22 – the icons are now all in one row and we
00:02:24 – have our forum at the bottom
00:02:26 – ok so pretty simple and very responsive
00:02:29 – you can see this is around the size of a
00:02:32 – tablet still looks good
00:02:34 – alright so i'm not saying that this is
00:02:37 – better than bootstrap in fact that it's
00:02:39 – definitely not what it is a an
00:02:42 – alternative that you can use if you want
00:02:44 – to just expand you can expand your
00:02:47 – front-end development skills
00:02:49 – alright so let's go ahead and get
00:02:51 – started all we have to do to use this
00:02:53 – include the CDN which is this link right
00:02:56 – here we just need to add that to our
00:02:58 – header and we should be good so let's go
00:03:02 – ahead and just create a file on my
00:03:05 – desktop or folder router and i'm going
00:03:09 – to call this acme underscore w3c CSS ok
00:03:17 – and we're just going to create an index
00:03:19 – HTML file and that's going to be our
00:03:22 – only HTML file
00:03:25 – ok we also want folder CSS and create a
00:03:32 – folder called IMG for our images all
00:03:35 – right now I'm just going to open up
00:03:37 – actually let's create our style sheet
00:03:38 – first so this will be styled dot ISS and
00:03:45 – we're going to open up our index HTML
00:03:47 – and let's open that with Adam course you
00:03:51 – can use whatever you'd like
00:03:53 – alright so I'm gonna put some basic HTML
00:03:57 – tags and go to file and i'll say Acme
00:04:02 – you all cast acne web services and now
00:04:09 – we go here we want to grab the viewport
00:04:12 – right here because it's going to be
00:04:13 – responsive and then the CDN link that
00:04:17 – right there
00:04:18 – all right now I let me just extend that
00:04:27 – I like to do it so we can see both on
00:04:29 – the same you know split screens but you
00:04:31 – guys won't be able to see all the code
00:04:33 – you can call jumbled alright let's see
00:04:37 – so we're also going to want to link our
00:04:41 – style sheet so I'm just going to copy
00:04:43 – this and change this to CSS / style
00:04:49 – thought ESS now we're also using font
00:04:55 – awesome so I'm just going to grab that
00:04:56 – CD and as well
00:04:59 – ok so let's do right here and we'll grab
00:05:07 – it will grab this
00:05:11 – so put it right here take stress and
00:05:21 – then let's just all right so that should
00:05:24 – be it for our header our head tag
00:05:27 – ok let's actually open this up
00:05:34 – ok
00:05:40 – so now what we want to do is let's go to
00:05:44 – the documentation just close that and
00:05:47 – let's go to the navigation that's the
00:05:50 – first thing on our list
00:05:52 – alright so the navigation you have
00:05:55 – different colors you've gray dark gray
00:05:57 – great of bluish gray black we're going
00:06:02 – to use the black version so all we have
00:06:06 – to do is include this w3 black class
00:06:09 – alright and the nav bar itself takes the
00:06:11 – w3 bar class notice that all the all the
00:06:14 – classes are prefixed with w 3 dash
00:06:17 – ok so let's actually let's go down here
00:06:21 – first we do want the responses version
00:06:24 – so let's grab this
00:06:31 – ok so we have our 33 barbi three black
00:06:34 – and then our links now I want the menu
00:06:38 – are the links to s**** to the right and
00:06:40 – then we're going to have the I guess
00:06:42 – logo you want to call it that it's
00:06:45 – basically just the title here we want
00:06:47 – that on the left and we want the links
00:06:50 – on the right so what we'll do is we go
00:06:54 – to our documentation should show us what
00:07:02 – to do
00:07:03 – we just want tax rate navigation bar
00:07:05 – text so if we want to actually just use
00:07:07 – a stand like that
00:07:09 – alright so put that right there and then
00:07:13 – to align these lengths let's do a of a
00:07:18 – stand and class and then the spring work
00:07:24 – has alignment classes so we can see w3
00:07:27 – right I'll just wrap these links here
00:07:33 – ok that over all right let's save that
00:07:40 – let's see what we get
00:07:41 – ok so we have our links over here and
00:07:44 – our logo over here let's go like that
00:07:48 – now notice that this isn't this doesn't
00:07:50 – look very responsive
00:07:52 – I mean this part does but this is you
00:07:55 – know we're floating this to the right we
00:07:56 – don't want that so if you want to take
00:08:00 – away all the floats and basically make
00:08:01 – it mobile friendly all you have to do is
00:08:04 – add the w3 mobile class so we're going
00:08:08 – to add that to the branding right here
00:08:10 – the logo actually make this acne
00:08:14 – services
00:08:17 – ok we'll add the class w 3 mobile and
00:08:23 – also going to give us a class of
00:08:24 – branding so that we can you know style
00:08:28 – it if we want
00:08:28 – and then we also want to put the w3
00:08:30 – mobile onto this span catch let's go
00:08:36 – ahead and try that and there you go now
00:08:39 – it's responsive
00:08:40 – alright so and that's pretty much it for
00:08:43 – the navbar all i do want to choose me
00:08:46 – I do want to make these hover I want to
00:08:48 – make these red not great so what we can
00:08:50 – do is add w3 hover thread i believe
00:08:57 – let's try it out
00:08:58 – yeah okay and you can have different
00:09:01 – colors to you want i'm just going to
00:09:03 – make all of these red so it's just add
00:09:06 – those ok we'll save that and now we have
00:09:12 – the red hover alright so let's just
00:09:15 – change these links up so we have home
00:09:18 – that's going to go to the number sign
00:09:21 – which will bring it to the top and then
00:09:23 – this one will be with this one will be
00:09:27 – boats going to make this a href go to
00:09:34 – the number side of the boat and services
00:09:38 – contact
00:09:45 – alright i'm just going to put a comment
00:09:50 – here things is the navigation and that
00:09:58 – should be good
00:09:59 – let's save it now we have our length
00:10:03 – alright so next we're going to do the
00:10:05 – showcase
00:10:09 – ok now that has a background image which
00:10:12 – you can find in your in the code in the
00:10:15 – description just so you should have
00:10:21 – showcased jpg and we also the about
00:10:23 – image
00:10:24 – alright so we're going to create a
00:10:26 – section here we need the html5 section
00:10:29 – tag and give it a class of showcase ok
00:10:37 – and in here let's see we're going to put
00:10:42 – a container because you want everything
00:10:44 – inside the text to be pushed into the
00:10:48 – middle and have margin auto on the side
00:10:51 – so with this framework that the
00:10:56 – container classes w 3 dash container
00:11:01 – alright and then I also want everything
00:11:03 – to be centered so we're going to use the
00:11:04 – class w 3 7 ok and then in here we're
00:11:12 – going to have the h1 and that's going to
00:11:16 – say go anywhere and we're going to make
00:11:21 – that all uppercase through CSS and then
00:11:24 – we have an HR horizontal rule which we
00:11:27 – need to we need to change the style of
00:11:28 – that and a paragraph and just has some
00:11:33 – sample content i'm just going to grab
00:11:35 – this you guys to put whatever you like
00:11:38 – here all right and then we have the
00:11:42 – buttons
00:11:43 – so under the power graph let's put in
00:11:47 – buttons and that's going to have a class
00:11:51 – of w 3 dash button we want to be red so
00:11:57 – w3 red I want to be large to be three
00:12:02 – large there's also w3 small extra large
00:12:05 – extra extra large and then I also wanted
00:12:09 – to be see-through so when cw3 opacity ok
00:12:15 – and that's just going to say start here
00:12:21 – alright so let's see what it looks like
00:12:24 – okay so let's go to the CSS to our style
00:12:30 – thought CSS file and let's start with
00:12:35 – the branding here i want that to be a
00:12:38 – little bigger so we're going to say dot
00:12:41 – branding and i'm just going to set the
00:12:45 – font size 217 picture okay and then
00:12:50 – we'll do a showcase its going to have a
00:12:55 – background background which will be a
00:13:01 – URL and that's going to be dot slash and
00:13:05 – the image folder / showcase.com bag
00:13:11 – alright we're going to send it to no
00:13:12 – repeat then we're going to set the
00:13:15 – height
00:13:17 – ok heights going to be 600 pixels and
00:13:22 – that honest with the background edition
00:13:25 – of the image to set up the back actually
00:13:30 – gonna put that above the height
00:13:35 – alright so height 600 and let's set
00:13:40 – padding padding I want to do 140 on the
00:13:47 – top and bottom and then a hundred on the
00:13:50 – left and right all right i want all the
00:13:52 – color to be white so let's go ahead and
00:13:56 – save that reload
00:13:58 – okay so we need to do a couple things
00:14:00 – here so we'll do with the h1 showcase
00:14:06 – each one and i want to set the font size
00:14:11 – to be 40 pixels and let's set the font
00:14:16 – weight to 700 make it a little more bold
00:14:21 – and then I want to do text transformed
00:14:24 – because I wanted to be all updates all
00:14:29 – right take a look at that now we also
00:14:33 – have a we can use a text shadow class we
00:14:37 – look in the documentation here see right
00:14:41 – here so if we have this class w3 text
00:14:44 – shadow
00:14:45 – let's add that to our h1
00:14:52 – ok so if we look at that it out you
00:14:58 – can't really see it too good but it just
00:15:00 – added a little bit of shadow
00:15:02 – let's see what else you want to do I
00:15:05 – want it to fade in and all we have to do
00:15:08 – for that to happen is just have a simple
00:15:10 – class so w3 animate dash capacity now
00:15:17 – when we reload you see that it just it
00:15:20 – fades in
00:15:21 – ok so that's really simple to implement
00:15:23 – let's also do it to the paragraph so
00:15:26 – will give us the class of w3 animal
00:15:31 – forecasting so now both of the heading
00:15:37 – and the paragraph feeling ok let's go
00:15:41 – back to our style sheet and now we're
00:15:43 – going to do the HR right here i want to
00:15:46 – make it red and I want to get really
00:15:47 – small so they showcase teach our and
00:15:54 – let's set this to width of a hundred
00:15:57 – pixels and rest of the margin auto which
00:16:01 – will bring it to the middle and set the
00:16:04 – border with 2 3 pixels into the border
00:16:09 – color to that red color which is
00:16:13 – hexadecimal value F 442 3363 load there
00:16:21 – we go now for the paragraph and what the
00:16:25 – want to be a little bigger so is to
00:16:28 – showcase ps2 locks eyes with the thought
00:16:36 – sighs 216 right and let's set the
00:16:42 – padding bottom of the paragraph we're
00:16:44 – going to set that 220 pixels
00:16:48 – ok so just a little bit of change and
00:16:52 – that's it for the showcase area so now
00:16:55 – we're going to do
00:16:57 – this section right here this welcome
00:16:58 – home section so let's go back to our
00:17:00 – HTML and go here and I'm just going to
00:17:04 – call this section one and i want to give
00:17:11 – this a class section and also the
00:17:16 – background color I want to be red so you
00:17:18 – can simply do w three red and then let's
00:17:21 – do w 3 hover opacity which will make it
00:17:26 – feel a little bit only hover over it
00:17:33 – ok so in here we want the container
00:17:35 – because we want to bring that the
00:17:36 – content in from the sides so w3
00:17:43 – container and also w3 center and let's
00:17:54 – see we're going to use font awesome here
00:17:56 – so we want to put any I tagged with the
00:17:58 – class of FA and then the icon we want
00:18:01 – which is fked dash home
00:18:04 – okay then we're going to put in h2 and
00:18:08 – we're just going to say welcome home and
00:18:13 – then paragraph which i'm just going to
00:18:17 – grab this
00:18:22 – he said and and take a look at it okay
00:18:27 – now look how small the icon it's my
00:18:29 – fault we need to make that bigger and
00:18:32 – then I also want to actually padding so
00:18:36 – let's go to our style sheet and let's
00:18:40 – add in dot section
00:18:43 – ok there's going to be a few elements
00:18:44 – that have that have this clap and we're
00:18:48 – going to add the pattern adding 40
00:18:52 – pixels on the top and bottom here on the
00:18:55 – sides and then for the h2 section h 2 i
00:19:01 – want to remove the padding and margin
00:19:03 – alright and then for the icon has a
00:19:12 – class of at a set the font size of that
00:19:17 – icon 250 pixels
00:19:22 – okay that should do it let's save and
00:19:25 – reload and there we go that's that
00:19:29 – so now we're going to do the next
00:19:30 – section which is similar so I'm gonna
00:19:33 – just copy this and it changes to section
00:19:38 – 2 and then we're going to do w 3 light
00:19:42 – gray will keep the hover hover class and
00:19:48 – we're going to keep that the icon we're
00:19:50 – going to change to card which is just
00:19:53 – the gear icon and then let's change this
00:19:55 – to let's begin to shape that you load
00:20:03 – and there's that
00:20:05 – so the next area is going to be this
00:20:08 – about right here so let's go ahead and
00:20:11 – add that
00:20:15 – let's do actually just i'll just copy
00:20:21 – this
00:20:26 – ok so we're going to take away these two
00:20:31 – classes will keep the section class and
00:20:34 – then we're not going to Center this but
00:20:35 – we do want the container and let's take
00:20:39 – away that stuff here
00:20:41 – okay now this is where we're going to
00:20:42 – use the grid system so just like with
00:20:45 – bootstrap we do a roll class and then we
00:20:47 – have our column classes so it's a good
00:20:50 – class w 3 dash you can do w three-row
00:20:56 – what we want padding for the columns so
00:20:59 – we're going to add w30 padding all right
00:21:04 – and then we'll do kids let's give this a
00:21:08 – class of w3 call and then the size of it
00:21:13 – which will be five columns if so we want
00:21:16 – to do m5 ok so that's for the medium
00:21:19 – sized screen you can also do al5 as 54
00:21:22 – small screens and then I'm just going to
00:21:25 – copy that and then this one's going to
00:21:29 – be seven
00:21:30 – alright so that's five columns just
00:21:32 – going to have that image image source
00:21:37 – and it's going to be IMG / of faults dot
00:21:41 – jpg
00:21:42 – alright so three load we have our image
00:21:47 – now this goes outside of its container
00:21:50 – so what we need to do is set the image
00:21:52 – to a hundred percent with so I'm just
00:21:55 – going to add it to the section
00:21:56 – construction image that that too with of
00:22:02 – a hundred percent and reload and now
00:22:05 – it's contained within its diff
00:22:07 – ok so next we have the the accordion now
00:22:14 – with this we actually have to add a
00:22:15 – little bit of JavaScript if we go to see
00:22:19 – accordions
00:22:22 – and we need to basically whatever
00:22:26 – element we want to click me to add an
00:22:28 – on-click and then we need to add a
00:22:30 – function which is this function here so
00:22:34 – let's actually just grab this script tag
00:22:36 – and everything in it go down to about
00:22:39 – the body and paste that in ok they
00:22:46 – called it my function but you can call
00:22:47 – it whatever you want to call it a acc
00:22:50 – recording function basically just add
00:22:54 – and remove the w3 show class when we
00:22:58 – click it so let's go back up here where
00:23:01 – we want to put the accordion and let's
00:23:05 – grab grab this
00:23:19 – alright so you start call my function to
00:23:23 – the HTC function and then this is going
00:23:26 – to be basically the ID needs to match
00:23:29 – whatever content you want open when you
00:23:31 – click this so this is going to call the
00:23:34 – what and then we're going to change this
00:23:36 – ID to what
00:23:38 – ok and then for this text right here
00:23:43 – let's say what we do
00:23:46 – ok and then for the text i'm just going
00:23:50 – to copy this and then we also have in
00:23:55 – each three so let's put that as well and
00:24:00 – would say we do everything that we do it
00:24:06 – all like that and then we'll just put
00:24:12 – paragraph and i'm just going to paste
00:24:13 – that text thing
00:24:15 – alright so let's go over here and reload
00:24:19 – and now we have our little drop-down
00:24:21 – accordion now I want this to show by
00:24:24 – default so what we can do is just add
00:24:27 – change the w3 hide to w3 show okay and
00:24:33 – then we just want to copy button to send
00:24:39 – here so we want this and coffee it and
00:24:43 – it'll taste it right below and again so
00:24:46 – this one will be who and this will be
00:24:53 – who
00:24:55 – this is going to be w 3 hide and then
00:25:00 – for this let's say was I say for who we
00:25:08 – are actually
00:25:14 – ok we'll just leave that text actually
00:25:16 – will just make it a little shorter
00:25:19 – ok and then down here this is going to
00:25:22 – be where we're and then this is also
00:25:31 – going to be where and i'll say we are
00:25:35 – everywhere
00:25:39 – sounds a little creepy but side
00:25:44 – ok so let's all this needs to be hide so
00:25:49 – let's try that
00:25:51 – ok so this is open by default and we can
00:25:54 – open the song and this one holds them as
00:25:58 – well
00:25:58 – alright so that's our about section and
00:26:02 – if we go up here we click on about it
00:26:04 – should we didn't get an idea of a
00:26:06 – positively you have this section needs
00:26:09 – an ID of folks
00:26:14 – alright so we load and click about now
00:26:17 – notice that when we go down here the
00:26:19 – menu is gone so what we need to do is
00:26:21 – make this fixed to the top so to do that
00:26:27 – all we have to do is wrap it in a
00:26:29 – certain class let's go back up here and
00:26:32 – we're going to wrap the whole navigation
00:26:34 – in a class called w3 top
00:26:45 – alright so let's leave that and now we
00:26:50 – reload it stays at the top if we took
00:26:52 – about we still have the menu we can go
00:26:55 – back up
00:26:56 – okay see now if we make this smaller
00:27:02 – you'll see that the nav bar is now
00:27:07 – covering this part we can't go up
00:27:10 – anymore what we have to do is add to the
00:27:13 – body we have to move this down but we
00:27:15 – only want to move down when it's in a
00:27:18 – mobile view so for that we need to use a
00:27:21 – media query so down at the bottom in our
00:27:24 – CSS file we are going to say that media
00:27:29 – only screen and we want to put a max
00:27:36 – with here because of the styles in this
00:27:40 – block should only pertain to when the
00:27:44 – window has a max width of 600 pixels ok
00:27:48 – if it's over that then this won't won't
00:27:50 – be in effect so we just want to say body
00:27:53 – and let's add a large and talked of 190
00:27:59 – pixels now if we go over here and reload
00:28:02 – now we can see the whole thing now I
00:28:05 – also i don't like how this looks is too
00:28:07 – much space here and it's just too big so
00:28:10 – we're also going to put our showcase and
00:28:16 – say height will change it to launder
00:28:19 – pixels make it a little smaller and then
00:28:22 – patting we're going to step 2 60 pixels
00:28:25 – top and bottom now if we reload now it
00:28:30 – looks good
00:28:31 – alright if we make it bigger you see
00:28:33 – that is unchanged from before
00:28:35 – alright so let's continue on we're going
00:28:40 – to now do the services heading which is
00:28:43 – this part right here so let's copy
00:28:46 – though this is welcome home area because
00:28:49 – it's pretty similar is this
00:28:52 – and then we'll go down here setting
00:29:00 – ok so this is going to be the services
00:29:04 – heading and we want to keep you need to
00:29:12 – add an ID services so that the menu goes
00:29:15 – twist and then keep all that going to
00:29:18 – keep these we're going to get rid of the
00:29:21 – icon and then we're going to have an h1
00:29:25 – and we'll say our services and just
00:29:32 – going to add a text shadow class as well
00:29:37 – shadow
00:29:44 – alright and we'll keep this text as well
00:29:47 – so let's take a look at that and so
00:29:50 – there's our services heading now we need
00:29:53 – to put in the actual services so let's
00:29:56 – put i'm just going to copy this and
00:30:10 – we're gonna get rid of the ID and they
00:30:16 – change get rid of those and then this is
00:30:21 – going to be light gray so we want w3
00:30:23 – light gray and we're going to keep these
00:30:27 – classes and then we want to use the grid
00:30:30 – system again so it's tough to south and
00:30:35 – a class w 3 row and then we want our
00:30:43 – columns so this will be w 3 call and
00:30:51 – you're going to be three columns it's
00:30:53 – because you want for them about 43
00:30:55 – column discs so in here we'll have a
00:31:02 – nikon going to give us the class of FAA
00:31:06 – and they have a comment and we want to
00:31:11 – give it a background as well
00:31:13 – red background and then we want to add
00:31:17 – some padding which rw3 have a class
00:31:21 – called padding and then the sides will
00:31:25 – see a small I think it's 86 or four
00:31:27 – pixels or something like that and then
00:31:30 – we also wanted to be rounded so we're
00:31:32 – going to bw3 round x-large
00:31:38 – alright so that'll be the icon and then
00:31:42 – we want rh3 the internet marketing and
00:31:55 – then for the paragraph will just put
00:31:56 – this large if some that's right here
00:32:00 – okay and then let's take a look at that
00:32:06 – okay looks good and we're going to copy
00:32:10 – this column did right here and paste
00:32:14 – then three more times and the second one
00:32:18 – is going to be SEO we're going to change
00:32:22 – the icon to search so then this one here
00:32:27 – will be software development and let's
00:32:34 – change the icon to what is our cubes and
00:32:40 – then the last one here is going to be
00:32:41 – filed hosting and we're going to change
00:32:45 – the comment to fa cloud let's take a
00:32:49 – look at that
00:32:51 – okay that looks good let's check it out
00:32:53 – in the responsive mobile view looks good
00:33:00 – alright so we're getting there let's now
00:33:02 – do the contact heading which is this so
00:33:06 – I'm gonna just copy what i want to copy
00:33:14 – let's copy the our services heading
00:33:17 – because it's pretty much the same thing
00:33:18 – right here this is going to be contact
00:33:29 – heading change the ID to contact and
00:33:34 – we're going to change it to w3 light no
00:33:38 – dark grey now change this to get in
00:33:48 – touch all right now we're going to have
00:33:53 – the main contact section so let's see
00:34:02 – i'll just copy this
00:34:08 – and we're going to get rid of the ID and
00:34:15 – then we just need the section class and
00:34:18 – then we don't want to set our this will
00:34:20 – get rid of that and let's get rid of the
00:34:23 – h1 and the paragraph so let's go over to
00:34:26 – the documentation and take a look at
00:34:29 – inputs as it's right here
00:34:33 – ok so these ones actually look pretty
00:34:36 – cool pretty nice and clean checkboxes
00:34:38 – and so on
00:34:39 – we're going to make this really simple
00:34:41 – and we're going to grab this
00:34:44 – ok what's going to taste that right here
00:35:02 – so for the header let's get rid of that
00:35:04 – would say contact us and then let's do
00:35:11 – name email
00:35:23 – but message as well to be three inputs
00:35:29 – this will be message and then let's do a
00:35:40 – text area there's a class of those three
00:35:49 – input i think i see what that looks like
00:35:54 – no what's up
00:36:04 – don't give us an example with the text
00:36:06 – area apparently this is a text area
00:36:10 – let's look at the source code here text
00:36:14 – the area class and let's just copy that
00:36:24 – if that works
00:36:28 – yeah there we go
00:36:32 – so let's add a submit button as well but
00:36:41 – news
00:36:42 – hi people students in the class of w3
00:36:48 – button or VPN actually don't know that's
00:36:57 – right and it's button the VPN button
00:37:06 – alright and i'm just going to put a
00:37:14 – couple line breaks
00:37:20 – we've got the text and you can also
00:37:22 – submit and put a line break under the
00:37:30 – text area and let's change the color of
00:37:35 – this to read
00:37:36 – no not ready let's do I'm dark grey
00:37:38 – there we go good enough so if it's a
00:37:48 – contact that brings us down to the floor
00:37:50 – alright so now we just have a footer
00:37:53 – which is very simple going to use an
00:37:59 – html5 flitter edge and see let's give
00:38:07 – the footer class of w3 black and also i
00:38:16 – want some padding will do w 3 dash
00:38:19 – having Dash x-large and then w3 center
00:38:26 – and then I'm just going to put a
00:38:28 – paragraph in here and i'll just say acne
00:38:33 – web services
00:38:36 – copyright 2017 and take a look at that
00:38:42 – and therefore very very simple
00:38:45 – ah see
00:38:51 – actually want to add a little bit of
00:38:52 – padding to the form so right here we
00:38:56 – have this form tag with ad w3 having
00:39:04 – x-large okay so it looks a little better
00:39:10 – so that's that's it really for the
00:39:13 – homepage now what we need to do with the
00:39:16 – the modal when we click start here so if
00:39:19 – we go to the documentation and we go to
00:39:23 – see where is it
00:39:31 – modal model right here okay
00:39:40 – no this is a simple moto hear what I'm
00:39:46 – going to do actually just going to type
00:39:49 – it out
00:39:52 – ok so we'll start off with the button
00:39:55 – start here button we have to add some
00:39:56 – stuff to that which is right here we
00:40:01 – need to add an on-click attribute so
00:40:08 – let's do on click equals and then we
00:40:15 – want to do document dot get element by a
00:40:19 – key and we'll call this start
00:40:24 – dash modal and then we're going to just
00:40:29 – do dot style dot style and then dot this
00:40:34 – play because we want to change this the
00:40:36 – display to a block so equals block ok
00:40:42 – because it's going to start off hidden
00:40:44 – and then we click that it's going to
00:40:45 – change it from hidden to display block
00:40:48 – so now we're going to go down here we're
00:40:51 – going to add the modal so down to the
00:40:54 – bottom below the footer so put our
00:40:57 – comment and we're going to put in it is
00:41:03 – and given an idea of start modal just
00:41:05 – like we set up a bump
00:41:08 – ok and we also need to give a class of w
00:41:12 – 3 dash model say now we want to do
00:41:19 – another gym with the class of mobile
00:41:22 – content
00:41:26 – and inside here will have the header and
00:41:36 – headers actually going to have a class
00:41:37 – two classes are going to give it a
00:41:41 – container that's the w3 container and
00:41:49 – then also w3 red ok now in the header
00:41:54 – we're going to put a span and we're
00:41:57 – going to do the going to do the close
00:42:01 – button so this is going to have an
00:42:05 – on-click alright stand on quick
00:42:12 – alright and then for the text we want to
00:42:18 – display a club and X icon which we can
00:42:23 – use & % x semicolon so the on click
00:42:30 – we're going to set that too just like
00:42:32 – above document dot get element by ID and
00:42:38 – that's going to be startled and then we
00:42:43 – want to add on to the end here dot
00:42:45 – styles on display and set that equal to
00:42:51 – none
00:42:54 – ok so it's going to close it up again
00:42:56 – our hide it so it's below the header
00:43:01 – actually still in the header we need to
00:43:04 – just put rh2 and we'll just say get
00:43:09 – started alright so now below the header
00:43:13 – we're going to put in and give with a
00:43:16 – container class
00:43:21 – inside here we're going to put a form
00:43:30 – and we'll put a jinx here with the class
00:43:40 – i'm going to give this a class of w
00:43:43 – three sections and then here we're going
00:43:54 – to put our label of names and input
00:44:01 – input to have a class of w3 input also
00:44:08 – lets do w three quarter and let's add
00:44:13 – some margin with w3 marginally bottom
00:44:18 – and we'll give it a little bit of bottom
00:44:22 – margin and then let's give this input
00:44:24 – type of text and placeholder i'll just
00:44:31 – say enter name
00:44:33 – ok so there's our Moon labeling input
00:44:39 – now under it we're going to do the
00:44:40 – username so I'm just gonna copy this and
00:44:44 – then i'll just change this to user name
00:44:47 – change the placeholder as well and under
00:44:54 – that we're going to do the password
00:45:01 – so let's change the type from text to
00:45:05 – password and say enter password
00:45:12 – let's copy the password label and
00:45:15 – including i'm going to do a confirm
00:45:16 – password
00:45:18 – ok and then we'll do our button you're
00:45:25 – going to have a class of rw3 you want
00:45:31 – red nose two black III black and I want
00:45:36 – to be a block button meaning i wanted to
00:45:37 – go all the way with all the way across
00:45:40 – so for that we can do w three dashes BTN
00:45:44 – dash block
00:45:47 – ok let's also give it w 3 section and w3
00:45:53 – pattern and that will just play submit
00:46:02 – ok let's save it and let's hope it works
00:46:05 – so to reload and start here
00:46:09 – well it doesn't look right
00:46:13 – okay so something is wrong here we'll
00:46:17 – start modal all this
00:46:21 – this needs rw3 excited that should be it
00:46:26 – hopefully yet knows it
00:46:32 – this close button should be over there
00:46:35 – believe she see our stand right here
00:46:41 – that has the oh yeah I need to class as
00:46:46 – well so right here with a class that's
00:46:51 – going to bw3 dash close BTN ok so now
00:46:59 – it's over here and it's a little bigger
00:47:01 – good so that's it guys
00:47:04 – hopefully you enjoyed this little
00:47:05 – project will use this framework in the
00:47:08 – future as an alternative to bootstrap or
00:47:11 – foundation if you want to just kind of
00:47:13 – give it a new look
00:47:14 – because often bootstrap sites can all
00:47:17 – look the same so this gives you just
00:47:19 – another option alright so thanks for
00:47:21 – watching guys if you're not subscribed
00:47:23 – please hit that subscribe button if you
00:47:25 – liked it leave a like and how even leave
00:47:28 – a dislike if you didn't like it
00:47:30 – alright so thanks for watching and I'll
00:47:32 – see you next time


Video Url:
http://youtu.be/PJHBKwbf4Us

Comments

comments