How to make website using Skeleton Framework | Kamel Altohamy | Skillshare

How to make website using Skeleton Framework

Kamel Altohamy, 3D Designer

How to make website using Skeleton Framework

Kamel Altohamy, 3D Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
2 Lessons (25m)
    • 1. How to setup the framework and setup the wrokspace

    • 2. Coding the Web file Html(structure)

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

in this class you will make one page website using the framework skeleton,

Hope you enjoy this class if you have any question 

just leave an comment if there is any request or suggestion don't hesitate to contact me anytime.

Meet Your Teacher

Teacher Profile Image

Kamel Altohamy

3D Designer


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. How to setup the framework and setup the wrokspace: All right, head over the welcome. My name is gonna come on. Guy will walk you through in the u toe. New micro framework, which is is this skirt This is a is optional upside for this framework and, as you can see, is a head line. Simple boilerplate. Three more. So if you hear the condiment, it's a very tiny framework around it. Kid away. So what is there using or what? Is there a mean usage for this framework? As you can see, it's like on its own for 400 lines only will bid for my soul. Is this benefit for using this framework? Which is, is it so difficult on if you are using your skills to make sandwiches ending big or some same bill very simple apps that you don't need to learn high level framework like bootstrap or matter lies or any framework such as tradition from a sort of conditions. But you can use a simple phone simply from what? Like get Skelton or Skelton. I mean, because it has a basic use it for anything such as the grid 2. Coding the Web file Html(structure): So let's continue our listen what our cities would Skelton on. I have mentioned that if you want to make a, some are upset or if you want to make it in debate, you don't need to learn something. I living like metal allies or foundation. But you want microphone work, which has the basic tools that you want a the my day, such as a great system or such as a refugee or such as the bottles. Oh, or the former. All these tools or all these times are you are found, and you can find it easily in Skelton or any framework, such or any microphone work started to see what this cannibal with us it z First Advantage Skelton framework, which is explosive or its build like extra bits Bill before you can build your upside for a while on its you can see it's around its ally to it on this is a great system. It has a twin Coolum fluid great mid flicks books on it has maximum side off 9900 and 60. Vaccine on this is the same size for great system or is a basic agree system for, I think, also for Theaterworks trip on. As you can see, it has one toe live in if you have to tow column here. So it's a ringing distant, so how you can define his address system, it can easily by container toe element, ugliest eso. It's now 160 on you can define arose, and you can define one column here and live in Coolum like Kulemin is like this. So when colon or even coolant, so too is in a tank with So this is great system and that graffiti is This framework is based on real away from Google Fonte's Onda, and it says that it is 24. I think on the basic front from around 15 all these things are set by default on this eyes . They really fault. It's a very, very mice formed on what I was the bottoms. It can be defined by bottle or by the bottom. Brennan. If you walk toe bottom toe will get a music bottle exist on the bottom primary will be like this. This is on the form and you can see this is nice for on it has been fined boy row on. If you want toe be this element to be fully rubbed in the container. You can define this you forwards on like this, youthful with in the text area of Lewis and Nick. Like just it has be you forwards to be a rod completely in Essex. What we have here also we have the list and you have the code. If you toe a good like this, you can see three tag on the good and able to good inside this so it will be. It's really nicely and it turns the tables on it has this media query So for the food, well, it has minimum or I think maximum with for 400 pixel and everything about this would be a tablet. Everything it will be for a tablet. Everything more than 750 would be a tablet on this will be everything between these values will be expanded to be high a lot. Andi, finally we have this I have mentioned earlier you feel which to be 100 maxim with you Mexico forwards and we have a whole right left on clear for a clear. So this is attend classes and as you can see way would make in this. Let's see Also have Andi. Uh So before we start toe make our brick, I must say that this framework has some drawbacks. The first drawbacks. It's a bit in, I think is Ah. Around the two years ago, it has been updated. And if you want something, Onda also, if you want a toe, ask something So the community forces from framework isn't much large as others. So it's start by using Sablan tickets, and I will have started this. And after that, I will make. Is this new Tim bit on? After that, I will say that we have this. This is a close off container, but we haven't. And you, uh, did any link. So we will link our see assists. We have their way can say framework or way have the, uh we have this cute pluses, so let's save. All right, So if you go here way, have some skeletons which is year and you have the normalised we will get us both. We will use it to reset. This animal is will be used to re sit on. This is a free work and this is our own styles. So Let's start boy, I think all these So we have three more, which is Skillet on. And after that we have is there we have the reset, which is which is more? Malloy's on. Finally, we have our own styles, which is Stiles Got cirrhosis. If you want to override, is a basic styles or even customers you honest are you must add these styles in all cases you want toe your but let's get started, boy. As you can see here we have this template. It's the victory. But we have here. Is this heather or GIs? Mean area on is sexual number one and you have here a food assorted started by making are so we have a container and you have the cross off road. Onda also I will see it 100 area on the read you on. After that, we have two classes which is this one which is where rough on the bottle. Onda, we have this iPhone so we have a graph bottom on iPhone eso. Firstly, we have a row which is a disease, and you have is in our own seven, maybe six, according I think six. So let's start by making close and close off. Maybe it's even, Let's say it will be si 64 No. And you have other six column, so it will be to it. So we have you have a rough Andi, I will. Could be some tickets and missed it here. So feel free to use your own Laura Epsom tickets on the After that I have on protect this and protect will be went to nothing. And it has the close off a primary Marie money. But like this, do maybe click here. After that, we have in this six column you have on any source to be images on iPhone, I think would be energy on close will be maybe, uh, waiting image like this, and it's see what we have here. So in our image, we have this iPhone on you can be because it has being here. Later we will see how it's work about. I think now we can add a comment here. It's recommended on it will be here first stick shift. So we have four sections. And after that I will call me this comment on After that dinner here I will be your second second dissection. Another time Another time to have this to be certain section and have it, Toby Force Force a section on. After that, I will start a new role, which is a new section on Uh maybe Let's see what we have here. So we have It will be, Let's say statistics. Or maybe in four. So we will see in for so in full area. We have three columns. So we will say that we have close for Cordless Onda. We have those ever for. So inside this we have city bar graphs. So what we have here? Andi, are you see? We have close Do close. Oh Colon, This will be Make every item and your and you uh line so we can see off inside this we have paragraph on inside this We will say that we have this person Onda It's Kobe. It another time. Another quarter And you have done for Weber. She's inquiries on Do have this financing on after that. Let's see, we have for it's so I will copy this on Divest it here. Andi missed it Here. So what we have here? We have mine person on do we have and it is this Andi way have this kitty is tickets. So let's start other time I believe it. Souls to go for the sale of the section we have here something very simply. We have a rough and they have rough but it's are growing. I think it's own Ah, it couldn't maybe or 10 column. So how we can achieve this symbol or sick? Maybe and close off rule Onda we have we have here this role on do have this rule and you have a little s o we can say Is that on close? You'll full What's Andi under time? Then we have unprotected. Andi went to nothing close would be but I marry but one on way Have This will be a few view is, uh, looks on. I think we are now done. So let's comfort the first section. So we have So I did plus off and we have here paragraphs Two paragraphs. So it's a ever off the cool, but it's ahead three. So I think we must change it to be his city on. This will be both Onda and it's calling it on. Just tear. And then we have on a row another rule. We have other rules on this time. We have the truth. Lives close off. Six. Columnist on Do you have an image source to be images? Um bliss holder looked the energy. Andi, I think close would be tiny image. Let's call this. I missed it here. And you can, uh, see our beach. So I will refresh in the brother you lost. Opens this index. It's human in the overalls on all right, soldiers is beach. And then you can see it's, uh, no as the image that we have seen. So where we can make it looks like the image that we have seen Tell me we can make this image to look like this one. So let's start from here. Therefore, I will start to open our own. Andi, I will try toe it. Here we want is oil. So I did it on start from the restriction which, which is here under is a So I will se 100 area. Andi, I think we can say that it will be and it's one on explored. Are you futures? And is the website maybe? Or in the form sore? We have this under its fresh again on. I think maybe it's your tour or itchy three. Maybe and we will include the front So way say it has no under area and 83 and it's but fish. After that we have front Carla E on form, toe in. It's Troy and I think city and maybe and be four before let's try this color. Andi grown. Let's first remake background, which is here. So eso I say that this first close will have back going. It's way that I want to make it. If my nephew 1,000,000 if nine Andi after that Ah, it's colored. Not so There is no front colors toe save on the refresh again on I think on I will go for here for this on C it brings on bottom and after that I will say we have here. Is this on you? Say it will be in position toe the relative and after way have an image which is here. Let's see. It's gonna be this very toe be a block on. Do we have the wits? 50% on. We have position off a So you it on did it to see what we have here under its fresh again on you can see it's no much better about. We want it to be. Let's say it would maybe 25 and I think it's correct. But let's so it's here. If you see here, it's a fresh again.