DEV Community

Susan J
Susan J

Posted on

JAVA FULL STACK DEVELOPMENT:

GRID:
CSS Grid is a layout system that allows you to create complex web designs using rows and columns.A grid layout consist of a parent element with one or more grid items. All direct children of grid containers become grid items automatically.


Key Concepts:

display: grid;: Turns a container into a grid.

grid-template-columns: Defines the number and size of columns.

grid-gap: Sets the space between grid items.

Basic Example of CSS Grid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
      grid-gap: 20px; /* space between grid items */
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode


Adjusting Grid Layout:

You can also change how many columns or rows appear depending on the screen size. This can be done using media queries for responsiveness.
This would make the layout more responsive on mobile devices.

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr; /* 2 columns on smaller screens */
  }
}
Enter fullscreen mode Exit fullscreen mode

padding in CSS:

Padding is the space inside an element, between the content and the border.

padding property has four values:

** padding:** 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

Syntax:

.element {
  padding: 20px; /* all sides */
  padding: 10px 15px; /* top-bottom | left-right */
  padding: 10px 15px 20px; /* top | left-right | bottom */
  padding: 10px 15px 20px 25px; /* top | right | bottom | left */
}
Enter fullscreen mode Exit fullscreen mode

Example:

.box {
  padding: 20px;
  background-color: lightgray;
}
Enter fullscreen mode Exit fullscreen mode

This adds 20px of space inside the .box, around its content.


SEO (Search Engine Optimization):

SEO is the process of improving a website’s visibility in search engine results (like Google) to get more organic (non-paid) traffic.

It has three main parts:

On-Page SEO – Optimizing content, keywords, titles, meta tags, internal links.

Off-Page SEO – Building backlinks from other reputable websites.

Technical SEO – Ensuring the site loads fast, is mobile-friendly, and can be crawled/indexed by search engines.

The goal is to rank higher for relevant search terms so more people find your website naturally.

Top comments (0)