DEV Community: Amaan Shaikh

How to make your webpage responsive using Media Queries.

Amaan Shaikh — Wed, 23 Dec 2020 17:39:56 +0000

One of the most important feature of any website is its ability to be responsive. So let us first understand what is a responsive website.

A responsive website is one that provides the same content on all devices irrespective of their sizes. It does not break if we access on any other devices other than our PC like mobiles, tablets, etc.

Importance of responsiveness

Nowadays due to technological advancements, we are getting devices in a wide variety of shapes and sizes. Just take our laptops for example gone are the days where we used to have a monitor of standard sizes now we get laptops in various ranges of sizes. It is very important for a website to be compatible with all these devices and many more that will come in the future.

In this article, I will help you in making a website responsive using Media Queries.

What are Media Queries?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

So if you want your website font-size to automatically get reduced when the width of the screen is less than equal to 600px you can write the below code in your CSS file:

@media only screen and (max-width: 600px) {
  body {
   font-size; 10px;
  }
}

Let's understand the above code.

@media - This enables our code to be a media query.
only screen - This ensures our code should be applicable to only screen sizes.
max-width: 600px - This is the breakpoint or condition you can say which applies the styles only when the screen size is less than equal to 600px.

Please note if you have a style in media query already declared, the style inside media query will just get override if the condition is met.

Apart from max-width, we can also use min-width to make sure media query styles are only applied when the screen size is greater than equal to the breakpoint.

There is one more way in which a web page size changes apart from the device size is orientation in mobile devices.

For mobile devices, we have two types of orientation: Portrait and Landscape, and the size of the page changes whenever the orientation changes.

Do not worry! Here come media queries to the rescue.

So if you want to change to webpage color based on the orientation you can use the below code.

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

orientation- values can be landscape and portrait

Reference: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Have a nice day!

Getting started with Markdown.

Amaan Shaikh — Wed, 23 Dec 2020 11:52:19 +0000

If you are an active GitHub user you must have come across this file README.md.

So what is README.md?

README.md is a file that contains information about a GitHub project like description, how to use it, licenses, and many more.

As you can see README file has an extension as .md the reason behind this is because the README file is a markdown file. So let's learn about what is a markdown file.

Markdown is a text-to-HTML conversion tool for web developers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML. We can add styles, images, external APIs, and many more to the markdown files. As markdown converts text to HTML we can also add HTML code directly to our markdown file to add more functionality.

Here is an example of my GitHub readme file.

Do follow :) https://github.com/Amaan56

Let us learn a few basic syntaxes to get started with Markdown.

Headings

To make a normal text heading put # (single Hash) in front of it. We can have 6 types of headings like HTML from h1 to h6 just by increasing the number of the hash in front of the text from 1 to 6.

For example:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

You don't have to do anything for a paragraph in the markdown file as it gets automatically formated.

Make text bold

You can make your text bold by starting and ending your text with **(double asterisks).

For example:

**This is a bold text**

Output:

This is a bold text

Make text italic

You can make your text bold by starting and ending your text with *(single asterisks).

For example:

*This is italic text*

Output:

This is italic text

Horizontal Rules

To add horizontal rules write three or more hyphens in a row.

For example:

----

Output:

Ordered List

The ordered list can be added as below:

1. Item 1
2. Item 2
3. Item 3

Output:

Item 1
Item 2
Item 3

Unordered List

The unordered list can be added as below:

- Item 1
- Item 2
- Item 3

Output:

Item 1
Item 2
Item 3

Hyperlink

To have a web link in your document just put your link between square brackets [ ].

[https://github.com/Amaan56]

Output:

https://github.com/Amaan56

Image

To add an image use the same syntax as the link but add ! (Exclamation) before square brackets.

![https://i.pinimg.com/564x/ce/53/c5/ce53c5bcd350ba856e5c53c343376fb2.jpg]

Output:

Blockquote

To put a blockquote, append the text with a with >

> To create a blockquote

Output:

To create a blockquote

And last but not the least, my favorite and used by most of the tech bloggers to add a code block.

To add a code block in your markdown surround your code block with

``` (triple-backticks). This will give you the below result.



console.log("Hello World");

Here is great documentation to explore more: https://www.markdownguide.org/basic-syntax/

Have a nice day!

How to center an element in HTML using CSS Flexbox and CSS grid.

Amaan Shaikh — Thu, 03 Dec 2020 01:59:39 +0000

I have seen many developers struggling to center an element on the webpage using CSS. There are many applications where we want our HTML element to be at the center of the page. Usually, login or register forms are kept at the center of the webpage for a better user experience.

In this article, I will help you with two ways to place an element at the center of the page by using CSS Flexbox and CSS grid.

Consider an example where we just have a single form element in our HTML page and we have to center the same. The HTML code for this will be as below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Center Form Element</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <form>
      <h4>Login Form</h4>
      <label for="email">Email ID:</label>
      <input type="text" placeholder="Enter your Email" name="email" id="email"/>
      <label for="password">Password:</label>
      <input type="password" placeholder="Enter your your password"name="password"/>
      <button>Login</button>
    </form>
  </body>
</html>

Considering our body tag as a parent and form tag as a child we can center the form element by adding either of the following code snippets in our styles.css file

Centering an element using CSS Flexbox

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Centering an element using CSS Grid

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

Please note height: 100vh is given to make sure that the body is taking the full height of the webpage.

Happy Reading!

3 ways to add CSS to your HTML web page

Amaan Shaikh — Thu, 03 Dec 2020 01:02:06 +0000

You all must be aware of the analogy about HTML, CSS, and Javascript that is being made with the human body. If HTML is the bones, then CSS is the muscle and javascript is the brain of the webpage.

There are millions of websites available on the internet, the only way for a website to stand out from others is its styling and interactivity. HTML pages without styles are just word documents getting displayed on the browser. So styles play a very crucial role in the development of any website.

Styles can be added to any HTML page in three ways: Inline, Internal, and External.

Let's get into the details for these three ways and how to apply the same on our web page.

Inline CSS

For inline styles, we use the style attribute of the HTML tags. CSS is passed as a string to the style attribute which adds the styles to the tags.

For example: If we want to make our web page background blue with inline CSS, we can write something like this:

<body style="background-color: blue"></body>

But it is a best practice to separate styles from the HTML tags that is the reason internal and external CSS comes into the picture.

Internal CSS

For Internal CSS, a style tag is used in which all the styles related to the webpage are added. This style tag is added in the head tag of the page so that the styles are added even before the HTML document is rendered.

For example: If we want to make our web page background as blue with internal css, we can right something like this:

<head>
    <style>
      body {
        background-color: blue;
      }
    </style>
 </head>

Internal CSS does its job but imagine a scenario where we have to use the same styles for more than one page. In this case, if we use internal CSS it will lead to writing the same code twice, to overcome this external CSS is being used.

External CSS

In external CSS we use a separate file with a .css extension where we write all our styles. This CSS file can be used by multiple webpages by using a link tag which is added under the head tag.

For example: If we want to make our web page background as blue with external CSS, we have to make changes in two files.

First, we will add all our styles to our CSS file, for our example, it will be styles.css

body{
     background-color: blue;
}

Then we will link this css file to our html file as follows:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

To get more understanding of this I would suggest applying the same by creating small projects.

Happy Styling!