Introduction

Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power.


Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences. In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes. CSS gives you the tools/rules to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design.


Source:
FCC's Responsive Website Introduction
CSS Units

CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.


Length is a number followed by a length unit, such as 10px, 2em, etc. A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted. For some CSS properties, negative lengths are allowed.


There are two types of length units: absolute and relative.


Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.


UnitDescriptionExample
cmcentimetersTry it
mmmillimetersTry it
ininches (1in = 96px = 2.54cm)Try it
px *pixels (1px = 1/96th of 1in)Try it
ptpoints (1pt = 1/72 of 1in)Try it
pcpicas (1pc = 12 pt)Try it
CSS Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.


Grid Parent Properties

display. An HTML element becomes a grid container when its display property is set to grid or inline-grid.

Try it   .grid-container {display: grid;}
Try it   .grid-container {display: inline-grid;}

You can adjust the gap size by using one of the following properties: grid-column-gap grid-row-gap  &  grid-gap

Try it   .grid-container {display: grid;grid-column-gap: 50px;}
Try it   .grid-container {display: grid;grid-row-gap: 50px;}
Try it   .grid-container {display: grid;grid-gap: 50px 100px;}

grid-template-columns. The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the length of the respective column. If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.

Try it   .grid-container {display: grid;grid-template-columns: auto auto auto auto;}

grid-template-row. This property defines the height of each row the same idea for grid-template columns for the number of rows.The value is a space-separated-list, where each value defines the height of the respective row:

Try it   .grid-container {display: grid;grid-template-rows: 80px 200px;}

justify-content. The justify-content property is used to align the whole grid inside the container.The grid's total width has to be less than the container's width for the justify-content property to have any effect.

Try it   .grid-container {display: grid;justify-content: space-evenly;}
Try it   .grid-container {display: grid;justify-content:space-around;}
Try it   ..grid-container {display: grid;justify-content: space-between;}
Try it   .grid-container {display: grid;justify-content: center;}
Try it   .grid-container {display: grid;justify-content: start;}
Try it   .grid-container {display: grid;justify-content: end;}

align-content. The align-content property is used to vertically align the whole grid inside the container. Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

Try it   .grid-container {display: grid;height: 400px;align-content: center;}
Try it   .grid-container {display: grid;height: 400px;align-content: space-evenly;}
Try it   .grid-container {display: grid;height: 400px;align-content: space-around;}
Try it   .grid-container {display: grid;height: 400px;align-content: space-between;}
Try it   .grid-container {display: grid;height: 400px;align-content: start;}
Try it   .grid-container { display: grid;height: 400px;align-content: end;}

Grid Child(item) Properties

A grid container contains grid items.By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.


grid-column. The property defines on which column(s) to place an item. You define where the item will start, and where the item will end. The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties. To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.

Try it   .item1 {grid-column: 1 / 5;}
Try it   .item1 {grid-column: 1 / span 3;}
Try it   .item2 {grid-column: 2 / span 3;}

grid-row. The grid-row property defines on which row to place an item. You define where the item will start, and where the item will end. Note: The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties. To place an item, you can refer to line numbers, or use the keyword "span" to define how many rows the item will span:

Try it   .item1 {grid-row: 1 / 4;}
Try it   .item1 {grid-row: 1 / span 2;}

grid-area. The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Try it   .item8 {grid-area: 1 / 2 / 5 / 6;}
Try it   .item8 {grid-area: 2 / 1 / span 2 / span 3;}
CSS Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.


Flexbox Parent Properties

to start using the Flexbox model, you need to first define a flex container. The element below represents a flex container (the blue area upon checking the example) with three flex items

Try it    <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>

display. The flex container becomes flexible by setting the display property to flex:

Try it   .flex-container {display: flex;}

flex-flow. The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties. (see flex-direction and flex-wrap)

Try it   .flex-container {display: flex;flex-flow: row wrap;}

justify-content. The justify-content property is used to align the flex items: .

The center value aligns the flex items at the center of the container:

Try it   .flex-container {display: flex;justify-content: center;}

The flex-start value aligns the flex items at the beginning of the container (this is default):

Try it   .flex-container {display: flex;justify-content: flex-start;}

The flex-end value aligns the flex items at the end of the container:

Try it   .flex-container {display: flex;justify-content: flex-end;}

The space-around value displays the flex items with space before, between, and after the lines:

Try it   .flex-container {display: flex;justify-content: space-around;}

The space-between value displays the flex items with space between the lines:

Try it   .flex-container {display: flex;justify-content: space-between;}

align-items. The align-items property is used to align the flex items vertically.

The center value aligns the flex items in the middle of the container:

Try it   .flex-container {display: flex;height: 200px;align-items: center;}

The flex-start value aligns the flex items at the top of the container:

Try it   .flex-container {display: flex;height: 200px;align-items: flex-start;}

The flex-end value aligns the flex items at the bottom of the container:

Try it   .flex-container {display: flex;height: 200px;align-items: flex-end;}

The stretch value stretches the flex items to fill the container (this is default):

Try it   .flex-container {display: flex;height: 200px;align-items: stretch;}

The baseline value aligns the flex items such as their baselines aligns:

Try it   .flex-container {display: flex;height: 200px;align-items: baseline;}

align-content. The align-content property is used to align the flex lines. Vlues is the same as the as the align items.

Try it   .flex-container {display: flex;height: 600px;flex-wrap: wrap;align-content: space-between;}

Flex Child(item) Properties

The direct child elements of a flex container automatically becomes flexible (flex) items.


flex. The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

Try it   .flexItem1 {flex: 0 0 200px;}

align-self. The align-self property specifies the alignment for the selected item inside the flexible container. The align-self property overrides the default alignment set by the container's align-items property.

Try it   .flexItem1 {"align-self: center";}
CSS Media Query

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.


Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.


Unfortunately these media types never got a lot of support by devices, other than the print media type.


Let us look at some more examples of using media queries by pressing the code playground on the right. Try it

Bootstrap

Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.


Why Use Bootstrap?


Where to Get Bootstrap 4?


you can learn bootstrap from freecodecamp.org

Resources

  w3schools.com
  freecodecamp.org