Hi everyone. This video is going to have two parts. We'll talk about the things that we're going to actually do in this kind of next section of the course. And also we'll get that kind of course stuff set up like the remote folder and connecting the CSS that type of stuff. And so we'll do it first. We'll tidy everything up and get ready and then we'll go through everything we're going to do. And so at the moment I'm on my explorer here. Okay. And we are currently using the local folder called Project one. I do not want to put a second website in here because we don't want to index files because we can't so we're going to go to file and we're going to go to open. It depends on how you like to do this. Okay. I'm going to go to my desktop. I'm gonna make a new folder. Go to the project two exciting, click open. Nothing really happens. I've got an empty kind of folder back to the welcome screen outline. I'm going to close down by clicking on it and I'm going to create an index file and sty...

les and connect them both up. So file, new file. This one is going to be saved and it's going into the right place. Nice. Index dot html or spelt right? All has to be lower case. Let's create a 2nd file. This one is going to be saved. It's going to be called style style dot CSS or main or styles will connect the two of them up. Actually, let's just move them across by grabbing the tab, everything nice and looking pretty before we get started and it's connected to so remember exclamation mark, hit return. Put it all in there underneath this. Okay. It doesn't have to be underneath this. I don't know why. I feel like the title needs to be down below but it doesn't have to be Okay. There are some order issues. Okay later on. But the moment it doesn't really matter what styles are, as long as it's before the closing of the head. So we're going to do link and we'll do a linking of CSS and it's pick style. Remember just guessed it. But that's what we got. And is that it? I think that is it? I like toiling up open editors because I find that confusing. That's me. Now let's talk about the things we're going to cover in this course. So let's have this up. This is the design I did in adobe XD if you if you like, what is this program? XD. It's a different bit of software and it's just the design. Okay. It's not coding. It's not an actual website. It's just like a mock up. It's a really good program. I've got a course on it. If you want to go check it out. Okay, look for my XD course, but what are we going to cover in this one? We are going to do things like gradients in the background, there's a slight one there, we're gonna build these kind of cards. Okay, where we've got, we're gonna look at icons, we're going to look at creating those little modules that probably the biggest thing we're going to cover in this course is something called flex box. Okay. We've been styling gives at the moment and kind of moving them around, we're going to have to kind of do some cool stuff where they all stacked next to each other and bits on the left and bits on the right and the last project to keep it quite simple so we can stage the stuff out. So I'm gonna look through my list here, we're gonna start off with a CSS reset. What else we're gonna do? We're gonna look at commenting in the code. We kind of looked at that already minimum height flex box is the big one. We're gonna do fonts because at the moment we've just got that area, we're gonna do fancy google fonts and we're gonna look at different font sizing things like Eames and rims, we look at images properly, how to create them. The differences between jpeg and PNG s. We'll make these buttons instead of just text. There's one there, we'll add some drop shadows there's a drop shadow on this fella here, there, he is rounded corners. Another couple of big ones is we'll do a drop down menu. So when you book online that will drop down and we'll actually have a proper navigation and we'll look at creating a form rather than just that really simple mail to We did in the last one. And that's gonna be it for this project. Let's to cover Project three. Remember is going to be a responsive website, so at the moment this one's not going to adjust for mobile, we'll get into that in the third project, and the fourth is going to be bootstrap. Alright, ready? Said, go on this new project. I'll see you in the next video.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Setting Up Our New Project

Setting Up Our New Project

Lesson Info

33. Setting Up Our New Project

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks