As the number of people accessing the internet on their mobile devices continues to grow, it’s important for websites to adapt to different screen sizes and resolutions. Responsive design is the approach that aims to make websites look good on any device, from a tiny smartphone to a large desktop monitor.

CSS plays a central role in making responsive design happen. By using media queries, you can change the appearance of your website based on the device it’s being viewed on.

Here are some best practices for implementing responsive design on your website:

Mobile-First Approach

One of the best ways to make your website responsive is to start by designing for mobile devices first. This approach involves creating a design that looks good on the smallest screens and then gradually adding more styles to accommodate larger screens.

/* Mobile styles */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet styles */
@media screen and (max-width: 768px) {
  .container {
    max-width: 768px;
    margin: 0 auto;
    padding: 20px;
  }
}

/* Desktop styles */
@media screen and (max-width: 992px) {
  .container {
    max-width: 992px;
  }
}

Responsive Images

Images are a crucial part of any website, but they can also be a major source of problems when it comes to responsive design. To ensure that your images look good on any device, you can use the max-width property to prevent them from overflowing their containers.

img {
  max-width: 100%;
  height: auto;
}

Flexbox Layout

Flexbox is a powerful layout tool that makes it easy to create complex layouts without using floats or positioning. It’s especially useful for creating responsive designs because it allows you to easily change the order and size of your content based on the screen size.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 100%;
}

@media screen and (max-width: 768px) {
  .item {
    flex-basis: 50%;
  }
}

@media screen and (max-width: 992px) {
  .item {
    flex-basis: 33.33%;
  }
}

Conclusion

Responsive design is a crucial aspect of web development in today’s world. With the increasing use of mobile devices, it’s more important than ever to ensure that your website looks and works great on all screen sizes. CSS plays a central role in making responsive design possible. By using media queries and following best practices, you can create a website that looks great on any device.

Introduction to Responsive Design Using CSS was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

It is a CSS layout mode that provides an easy and clean way to arrange items in a container.

It doesn’t use any float property and it’s responsive, which makes our job easier to position elements.

Display Flex

You can make any container flex by setting its display property to flex:

div {
  display: flex;
}

This code will also arrange all items inside the container in a row.

Flex Direction

Don’t worry, you can change the flex direction by using the following property:

div {
  display: flex;
  flex-direction: column;
}

You can select any of these directions:

flex-direction: row;

flex-direction: column;

flex-direction: row-reverse;

flex-direction: column-reverse;

Justify Content

This property aligns items horizontally and accepts the following values:

justify-content: flex-start; 
/* Items align to the left side of the container.*/

justify-content: flex-end; 
/* Items align to the right side of the container. */

justify-content: center; 
/* Items align at the center of the container. */

justify-content: space-between; 
/* Items display with equal spacing between them. */

justify-content: space-around; 
/* Items display with equal spacing around them. */

Align Items

This CSS property aligns items vertically and accepts the following values:

align-items: flex-start; 
/* Items align to the top of the container. */

align-items: flex-end; 
/* Items align to the bottom of the container. */

align-items: center; 
/* Items align at the vertical center of the container. */

Try mixing both justify-content & align-items properties.

Order

Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).

order: 2;

Align Self

Another property you can apply to individual items is align-self. This property accepts the same values as align-items and its value for the specific item.

Flex Wrap

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction in that lines are stacked.

flex-wrap: nowrap; 
/* The flex items are laid out in a single line which may cause the flex container to overflow. */

flex-wrap: wrap; 
/* The flex items break into multiple lines. */

flex-wrap: wrap-reverse; 
/* Gives us the opposite output of wrap property. */

Flex Flow

The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.

flex-flow: column wrap;

Try finding and playing with more properties of flexbox.

You also have some fun and interesting games to learn flexbox, like Flexbox Froggy & Flexbox Defence, etc.

Instructor ~ TARUN KUMAR

LAZY SYNTAX

Flexbox: The Flexible Box Layout Model | Complete Guide was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

CSS transitions allow you to change property values over a given duration.

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the <div> element:

div:hover {
  width: 300px;
}

Change Several Property Values

Separate all properties with a comma.

div {
  transition: width 2s, height 4s;
}

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is the default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

The following example has a 1-second delay before starting:

div {
  transition-delay: 1s;
}

Transition + Transformation

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

Explore more about Transition & Transform property. Get help from your goof friend Google 😉

Instructor ~ TARUN KUMAR

LAZY SYNTAX

CSS — Transition was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

The box-shadow CSS property adds shadow effects around an element's frame. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Adding a simple shadow:

We need to define the X offset, Y offset, and Shadow Color

box-shadow: 60px -16px teal;

Add blur to the shadow:

We need to define the X offset, Y offset, Blur Radius, and Shadow Color

box-shadow: 10px 5px 5px black;

Add spread to the shadow:

We need to define the X offset, Y offset, Blur Radius, Spread Radius, and Shadow Color

box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.2);

Adding multiple shadows:

box-shadow: 3px 3px red, -1em 0 0.4em olive;

Have fun playing with box-shadow and dig even deeper in the same property by using our good friend Google ;)

Instructor ~ TARUN KUMAR

LAZY SYNTAX

CSS — Box Shadow was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

The font-size property specifies the size of the text. It can be specified as a fixed size in various units, a percentage, or as a predefined keyword.

Values

Absolute-size keywords, based on the user’s default font size (which is medium).

