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 04 - Custom Button
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, you can tell by the name. You're like, "Oh no," it's another class project. Don't worry, this is fun. Me saying it doesn't make it true, but it's learning, we're going to learn.
So Class Project4, if you're looking for the notes for this, it's in your Class Projects folder. There's a Word doc in there. Now couple of things you want to do. The main thing is, make it look like that. Currently it looks like this, with these buttons that were used. I want you to make it look like this. There's a line around the outside, there's no fill, using Playfair in the middle there, white text, there's no underlines, just make it look like that. Keep this one down here, so leave my button alone. And you create a new one. I've suggested one called Nav Button, you can call it what you want, but those are the things.
Now one of the big things is that, you don't know how to do borders yet, we haven't done it. I purposely left it off for the moment, because I want you to-- teaching you how to fish, that thing. where, either just Google it, or look for Stack Overflow, and a way to kind of put a line around the outside. I'm avoiding the language that actually gets found, because I want you to be able to find it, and implement it yourself.
There's a couple of ways of doing it. We'll export all those in the next one. Anything else that needs to go in? They're all going to be A-tags, which they already are. We're going to create Button Nav, put a white border, Playfair. Text is white, no underline. Background. No background color. When you are finished, before you move on to the next video, I want you to take a screenshot of it, and just share it with on social media, to say, "Yep, did it." If it goes horribly wrong, you can share that picture too. I guess I just want you to be held accountable.
We got no way really to assign it, you're not just taking a photo of that, It's just a way of us all kind of, you know, it's a bit virtual, this video stuff, but you can kind of connect by social media. Just remember to use the hashtag byolweb, bringyourownlaptop web. And the Facebook group here, don't forget about this, I'll mention it again because it's all handy, it's grown very well, and there's lots of people replying.
I love that latest project from Steven Butler, he's one of the moderators. He turned his kid's drawing, or I think it's his nephew's drawing into that. Look how cool it is. Anyway, his video stuff, you can see here, that is some of the UX stuff from XD. There is all sorts of cool stuff in here, but I want some more Web things on here, at the moment it's very graphic, for our other courses.
So check it out, it's bringyourownlaptoponline. It's a group, you have to ask to join. Yeah, post your little screenshot there. All right, I will see you in the next video.
So Class Project4, if you're looking for the notes for this, it's in your Class Projects folder. There's a Word doc in there. Now couple of things you want to do. The main thing is, make it look like that. Currently it looks like this, with these buttons that were used. I want you to make it look like this. There's a line around the outside, there's no fill, using Playfair in the middle there, white text, there's no underlines, just make it look like that. Keep this one down here, so leave my button alone. And you create a new one. I've suggested one called Nav Button, you can call it what you want, but those are the things.
Now one of the big things is that, you don't know how to do borders yet, we haven't done it. I purposely left it off for the moment, because I want you to-- teaching you how to fish, that thing. where, either just Google it, or look for Stack Overflow, and a way to kind of put a line around the outside. I'm avoiding the language that actually gets found, because I want you to be able to find it, and implement it yourself.
There's a couple of ways of doing it. We'll export all those in the next one. Anything else that needs to go in? They're all going to be A-tags, which they already are. We're going to create Button Nav, put a white border, Playfair. Text is white, no underline. Background. No background color. When you are finished, before you move on to the next video, I want you to take a screenshot of it, and just share it with on social media, to say, "Yep, did it." If it goes horribly wrong, you can share that picture too. I guess I just want you to be held accountable.
We got no way really to assign it, you're not just taking a photo of that, It's just a way of us all kind of, you know, it's a bit virtual, this video stuff, but you can kind of connect by social media. Just remember to use the hashtag byolweb, bringyourownlaptop web. And the Facebook group here, don't forget about this, I'll mention it again because it's all handy, it's grown very well, and there's lots of people replying.
I love that latest project from Steven Butler, he's one of the moderators. He turned his kid's drawing, or I think it's his nephew's drawing into that. Look how cool it is. Anyway, his video stuff, you can see here, that is some of the UX stuff from XD. There is all sorts of cool stuff in here, but I want some more Web things on here, at the moment it's very graphic, for our other courses.
So check it out, it's bringyourownlaptoponline. It's a group, you have to ask to join. Yeah, post your little screenshot there. All right, I will see you in the next video.
- Powered by Marvin
- Terms of use
- Privacy policy
-
- © Bring your Own Laptop Ltd 2024