DEV Community: ARAVIND S

FreeCodeCamp or The Odin Project: Which One Will Get You Hired Faster?

ARAVIND S — Wed, 28 Aug 2024 10:28:48 +0000

FreeCodeCamp or The Odin Project: Which One Will Get You Hired Faster? - justwritecode.in

FreeCodeCamp or The Odin Project, and find out which coding platform is the best fit for your career goals.

justwritecode.in

CSS Accordion with Html & Css | no Js used!

ARAVIND S — Thu, 15 Aug 2024 08:22:40 +0000

Accordions are a popular UI component used to display content in a compact and organized manner. They allow users to expand and collapse sections of content, providing a cleaner interface. In this article, we’ll explore how to create a simple yet effective accordion using only HTML and CSS. No JavaScript is required!

Why Use a CSS Accordion?

Using CSS for creating an accordion has several benefits:

Simplicity: No need to include additional JavaScript files.
Performance: Pure CSS accordions are lightweight, leading to faster load times.
Accessibility: Properly coded CSS accordions are accessible and can be navigated with a keyboard.

The HTML Structure

We start with a simple HTML structure. Below is the markup for our accordion.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion</title>
    <link rel="stylesheet" href="style.css">
    <!-- Syne Mono google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
</head>
<body>
    <div class="accordion-container">
        <h1 class="heading">CSS Accordion</h1>
        <div class="accordion">
            <details>
                <summary>Is JS needed for this accordion?</summary>
                <p>Only HTML and CSS are enough 😉</p>
            </details>
            <details>
                <summary>What Do I do?</summary>
                <p>Mainly my job is to build websites that are responsive and dynamic.</p>
            </details>
            <details>
                <summary>What is my short-term goal?</summary>
                <p>My short-term goal is to get placed in a product-based company as a frontend engineer.</p>
            </details>
            <details>
                <summary>How many professional certifications have you completed?</summary>
                <p>I have completed two professional certifications, namely AWS Cloud Practitioner and Snowflake.</p>
            </details>
        </div>
    </div>
</body>
</html>

Understanding the HTML Structure

Details and Summary Elements: These HTML elements are key to creating the accordion effect. The tag acts as the clickable header, and the content inside expands or collapses when the user interacts with the summary.

Custom Fonts: We’re using the “Syne Mono” font from Google Fonts, which gives a unique and modern look to our accordion.

The CSS Styling

Now let’s dive into the CSS that styles our accordion.

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.accordion-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #0f1c2e;
    font-family: "Syne Mono";
}

.heading{
    color: white;
    margin-bottom: 20px;
    font-size: 8em;
    letter-spacing: 5px;
}

.accordion{
    width: 700px;
    width: calc(100% - 20px); 
}

details{
    background-color: #cee8ff;
    margin-bottom: 10px;
    filter: drop-shadow(5px 5px 0px #0A0A0A);
}

details:hover{
    filter: drop-shadow(5px 5px 4px #0A0A0A);
}

details > summary{
    color: #142030;
    padding: 5px 10px;
    font-size: 2em;
    cursor: pointer;
}

details > p{
    padding: 5px 10px 10px 20px;
    color: #0f1c2e;
    font-size: 1.5em;
}

Breaking Down the CSS

Global Styles: We start by resetting the margin, padding, and box-sizing for all elements using the universal selector *. This ensures a consistent base for styling.

Accordion Container: The .accordion-container class centers the accordion on the page using Flexbox. It also sets the background color and font family.

Heading Styling: The .heading class styles the main heading, making it large, white, and spaced out.

Accordion Styling:
Width: The accordion’s width is set using a calc() function to ensure responsiveness, subtracting 20px from the total width.

Background and Shadow: The details elements are styled with a background color and a drop shadow to give a 3D effect. The shadow becomes more prominent when the user hovers over each section.

Summary and Paragraph Styling:

Colors and Padding: The text color for the summary is set to a dark shade, and padding is added to give space around the content. The paragraph text within each detail is also styled for better readability.

Conclusion

Creating an accordion with just HTML and CSS is not only simple but also highly efficient. It’s a perfect example of how you can build interactive components without relying on JavaScript, which can lead to faster loading times and improved performance. Feel free to customize the styles and content to match your design needs!

Creating a Stunning Image Grid Gallery with HTML and CSS

ARAVIND S — Wed, 07 Aug 2024 06:43:37 +0000

For video version of this article, watch this youtube video

In this tutorial, we will create a beautiful and responsive image grid gallery using HTML and CSS. This tutorial is perfect for beginners who want to understand the basics of CSS Grid and how to arrange images in a visually appealing layout. By the end of this tutorial, you’ll have a fully functional image gallery that you can use on your website or portfolio.

Step 1: Setting Up the HTML

First, we need to set up the basic HTML structure for our gallery. We’ll create a div with the class grid-container to hold our grid items, each containing an image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item-1">
            <img src="images/adult.avif" alt="">
        </div>
        <div class="grid-item-2">
            <img src="images/boy.avif" alt="">
        </div>
        <div class="grid-item-3">
            <img src="images/car.avif" alt="">
        </div>
        <div class="grid-item-4">
            <img src="images/court.avif" alt="">
        </div>
        <div class="grid-item-5">
            <img src="images/net.avif" alt="">
        </div>
        <div class="grid-item-6">
            <img src="images/road.avif" alt="">
        </div>
        <div class="grid-item-7">
            <img src="images/single cork.avif" alt="">
        </div>
        <div class="grid-item-8">
            <img src="images/two boys.avif" alt="">
        </div>
        <div class="grid-item-9">
            <img src="images/two cord.avif" alt="">
        </div>
        <div class="grid-item-10">
            <img src="images/yellow cork.avif" alt="">
        </div>
    </div>
</body>
</html>

Step 2: Adding Basic Styles with CSS

Next, we need to add some basic CSS styles. We’ll start by resetting the margin, padding, and box-sizing for all elements to ensure consistent styling across different browsers.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: white;
    padding: 0.5rem 4rem;
}

img{
    display: block;
    width: 100%;
    height: 100%;
}

Step 3: Creating the Grid Layout

Now, let’s create the grid layout for our gallery. We’ll use the CSS Grid layout module to define the structure of our grid container. The grid-template-columns and grid-template-rows properties will specify the number of columns and rows, while the grid-column-gap and grid-row-gap properties will add space between the grid items.

.grid-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    height: 95vh;
    width: 80%;
    margin: auto;
}