font-size: large;

All values in pixels:

xx-small = 9px
x-small  = 10px
small    = 13.3px
smaller  = 14px
medium   = 16px (Default Paragraph Size)
large    = 18px
larger   = 19px
x-large  = 24px
xx-large = 32px

Percentage

A positive percentage value, relative to the parent element's font size.

font-size: 200%;

Pixels

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static.

font-size: 18px;

Em

Using an em value creates a dynamic or computed font size. The numeric value acts as a multiplier of the font-size property of the element on which it is used.

font-size: 2em;

One important fact to keep in mind: em values compound according to the parent elements.

Rem

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element.

font-size: 1.6rem;

Other Units

Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.

vh

1vh is relative to 1% of the height of the viewport.

height: 1vh;

vw

1vw is relative to 1% of the width of the viewport.

width: 1vw;

vmin

It is the minimum between the viewport’s height or width in percentage depending on which is smaller.

font-size: 20vmin;

vmax

It is the maximum between the viewport’s height or width in percentage depending on which is bigger.

font-size: 30vmax;

Instructor ~ TARUN KUMAR

LAZY SYNTAX

CCSS — Font-Size & Units was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

CSS selectors define the elements to which a set of CSS rules apply. CSS selectors are used to “find” (or select) the HTML elements you want to style.

Universal selector (*)

It selects all elements on a web page.

* {}

Type Selector (Element Name)

It selects specific HTML element.

div {}

Class Selector (.)

It selects elements with the same class name.

.className {}

ID Selector (#)

It selects elements with the same ID name.

#idName {}

Selector List (,)

This selector is a grouping method that selects all the matching nodes.

p, div, span {}

Descendant combinator (space)

div p {}

It will select any “p” inside “div”, even if there are other elements between them.

Child combinator (>)

It selects nodes that are direct children of the first element.

p > span {}

Adjacent sibling combinator

It matches the second element only if it immediately follows the first element, and both are children of the same parent element.

/* Paragraphs that come immediately after any image */
img + p {}

There are many more CSS Selectors but you don’t need to know it all. We use only particular selectors in daily use.

Instructor ~ TARUN KUMAR

LAZY SYNTAX

CSS Selectors was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

A pseudo-class is used to define a special state of an element like when we hover the mouse over the button or when we click on a link and much more.

Look at some pseudo-classes.
To get the mouse hover effect:

p:hover {
 text-decoration: underline;
 color: red;
}

To change something when a link is visited:

a:visited {
 color: red;
}

If you have some same elements on your webpage and you want to select a specific element inside of those elements, then you can do this:

p:nth-of-type(3) {
 background-color: green;
}

To select only checked checkboxes:

input:checked {
 margin-left: 100px;
}

To select the first letter on an element:

p:first-letter {
 font-size: 50px;
}

Google “CSS pseudo-class” for more information.

Instructor ~ TARUN KUMAR

LAZY SYNTAX

CSS — Pseudo Class was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

To align the text to different positions on the page we use the “text-align” property. It’s just like the float property.

text-align: right;

But it actually aligns it according to its parent element. That means if I put it in a div and make it smaller than the page then it will be aligned to the right of that div and not the page itself.

<div>
 <p>This is some text.</p>
</div>

div {
 width: 500px;
 background-color: red;
}
p {
 text-align: right;
}

You can also align the text in different positions like:

text-align:left;
text-align:center;

Justified text stretches the letter adjusting the space between them and fills up the whole element.

div {
 width: 500px;
 background-color: yellow;
}
p {
 text-align: justify;
}

Instructor ~ TARUN KUMAR

LAZY SYNTAX

CSS — Text Align was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

We have text styling in the HTML section but it’s much better to do all the styling with CSS and it makes the actual content looks less messy when the styling is not in the element. You can use the following properties to style the text:

1. Bold

font-weight: 900;

2. Italic

font-style: italic;

3. Underlined

text-decoration: underline;

4. Big text

font-size: 200%;

You can select the space between the line(usually 1.5–2)

line-height: 5;

Instructor ~ TARUN KUMAR

LAZY SYNTAX

CSS — Text Styling, Pseudo Classes was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s change the font of our content. Use property:

font-family: fantasy;

You can use some fonts that are already available in your system. Check them out. You can also google “web safe fonts” which will provide you with fonts that can be accessed by almost every web browser.
Most common are Sarif (with little ticks) and sans-serif (without little ticks)

Now you can see that most of them contain three different fonts. this is actually a feature of CSS which is also known as “fallback”. It actually checks if the first font is available on the user’s system or not. If it’s available then it will show this font but if not then it will try the second one and the same for the third one which is a standard serif or sans-serif font which is available on every system.

If you don’t find a font that you want to use on your website in web-safe fonts then you can also use google fonts. Search this: “Google Fonts”
You will find a lot of font options here. You can also search for a specific font or filter them.

Click on any style that you link and choose the style you want to use. Choose the style again from the list and then click on “show selected families” in the upper left corner with three squares and a plus sign. Click on embed and copy the link. Paste it into your stylesheet and you are good to use that font in your webpage. Below the link, you can see the option of CSS rules. Here you can see what you need to input in the font-family property to use this font.

Try using different fonts in your webpage and have fun.

CSS — Change Fonts was originally published in Learn Web Development | For Complete Beginners on Medium, where people are continuing the conversation by highlighting and responding to this story.