SECTION: 1
Getting Started
9:55
SECTION: 2
Introduction to HTML & CSS
1:08:03
SECTION: 3
Project 1: Restaurant Website
2:40:45
SECTION: 4
Project 2: Bike Repair Website
6:12:48
SECTION: 5
Project 3: Responsive Portfolio Website
2:53:33
SECTION: 6
Project 4: Bootstrap Yogurt Website
3:35:39
SECTION: 7
What Next
6:32
How to change hover color & animate my button in HTML & CSS
SECTION: 1
Getting Started
9:55
SECTION: 2
Introduction to HTML & CSS
1:08:03
SECTION: 3
Project 1: Restaurant Website
2:40:45
SECTION: 4
Project 2: Bike Repair Website
6:12:48
SECTION: 5
Project 3: Responsive Portfolio Website
2:53:33
SECTION: 6
Project 4: Bootstrap Yogurt Website
3:35:39
SECTION: 7
What Next
6:32
Questions
Course info
Overview
Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.
We will build 4 sites together...
- a simple but elegant restaurant website.
- a bike repair website.
- a responsive portfolio website.
- a Bootstrap website.
We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.
There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.
We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery.
You will...
- Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.
- Learn how to create forms and to choose great fonts for your website.
- Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.
- Setup a domain name with hosting so that your website is live on the internet for others to see.
There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.
If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step.
Who am I?
I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.
Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.
Course duration 16 hours 42 mins
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Certificates
We’re awarding certificates for this course!
Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.
How to earn your certificate
Work your way towards your certificate for this course by following these simple steps.
- Watch the course videos
- Complete the Class Projects - look out for the videos marked with
- Upload your class projects into the My Projects area in your account
- Complete and pass the Knowledge Quiz (Merit level courses only)
- Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
- Upload your Distinction project to the My Projects area in your account
- Request your certificate when you've completed the requirements for the certificate level you're working towards
Good luck!
Pass certificates
We’re awarding ‘Pass’ level certificates for this course.
You can work your way towards your ‘Pass’ certificate by following these simple steps.
- Watch the course videos
- Complete the Class Projects - look out for the videos marked with
- Upload your class projects into the My Projects area in your account
- Don’t forget to request your certificate when all your projects are complete
Good luck!
Downloads & Exercise files
Transcript
Hey there, up until now our button has just set there, not doing very much, but now watch when I move my mouse over, it's faded in green, that is called a Pseudo Class. We're going to use the Pseudo Hover. I'll show you how to do it now in VS code.
Currently my button has no hover. When I mouse over it I get the kind of Mickey Mouse hand, but I don't get that hover like you saw in the intro. The way to get that is something called a Pseudo Class, because this A-tag here has more than one kind of state. It has a 'not being touched' state, it has a 'hover’ state, it has a 'when I click it' state, and it has 'I've been there before' state. Those are not the technical words but you get what I mean.
There's a kind of-- it does a few different things, and you can attack them by creating a Pseudo Class. The Pseudo Class works like this. I'm going to do it to my button, because that's what I've got applied to this thing. So you create another Class, and you say, my button, okay, I spelled it right. You need-- I would like to attack the hover, and the way a Pseudo Class works is that it all needs to be joined up, and it needs to say that, so I'm going to be attacking the hover, the hover state of this button, and what are we going to do?
I'm going to change the background color, and I'm going to pick something. Put my semicolon. Select it, I'm going to pick probably something a little bit warmer up in here. And hopefully now when I preview it, I can hover above it, there you go. That has a pseudo state of hover that I've found and changed. Cool, huh.
You might have noticed in the intro, I made it fade, let's do that. So in css3 we can do a transition, transition duration, so it's going to do, how long? We'll do 1 second. So it's going to take 1 second for this thing to activate. Let's give it a preview, ready? Ooh! Cool, huh!
Now we've looked at the Hover state, there are other ones. I'm just showing you w3schools.com for the different Pseudo classes. That's the one we've talked about, let's have a look at their-- so there's Down hover, it's the main one you're going to do. I never touch Visited link or Active, but let's have a little look just so you know what they are.
So at the moment-- it's red if you haven't clicked it. I've already clicked it so it's green. So I've visited this, so it's green, when I mouse over, it's hot pink. There you go, that's what we've done, the hover, and this one here, when it's active it goes blue. Watch this, when I click it, it goes blue for a second. I never color that, because who is going to see, because I click it like this, like a normal person. Super fast, and you never see the color change. It's up to you though, you might be loving changing the active color, you can see, just the syntax, it's a colon, 'a:', and then these are predefined.
It's going to make sure that it's the colon in between. There's lots of other Pseudo classes, down the bottom of this w3schools, there's a bunch of different ones. We're going to cover a few more of them in the next video. So yeah, we'll cover the ones that I use anyway. Lots of them in here I've never had a chance to use, but yeah, there are lots of Pseudo classes outside of just hover. Let's jump into the next video and check a few of them out.
Currently my button has no hover. When I mouse over it I get the kind of Mickey Mouse hand, but I don't get that hover like you saw in the intro. The way to get that is something called a Pseudo Class, because this A-tag here has more than one kind of state. It has a 'not being touched' state, it has a 'hover’ state, it has a 'when I click it' state, and it has 'I've been there before' state. Those are not the technical words but you get what I mean.
There's a kind of-- it does a few different things, and you can attack them by creating a Pseudo Class. The Pseudo Class works like this. I'm going to do it to my button, because that's what I've got applied to this thing. So you create another Class, and you say, my button, okay, I spelled it right. You need-- I would like to attack the hover, and the way a Pseudo Class works is that it all needs to be joined up, and it needs to say that, so I'm going to be attacking the hover, the hover state of this button, and what are we going to do?
I'm going to change the background color, and I'm going to pick something. Put my semicolon. Select it, I'm going to pick probably something a little bit warmer up in here. And hopefully now when I preview it, I can hover above it, there you go. That has a pseudo state of hover that I've found and changed. Cool, huh.
You might have noticed in the intro, I made it fade, let's do that. So in css3 we can do a transition, transition duration, so it's going to do, how long? We'll do 1 second. So it's going to take 1 second for this thing to activate. Let's give it a preview, ready? Ooh! Cool, huh!
Now we've looked at the Hover state, there are other ones. I'm just showing you w3schools.com for the different Pseudo classes. That's the one we've talked about, let's have a look at their-- so there's Down hover, it's the main one you're going to do. I never touch Visited link or Active, but let's have a little look just so you know what they are.
So at the moment-- it's red if you haven't clicked it. I've already clicked it so it's green. So I've visited this, so it's green, when I mouse over, it's hot pink. There you go, that's what we've done, the hover, and this one here, when it's active it goes blue. Watch this, when I click it, it goes blue for a second. I never color that, because who is going to see, because I click it like this, like a normal person. Super fast, and you never see the color change. It's up to you though, you might be loving changing the active color, you can see, just the syntax, it's a colon, 'a:', and then these are predefined.
It's going to make sure that it's the colon in between. There's lots of other Pseudo classes, down the bottom of this w3schools, there's a bunch of different ones. We're going to cover a few more of them in the next video. So yeah, we'll cover the ones that I use anyway. Lots of them in here I've never had a chance to use, but yeah, there are lots of Pseudo classes outside of just hover. Let's jump into the next video and check a few of them out.
- Powered by Marvin
- Terms of use
- Privacy policy
-
- © Bring your Own Laptop Ltd 2024