Complete Website Design Course 2020 [ Restaurant Project ]

Learn WEB DESIGN by making a Complete Project.

In this course you will learn to create beautiful Responsive website using HTML and CSS only. We won't be using any frameworks.

Instead, we will use media queries to make it responsive (mobile ready). Once you're comfortable on web designing using HTML and CSS only, using frameworks like Bootstrap will be so easy. It'll be like a piece of a cake.

Not only the technical part (HTML and CSS), I'm also explaining my web design process in detail. And follow them to complete this project.

To complete any web design project, I divide the complete process in 4 different stages

1. Idea Mapping

In this stage, I listen to the clients and gather as much information (requirements) from them as possible. Then, based on the information I do research. Look at some web designs on Pinterest and Behance.

https://www.pinterest.com/vijaythapa/ https://www.behance.net/vijaythapa/

Then I make rough sketch (wireframe) of the web page on paper with pen or pencil. And then design it (UI) using softwares like Photoshop or Sketch.

2. Structuring

In this stage, First I divide the conceptual web page design into different sections. Then, Add HTML elements on each sections based on their requirements.

3. Styling

In this stage, we make our structured web page more beautiful or presentable using CSS. The web page will get its real colors, space, images, etc.

Download Images for this project. [button_primary]

4. Making Mobile Ready

By this time, our web page is well designed and presentable. The only thing left is, to make it responsive or mobile ready.

To make it beautifully viewable on any different sizes, we will use media query to make it responsive.

This course doesn't stop here.

We will make it fully functional using PHP programming language and MySQL database in our next course.

Then, the customers will be able to search foods and Order them online. Also the admin (restaurant owner), will be able to manage foods and orders from Content Management System (Admin Panel).

Click Here to Make Food Ordering Website [button_warning]

Some of the major CSS concepts used in this course

1. CSS box model

In web design, every HTML element is considered as "boxes". It is really important to design different layouts using CSS.

These boxes consists of: Content, Border, Padding and Margin. And they are discussed below

Fig: CSS box model

Content: This is the content of the box, where images, texts, paragraphs, buttons, etc. lies.

Border: It is the boundary of the box (content) and lies between padding and margin.

Padding: This is the space between content and border.

Margin: This is the space out of the border.

2. Media Queries ( For responsive website design )

Media Query is a CSS property introduces in CSS3 where @media rule is used which is applied only when certain conditions are True.

They are useful to make website responsive i.e. change the design of a web page for different device width.

Media queries are used for the following:

• To conditionally apply styles with the CSS @media and @import at-rules.
• To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.
• To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

Syntax:

To make the website responsive, following breakpoints can be added using media query and CSS for HTML element can be added to be applied on certain condition.

@media only screen and (max-width: 768px) {
  /* For Tablets: */
  .btn-primary {
    background-color: green;
  }
}

In the code above, the background color of Primary button (.btn-primary) will be green on tablet size (768px).

@media only screen and (max-width: 360px) {
  /* For Tablets: */
  .btn-primary {
    background-color: red;
  }
}

In the code above, the background color of the same Primary button (.btn-primary) will be red on mobile size (360px).

Download Code [button_info]

You may also like: 

1. Personal Portfolio Design with HTML & CSS