Step 4: Placing Grid Items

To place the grid items in specific positions within the grid, we use the grid-area property. This property allows us to define the starting and ending row and column for each grid item. Here's how we can position each image:

.grid-item-1 { 
    grid-area: 3 / 4 / 5 / 5; 
}

.grid-item-2 { 
    grid-area: 4 / 3 / 5 / 4; 
}

.grid-item-3 { 
    grid-area: 1 / 4 / 3 / 6; 
}

.grid-item-4 { 
    grid-area: 1 / 2 / 2 / 3; 
}

.grid-item-5 { 
    grid-area: 3 / 5 / 5 / 6; 
}

.grid-item-6 { 
    grid-area: 2 / 1 / 5 / 3; 
}

.grid-item-7 { 
    grid-area: 1 / 1 / 2 / 2; 
}

.grid-item-8 { 
    grid-area: 3 / 3 / 4 / 4; 
}

.grid-item-9 { 
    grid-area: 2 / 3 / 3 / 4; 
}

.grid-item-10 { 
    grid-area: 1 / 3 / 2 / 4; 
}

Final Result

After adding all the HTML and CSS code, your image grid gallery should look something like this:

You can now customize the gallery by adding your own images, adjusting the grid layout, or changing the spacing between the grid items. This tutorial provides a solid foundation for creating complex and visually appealing grid layouts using CSS Grid.

Feel free to experiment with different configurations and explore the possibilities of CSS Grid. Happy coding!

CSS Positioning in under 4 minutes

ARAVIND S — Sat, 03 Aug 2024 04:29:52 +0000

If you have just started learning CSS or have yet to work much in CSS, you will find difficulty in positioning the element. To make your life easier, there are CSS positioning properties like Absolute, Relative, Static, Fixed, Sticky, and Inherit. In this post, we will learn the six CSS positioning properties and where to use them with some examples. If you need a video version of this post, refer to my YouTube video.

Youtube Video Link - https://youtu.be/7V0bbUKE3KQ?si=VaODQNs_rJJFlHli

1. Static

By default, every HTML element has a static position. This means that elements stick to the normal page flow, and their placement is determined by the document's structure. The left, right, top, bottom, and z-index properties do not affect elements with a static position. Essentially, these elements behave as if the positional properties don't exist.

2. Relative

An element with a relative position retains its original place in the document flow, just like a static element. However, unlike static positioning, the left, right, top, bottom, and z-index properties will have an effect. These properties "nudge" the element from its original position in the specified direction.

3. Absolute

An element with an absolute position is removed from the normal document flow. Other elements will behave as if the absolutely positioned element is not there. This allows for precise placement using the left, right, top, bottom, and z-index properties. The element is positioned relative to its nearest positioned ancestor (i.e., an ancestor element with a position other than static), or the initial containing block if no such ancestor exists.

4. Fixed

An element with a fixed position is also removed from the document flow, similar to an absolutely positioned element. However, unlike absolute positioning, fixed positioning is relative to the viewport, not to any particular parent element. This means the element remains in the same place even when the page is scrolled, making it useful for creating persistent navigation bars or sticky headers.

5. Sticky

The sticky positioning value combines aspects of relative and fixed positioning. An element with sticky positioning is treated like a relatively positioned element until the scroll location of the viewport reaches a specified threshold. At this point, it becomes fixed and stays in that position relative to the viewport until it is scrolled out of view.

6. Inherit

The inherit value for the position property allows an element to inherit its position value from its parent. This can be useful when you want an element to follow the same positioning rules as its parent, especially in complex layouts where consistency is key.

Conclusion
Understanding CSS positioning is essential for crafting flexible and dynamic web layouts. By knowing how static, relative, absolute, fixed, sticky, and inherit work, you can better control the placement and behavior of elements on your web pages. Experiment with these positioning values to achieve the desired layout and functionality for your designs.

C Shape 7 box

ARAVIND S — Wed, 26 Jun 2024 09:41:24 +0000

Check out this Pen I made!

Star Rating

ARAVIND S — Wed, 26 Jun 2024 09:38:38 +0000

Check out this Pen I made!

Bishop on Chessboard

ARAVIND S — Wed, 26 Jun 2024 09:37:09 +0000

Check out this Pen I made!