Class Project 01 – Div Tags

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

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

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I 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

Download Exercise Files Download Completed Files

Transcript

Did he say, "Homework, in the last video?" I did. I think of it more of it like an awesome way of getting your skills better. So I'll set projects throughout the course. You'll find the details of them, I'll make a little video like this to explain it, but also, in your Exercise Files there'll be a folder called Class Projects. There'll be a Word document in there, and that's what it looks like. We're upto Class Project 01. So we're going to work through what you need to do, and I'll keep adding to this as we go through the course. 

If you don't have Microsoft Word, you can open this document in lots of other programs. If you get really stuck, try Google Docs. You can use that to open a Word doc. So what do you have to do? You have to create two separate websites. So what I do is, in VS code close down everything, and make - I'll save it - and make a new document. So we're going to make a new one. The first one's going to be called Class Project 1A. There's two parts to this, 1A and 1B. The first one is this. I want you to make this. 

I've given you a bit of the details. So the name of it, these are the boxes, and you can kind of see in this visual here, the nesting I want you to do. Green box is inside the blue box, etc., etc. The sizes are down here because my handwriting is not great. There are larger versions of this, you can either make it bigger here in Word, or in your Exercise files, I'll put a copy of them in Wireframes, and it is Div3, here it is, there, and Div4. So those are the two things you’re going to be making. 

This one's pretty easy, we've done it before, this one's a bit of a curveball. Because I want you thinking about Div tags, and how they work. So this one, let's look at the second one. The difference is we've got two boxes inside of each other, that's easy, yellow box, gray box, but then I want you to put it in two H1s, there's one inside this yellow box, and put some text in it. Doesn't have to be what I've written here, but some text in this one, and then another H1 out here. 

How do you get it out there? So it's kind of like, it's outside the yellow box but inside the gray box. So I want you to play around with that. Once you've done it, say you build it all in Visual Studio Code, which we'll preview it in Chrome, and take a screenshot. Now on a Mac you hold down 'Command-Shift-4'. and you can drag a box around it. Click, hold, and drag. And that gives you a screenshot, you should put it on your desktop. Kind of see mine down here. And I want you to share that with me. On a PC it's different, you've got a Print Screen button on your keyboard. You might have to double check that, how to do, on your version of Windows. It's different on lots of different versions of Microsoft Windows. I'm not up to date with them all, so just check out how you do a screenshot. I think it's just Print Screen on your keyboard, then you can paste it, but the reason is, I want you to share it for me, because I want to hold you accountable to these things. 

I want you to prove to me you've done it. All you need to do is share it in the comments here, to say, "Look, I did it." And if you run into any problems, drop it in the Comments. What I'd like to do-- because we're at a reasonably simple stage. If you do run into a problem, and you're like, "I can't make this one work", post your questions in the Comments, and ask for help. And for the people that are doing this course, that do do it successfully, I want to kind of instill a bit of, helping everybody else out. So if you're in there, and you're posting yours, and you did it, and you're like, "Yeah, I did it," go in there, and if somebody has a problem, like, “Mine's not working because of this X, Y, & Z,” you can help them, just explain what you did to make it work. "Get this, like bit of text outside of this tag." 

I want to kind of instill this in the group so that we're not just all relying on me to kind of go in, and start working on everybody's code. I'd like you kind of to help other people so that you learn it better. You get what I mean. So where do you post these things? You've taken two screenshots, and your Microsoft Doc explains it. It says, depending on what website you're viewing this on, you might have an Assignments section. There might be a place to actually put it, or there might just be a place in the Comments, so just stick it in the Comments. 

Also, like this, this, all of this, or do them all in social media. So stick it on Instagram, tag me, Twitter, tag me, Facebook group, here, tag me. Just so I can see that you've done it, and what you should do on all of these is add a hash tag. I thought about this earlier. Add a hash tag when you are-- so tag me, and add the hashtag BYOLweb. Just so that I can group them all together, and all them. So that when I'm reviewing it I can look at web stuff different from my other courses. So Instagram, Twitter are good places to post visual stuff. And in Facebook there's a group here. It's got a terrible name so I've added a link. It's called the, what's it called? Bring your own laptop online group. It's a group, hello me, where we share lots of-- at the moment there's not a lot of web stuff, lot of UI stuff, lot of Illustrator, Photoshop, InDesign, bit of UX/UI, and now we're going to introduce the web stuff with this course. 

So post it in here, add that hashtag, and say, "Yes, I did it', or 'It's broken." Hopefully somebody will jump in and help you. I'll try my best to get in there as well, and help out. That is your homework. Don't think of it as homework. Think of it as getting more awesome at Web Design. Is that it? That's it. Class project over. I will see you in the next video
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024