How to create a layout for your Web Application? | Ayush Srivastav | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to create a layout for your Web Application?

teacher avatar Ayush Srivastav, A skilled designer and presenter

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (10m)
    • 1. Introduction

      0:51
    • 2. Create the Basic layout

      2:05
    • 3. Add some Colors

      1:27
    • 4. Add some Padding

      0:37
    • 5. Create the Magic

      1:52
    • 6. The Main Design

      0:39
    • 7. Add the Responsiveness

      1:35
    • 8. Final Thoughts

      0:51
  • --
  • 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.

20

Students

--

Projects

About This Class

Learn to create a basic layout for your next web application.

Most of the times, you might be disappointed because it's really hard to create a basic layout of the project. In this project I'm going to share you an easy way to create a basic Holy Grail Layout. We will create an extremely easy design of the web application right from scratch.

I will not use any built-in library or framework. Just pure HTML and CSS. Also, I have not added any content while coding because I want to keep it generic.

With this layout you can create

  • Online Portfolio
  • Your next big e-commerce store
  • Blog
  • Customized themes
  • any other cool application

Coding Environment

I will use Plunkr. However you're free to use any other online/offline code editor of your choice. I find Plunkr to be good, and I'd suggest you to use it right along with me.

Final Application URL

Click here to see the Final Project

Once you're done with your creation, you can use any other frameworks to code beyond this point.

I'm happy to see you in class. Happy Coding.

Meet Your Teacher

Teacher Profile Image

Ayush Srivastav

A skilled designer and presenter

Teacher

Ayush Srivastav knows what it takes to grab the attention. A skilled presenter and a programmer has taught more than 10,000 people how to learn the art of programming both software and hardware.

Hailing from India, Ayush made his trek to books to learn the art of programming. He has won praises and a wide following for his engaging style and his knack for transferring programming skills via practical, simple, universal and immediately actionable techniques.

Ayush first made a reputation in software industry with his quick learning and engaging ability. In response to many requests, he began to offer personalized services and quickly developed a following as a skilled presenter.

He has in-depth knowledge of what it takes to engage people and deliver some core progra... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

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.

Transcripts

1. Introduction: do you need a great of the application? But you struggle in grading a basic layout. Hi, my name is Ayush in this course. My ultimate goal is to help you create a really basic design for your upcoming publication . I will be guiding your step by step so that you can create everything right along with me. Let me quickly show you what we will be creating by the end of this course. See that we have header now Far cyber on the main hunting area. And of course, the foot. You can put any gun you want And guess what? This is purely responsive. Hit and roll on. And let's make this from scratch. Also. Jekyll them off the slave I have I didn't link in the description. Let's get started. 2. Create the Basic layout: All right now, I have opened a basic bunker. We have our hello bunker takes visible. So let me just delete it. Now we have an empty body tag inside. This body tag will create our contain, so I'll start by creating Ah header tag inside this header, Doc, I just right. Header. No! After hinder. Let me just create the footer bag. So a right footer. This is the foot. Attack on inside the foot. Attack just right footage. Okay, so see that we have header and footer between header and footer. We have the create our main content, so I'll just create a mean duck. So this is our main tag inside the main Doug, we will create now bar our main content and sidebar. So let me just create enough power first for now, bar. All right, now, Doug, inside the naff bag. I'll just right now far to see that we have header naff bar and footer after the knave bar . I create our main contained, so I'll create an article dog inside the article. Dog, I'll just write contained. All right, So we have header nav are contained on footer after the article, Doug agreed sidebar to create the sidebar. I'll make a side tag inside the aside, Doug. Alright, sidebar. All right, so we have Header Nav are contained. Sidebar and footer. So now bar article and sidebar is enclosed inside. The main tag on header and footer is separate. Let's add some styles to each one off them. 3. Add some Colors: all right. From your left hand panel opened the style dot CS is here we here, we can add all RCs is so let's start by creating some colors. So I'll start with hitter. So I lied. Bagram Color Property So I have used this color tomatoes So? So it will give header the color off tomato selects at foot or attack again. Background color property on here I'll give color turquoise So yeah, so we have the store Coy scholar and footer and tomato in header again The now dunk background color hoops color off So here I am giving the color off light Greater naff bar on the last year's aside. Dag So background color on here. I'll give light blue. All right, so we have all the colors I'm giving content as white header as tomato? Nah, Far as like gray. Sidebar as light blue and further as turquoise 4. Add some Padding: Let's try to add some parting to all these components. So at the very job. Alright, Header now article on a side. So I'll give a common property to all these components on inside this. All right, farting as Dent mixes, I am just taking 10. Biggs is. However you can give the binding you want. So see that now this looks good. I have just given parting off 10 pixels to header now article and aside. 5. Create the Magic: no is the time to create the magic. So let's start by writing the Maine time. So let me just go to the index dot html. See that inside the main tag. We have nah far article and sidebar. So whatever style we give two main tack, it will be applied to nab our article and cyber alone. So here we are, back at style dot CS is we have our main tank on. I'll just write display as flicks. That's it. So see that headers on top Navarre content and sidebar are just aligned. Toe one drove itself. Now it has started looking somewhat similar to the desired result. All right, so now read Body dug inside body again, right display display as flex on give flex direction as column on Give hide off 100 v edge on margin off cereal because we want the content to be displayed throughout our screen. So that's why hunt. So that's why I have given the height off 100 village. But right now everything is start to the top between header and footer back inside the main tag advert more property off flex grow and give the value as one. See that Now Heather is a top for the present bottom and nab our content. And cyber is taking the area between header and footer. No, we have to move the side bar to the right so that content can take whole space between now . Far and sidebar. 6. The Main Design: Now we have to move the side bar to the right, create an article tag and inside this right flex group and give the value off one. See that now. Now parties that left content is taking the whole space between novel and sidebar and sidebar is talking to the right. Heather is a top, and for that is that this is the final design which we have decided. But see that this design is not yet responsive. We need a responsive design for our Web application. Let's see how we can make this design as responsive. 7. Add the Responsiveness: No, we have to make our design responsive. So let me just write some media queries. Smart right. Media Max picked off 600 pictures on inside this on, right? I mean, Doug, and give property off flex direction as column. Also. Now Goma aside. So we are adding some common properties toe would of these tags on will give orders off to see that header comes first, then content another foreign sidebar. It stuck to the bottom along with the footer. This is the response of design. So let me just show you the responsiveness up this design. So I have opened the obligation and full screen Andi, when you resize the window, see that right here? Hunting is a top along with the header. The nah for and sidebar. So let me just resize of it. See that header content Navarre Sidebar and footer. So very easily we have created a response to sign off of application. Let's talk about some critical aspect off. Distressing 8. Final Thoughts: there are various other reads to me, the similar design. You can also use customized frameworks like bootstrap. However, as you can see, we have successfully created the layout from scratch without writing much cold. Now you can create menus navigation bars on maybe a sidebar counting are you when you can create your own customers? Teams. I believe even your imagination cannot limit your compatibility. I know some of you are really interested in understanding the terms, which I have to go ahead and read. The law, which I have written, have added the links in the description. Try to make your own design and share with the world. And of course, me too. If you face any difficulty just reach are doing, I'll be happy to help you. That's all for now. I'll see you in the next course.