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
Class Project 05 – Header design
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
Student class projects
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.
Downloads & Exercise files
Transcript
All right, it is class project time again. We're going to take our ugly looking Heading to, ah, look at that. The background color changed, we've got a different Heading up here, we just styled it. So the requirements are, like always, in our Exercise Files, in a folder called Class Projects, and open up that Word doc. These are the requirements, so this is what we're making.
The text should be white, at the moment it's black. This thing here is our research project. So we haven't covered Span Tags or Span Classes before, but I want you to have a look online, see what you can find out about it, and see if you can implement this. So basically at the top here, can you see, part of it is bold and part of it is not bold. And it's going to be really helpful learning Span Tags to do things like this.
The term Span Tag and Span Class are kind of the same, look at both of those. The big thing is that they're on the same line, whereas I could do CSS, two different tags, and they'll be on separate lines, and then I could kind of fudge them to get them to line up together, but Span Tags or Span Classes are really helpful for this. That's all the help you're getting. I want to see if you can find it out and implement it.
Next thing you're going to do is stuff we have done before. The logo should be left, and the navigation over here on the right hand side. So left and right. What else we're going to do? I want you to Center these two, center in the Header, not along the top, vertically, centered nicely So do that for both of them. Style the buttons like we did, we've done that a couple of times now, so you can see, these are A-tags that are workable. I've got to hover over them, I can click on them, and they have a line around the outside, I want you to do that.
The last one is to set the entire background to this color here. It's just a kind of a, you see the difference; before, white. This one just kind of a light gray to separate these things out. When you've done it send me a screenshot, your proof of, "I've done it," and it's looking okay. Before you move on to the next video, remember, you can put them in the Assignment section of this website, depending if it has it or not, or the Comments on this page. Send me a little screenshot, thumbs up, smiley face, or angry face if it's not working. Also send that same image, tag me on Instagram, tag me on Twitter. Use these hashtags, so #byol, that's what I used to kind of separate the different groups of courses that I'm doing, and join the Facebook group. It's an Invite only, so request to be accepted, and you will be accepted, and then post your screenshot.
Don't do it if you don't want to, we'll do it all together in the next video like we do, but I know the people that bother taking this extra time, and messing around with it, and getting lost and finding their way, are the people that really will find Web Design, kind of, it will stick a lot better when you have to actually go and implement it, rather than following me step by step.
I'm trying to guilt you into doing it this time, I've tried threatening, disappointment, I've done my disappointing face, I've stuttered a few times. This one, I'm going for straight up guilt. All right, off, do your work, and I will see you in the next video.
The text should be white, at the moment it's black. This thing here is our research project. So we haven't covered Span Tags or Span Classes before, but I want you to have a look online, see what you can find out about it, and see if you can implement this. So basically at the top here, can you see, part of it is bold and part of it is not bold. And it's going to be really helpful learning Span Tags to do things like this.
The term Span Tag and Span Class are kind of the same, look at both of those. The big thing is that they're on the same line, whereas I could do CSS, two different tags, and they'll be on separate lines, and then I could kind of fudge them to get them to line up together, but Span Tags or Span Classes are really helpful for this. That's all the help you're getting. I want to see if you can find it out and implement it.
Next thing you're going to do is stuff we have done before. The logo should be left, and the navigation over here on the right hand side. So left and right. What else we're going to do? I want you to Center these two, center in the Header, not along the top, vertically, centered nicely So do that for both of them. Style the buttons like we did, we've done that a couple of times now, so you can see, these are A-tags that are workable. I've got to hover over them, I can click on them, and they have a line around the outside, I want you to do that.
The last one is to set the entire background to this color here. It's just a kind of a, you see the difference; before, white. This one just kind of a light gray to separate these things out. When you've done it send me a screenshot, your proof of, "I've done it," and it's looking okay. Before you move on to the next video, remember, you can put them in the Assignment section of this website, depending if it has it or not, or the Comments on this page. Send me a little screenshot, thumbs up, smiley face, or angry face if it's not working. Also send that same image, tag me on Instagram, tag me on Twitter. Use these hashtags, so #byol, that's what I used to kind of separate the different groups of courses that I'm doing, and join the Facebook group. It's an Invite only, so request to be accepted, and you will be accepted, and then post your screenshot.
Don't do it if you don't want to, we'll do it all together in the next video like we do, but I know the people that bother taking this extra time, and messing around with it, and getting lost and finding their way, are the people that really will find Web Design, kind of, it will stick a lot better when you have to actually go and implement it, rather than following me step by step.
I'm trying to guilt you into doing it this time, I've tried threatening, disappointment, I've done my disappointing face, I've stuttered a few times. This one, I'm going for straight up guilt. All right, off, do your work, and I will see you in the next video.
- Powered by Marvin
- Terms of use
- Privacy policy
-
- © Bring your Own Laptop Ltd 2024