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.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.
This course doesn't stop here.
We will make it fully functional using PHP programming language and MySQL database in our next course.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
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]
![Advertisement [ad]](https://blogger.googleusercontent.com/img/a/AVvXsEgVAiCox6-vLXsNZas8ks-nfos0PgdnL4yClmlqOkl92t7zGdYYiLBy9AHMZFxBYe06DVmN6JGQ9S0P3iClXk8l43FIQPDyAcx_uMmV0bN9JlKjTzOAi7YjmQo6cuvHgkEO76L-hcqV-TWE29v93eeFby8MOAOuJ8DcilHTPpfP8aKg8TG9uYCDaMxcr8H1=s600)
Comments