Practical Project

11 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$20
€19.22
£15.98
CA$28
A$30.82
S$26.98
HK$155.67
CHF 17.78
NOK kr222.73
DKK kr143.39
NZ$34.28
د.إ73.45
৳2,401.08
₹1,689.36
RM89.35
₦33,821.60
₨5,558.50
฿691.90
₺691.45
B$116.24
R361.82
Лв37.55
₩28,134.10
₪74.47
₱1,178.98
¥3,090.11
MX$409.38
QR73.25
P274.30
KSh2,590
E£993.47
ብር2,503.86
Kz18,253.21
CLP$19,474.80
CN¥144.98
RD$1,210.66
DA2,673.38
FJ$45.52
Q155.10
GY$4,203.65
ISK kr2,793.40
DH200.94
L364.79
ден1,175.23
MOP$161.08
N$363.56
C$735.40
रु2,703.54
S/76.32
K80.88
SAR75.09
ZK554.05
L95.66
Kč488.04
Ft7,905.03
SEK kr222.61
ARS$20,080.67
Bs138.82
COP$88,773.05
₡10,213.96
L507.74
₲157,698.39
$U856.20
zł83.53
Already have an account? Log In

Transcript

Hello everyone. Actually in this project, we are going to learn how we can use the elements that we have learned before, in order to create a real website. Suppose that you want to create a website for my CP, for example. So I'm creating a home link, while it displays some information along with the image, then some information, then objective, and you can add as many links as you wish. Okay, how we can create such a simple website. First of all, as a rule of thumb, just keep it simple.

Don't try to complicate things. So for example, now how it created such a thing, I'm using the theme. So this is a theme so that whenever I need to change my data or need to change Only one piece. And also this is another thing. It contains links. So whenever we need to add a new link, we just need to add one piece only.

And this is the content. Of course content varies from one page to another. So let us see how we can live with this. First of all, we'll create a file named index so that it becomes the default name. Now let's see. This is actually made by Apple.

This is an apple display here. Then, we need to create a frame set of rows equals one for gate and store. This means I need to create two things or resolve them James By creating the new posts, so, first thing is 148. It's in fixes. And whenever you mentioned stalled This means that the other team occupies the available space. Okay, so in Boulder equals zero frame spacing equals zero.

Now the first frame is going to have the top dot html. This is a top five, this is where it contains the image. So this is the contents of the top part. But now coming to the other row, I need to read divided again into two frames, but these frames or that can so I'm using the goals attribute. So the first column is hundred 54 pixels. And the second dream will you cook by the available space So now you have a frame, its source is this is where it contains links.

And it doesn't mean and this frame is the source. It's home. This is the mean homepage and its name is. So this is simply the division. So this file simply what it does, it creates two panes one, this frame containing the header and this frame containing more contents in this screen is also divided into two things. One is left contained links and one for the mean containing the main contents.

Okay, so this is by though second point is the top five now, what Contains it contains these images. Of course, you can get images from deputy designer or from the websites. So searching the net, whatever. So now, I have such source code, it has a body and it has a table. Now I'm creating a table every only one row is one table and the contains the required images. So you have top 1234.

So the idea here is that I have a folder named images like this. This is images, keyword, images folder. And inside this in this folder, I have some images so you can see here this is go 1234 So this is what same thing creates this header. I can edit some images for them just in order to create something. Of course you can use only one image, having the full size, whatever user select to select an image to be a big round like this and you can include 234 images as you wish. So this is a top notch.

No, we're going back with the sealer. Okay. I'm using the spreadsheet that we have learned before and here creating the grown image you One whenever you take a look, this is like this hopefully at the table with three rows each row contains anything like this and it's loss is mentioned is the style. So this style of course, will be available in this style sheet. Okay so I have a link here for home another link for info and another import object. It gives us a target this mean if you remember the first file contains a frames we named the contents is mean this frame is named mean.

So level you have a link. You just need to mention to the target is mean okay, let's Take a look at the study sheet. It's a simple spreadsheet pose a healer style, and who have taken the style sheet before this simply creates the style for the header like this, then the style four days so now we'll have known about index foreign live in the study sheet. So let us take home bomb simply contains a table like this, which table row is close is Hello. So this is how it looks like. Of course you can be with a lot of to achieve whatever color you Then this is the home folder like this, then have a simple test along buies Mall image.

Okay, take care of one thing that I have used by is background your images slash eg dot JPG and its background repeat no repeat. Background size is cover. Well background size equal equals cover. This means use the background image is a size for your whole width, whatever your screen resolution is. That no repeat means it's not going to repeat because it was a background image size is small is going to be people don't want it to repeat. And this is a background image.

So you're going to find easy Of course you can use whatever image you need. You can download from the internet, whatever image with background effects, maybe natural or senior in your image, whatever. We're talking here about the main idea. So I have here my background, displaying GUI gradients, like this. Other three file are the two files of repeating. So I have it simply again from using the background image, and then using a simple table and another table for more info.

It is simple things that we have learned before. And objective is also a repeated thing just displays more of your Again, you can create as many links as you need, you can select another background image, you can create a different style for your title, create whatever you need in order to have your final website with the contents that you Okay, so now we have combined almost all elements that we have learned in the course. And of course, you can create some initial effects like marquee or whatever, in order to have the final version of your website. So I can tell you some assignments, create some more links here with the real information about yourself. Maybe section four expertise, work experience. certificates of completion and skins whatever and you can create these this is the monkey effect okay guys so in this project would have learned how to create a simple website for us it looks nice and with some more effects you can create more facility website Okay guys, you can refer back to previous chapters, especially for chapter 12 where you have learned how to publish this website over then comm that's it guys hope you enjoy my course.

See you soon in CSS course and you

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.