DEV Community: asiwaju

Four-Card Feature Section – Frontend Mentor Challenge (HTML & CSS)

asiwaju — Sat, 12 Apr 2025 08:02:21 +0000

INTRODUCTION

This is my attempt at the four-card feature section challenge on Frontend Mentor. I’ll be building this project using only HTML and vanilla CSS to keep things simple and beginner-friendly. My focus is on creating a clean and well-structured design while making the code easy to understand. If you’d like to follow along, you can download the starter files for the project at Frontend Mentor.

THE GOAL

The goal is to build both the desktop version using css grid layout for multiple column
and the mobile version of this challenge
. For this challenge, I will be taking the mobile-first approach to design.

THE HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Four card feature section</title>
</head>

<body>  
  <div class="container">
    <header>
      <h1>
        <span>Reliable, efficient delivery</span>
        Powered by Technology
      </h1>
      <p class="header-text">
        Our Artificial Intelligence powered tools use millions of project data points
        to ensure that your project is successful
      </p>
    </header>

    <div class="supervisor">
      <h3>Supervisor</h3>
      <p>Monitors activity to identify project roadblocks</p>
      <div class="image">
        <img src="./images/icon-supervisor.svg" alt="supervisor image">
      </div>
    </div>

    <div class="team-builder">
      <h3>Team Builder</h3>
      <p>Scans our talent network to create the optimal team for your project</p>
      <div class="image">
        <img src="./images/icon-team-builder.svg" alt="team-builder image">
      </div>
    </div>

    <div class="karma">
      <h3>Karma</h3>
      <p>Regularly evaluates our talent to ensure quality</p>
      <div class="image">
        <img src="./images/icon-karma.svg" alt="karma">
      </div>
    </div>

    <div class="calculator">
      <h3>Calculator</h3>
      <p>Uses data from past projects to provide better delivery estimates</p>
      <div class="image">
        <img src="./images/icon-calculator.svg" alt="calculator image">
      </div>
    </div>

  </div>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://github.com/thelastmedici">thelastmedici</a>.
    </p>
  </footer>
</body>
</html>

For the markup, I wrapped everything inside a div with the class container within the body. I used the header tag to structure the head section of the design. Each card was placed inside its own div for easier styling, and I used h1, h3, and p tags to differentiate between text elements

The CSS

Mobile Design

For the styling, I followed a mobile-first approach, initially stacking the cards in a single-column layout. I also imported a Google Font to select the specified typography from the style guide. Below is the code for the mobile version

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
      font-size: 16px;
      font-family: 'Poppins', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
}

.container {
    margin-top: 40px;
    max-width: 310px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header{
    padding: 15px;
}

header p{
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Poppins';
    padding-top: 10px;
    line-height: 1.25rem;
    color:  hsl(212, 6%, 44%);
}

h1{
    font-size: 22px;
}

h1 span{
    color: hsl(212, 6%, 44%);
    font-weight: 400;
}

.supervisor, .team-builder, .karma, .calculator{
    padding: 22px;
    margin: 20px;
    border-radius:5px;
    box-sizing: border-box; 
}
.supervisor{
    border-top: 5px solid hsl(180, 62%, 55%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);

}
.team-builder{
    border-top: 5px solid hsl(0, 78%, 62%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);
}
.karma{
    border-top: 5px solid hsl(45, 100%, 50%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);
}
.calculator{
    border-top: 5px solid hsl(212, 86%, 64%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);
}

.supervisor p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}

.supervisor .image{
    padding-left: 150px;
}

.team-builder p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}
.team-builder .image{
    padding-left: 150px;
}

.karma p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}
.karma .image{
    padding-left: 150px;
}
.calculator p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}
.calculator .image{
    padding-left: 150px;
}

Desktop Design

Designing the desktop version, I used the grid system. Splitting the grid into three columns and setting the grid to auto rows to automatically create rows as needed with a width that doesnt grow beyond 1000px, placing everything in the container div.

.container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        max-width: 1000px;
        margin-top: 0px;
        overflow-y: hidden;
    }

For the header section, I placed it in the first column and made it span three columns, just like the goal image, so that the header can be well centered, giving the h1 a font size of 32px so as to make it bold and adding all necessary styling for the paragraph text too, as shown in the goal project. The header section's code is shown below.

header {
        grid-column: 1 / span 3;
        text-align: center;
        max-width: 750px;
        margin: 0 auto;
        margin-left: 40px;
        padding-left: 197px;
        margin-top: -114px;
        margin-bottom: -161px;
    }

    h1{
        font-size: 32px;
    }
    header p {
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        font-family: 'Poppins';
        padding-top: 10px;
        padding-left: -3pc;
        margin-left: 42px;
        margin-right: 13px;
        line-height: 1.25rem;
        color: hsl(212, 6%, 44%);
    }

Like the code below described in the target image, each testimonial part is positioned in its appropriate grid location.

karma {
        grid-column: 2;
        grid-row: 3;
        margin-bottom: 74px;
        margin-top: -364px;
    }
    .team-builder{
        margin-top: -165px;
    }
    .supervisor{
        margin-left: 20px;
    }

To guarantee a smooth transition from mobile to desktop, the desktop screen was constructed with a 1024px media query.

@media (min-width: 1024px)

Conclusion

Overall, this project is suitable for beginners who want to put their skills at building multi-column CSS grids and responsive layouts to the test.

Links to my solution:

1) https://github.com/thelastmedici/four-card-feature-section

2) live-link

what happens when you type https://www.google.com in your browser and press Enter?

asiwaju — Sun, 26 May 2024 19:11:32 +0000

Understanding the functioning of the internet is essential in grasping the mechanics of the web and websites. As you navigate the online realm by typing a website address into your browser and hitting enter, a series of intricate processes occur in the background. Your browser, acting as the client, sends a message to your Internet Service Provider (ISP), such as AT&T or Comcast in the US or BT or TalkTalk in the UK.

This message communicates your request to access a specific website, like 'google.com', to the ISP. The ISP then forwards this inquiry to a crucial component known as a Domain Name System (DNS) server - akin to an advanced phone directory. Subsequently, the DNS server seeks and retrieves the precise IP address associated with the requested website from its database.

Every device connected to the internet has a unique IP address, serving as a digital address for routing data between computers. Once the DNS server identifies the IP address, it relays this crucial information back to your browser through the ISP via the internet. Following this, you can directly contact the server associated with the IP address, which in this case would be the Google servers. These servers furnish your browser with all the essential files and data necessary to display the Google homepage.Now let us take a deep dive into "what happens when you type https://www.google.com in your browser and press Enter?"

FIRST STEP:DOMAIN NAME SYSTEM(DNS) REQUEST

Almost everything on the web starts with a DNS (Domain Name System) request. The browser needs to convert the user-friendly domain name www.google.com into an IP address, which computers use to communicate. To do this, it sends a query to a DNS server, which functions like the internet's phonebook, retrieving the IP address associated with Google's server."

THE PROTOCOL SUITE: HOW TCP AND IP WORK TOGETHER.

The protocol suite known as TCP/IP plays a crucial role when it comes to using the IP address. TCP ensures a dependable connection between your machine and Google's server, ensuring the integrity and proper order of the data. IP, on the other hand, is responsible for accurately routing the data packets to the expected destination.

THE FIREWALL

The firewall, known as the guard, plays a crucial role in the journey of packets. Its main purpose is to ensure the safety and authorization of traffic by carefully examining each packet. Only after passing predefined rules does the firewall permit the packets to continue their journey.

THE SECURE CHANNEL:HTTPS AND SSL.

In a secure domain such as HTTPS, Secure Socket Layer (SSL) or its successor, Transport Layer Security (TLS), play a vital role in establishing a secure connection. They achieve this by encrypting the data exchanged between your browser and Google's server, effectively protecting against eavesdropping(in the context of network security, refers to the unauthorized interception and listening to private communications over a network).

TRAFFIC COORDINATOR: LOAD BALANCING.

A load balancer serves as a traffic distributor and coordinator helping to effectively distribute incoming requests among multiple servers. The purpose of this is to prevent any individual server from becoming overwhelmed, resulting in improved performance and enhanced reliability. By evenly balancing the load, the load balancer optimizes the utilization of server resources.

THE GATE WAY: WEB SERVERS.

After load balancing, the web server steps in to handle the HTTP request. It determines the necessary action and often interacts with an application server to further process the request it also determines the course of action from the recieved requests.

THE PROCESSOR: APPLICATION SERVER.

The application server serves as the central intelligence of the operation. It executes the essential business logic required to fulfill the request. This server communicates with the database to retrieve or update information and processes the data as needed. Once all necessary operations are completed, the application server prepares the HTTP response, ensuring it is ready to be sent back to your browser. This response includes all the dynamic content and data requested, seamlessly integrating backend processes with the user-facing web application.

THE VAULT:DATABASE.

In order to fulfill your request, the application server may need to retrieve or store data. It establishes communication with the database, serving as the central storage for data storage and management. Through these operations, the application server diligently ensures the successful and efficient execution of your search requests.

THE FINAL ACT:RENDERING.

The HTTP response traverses a complex path and ultimately reaches your browser wherein it undergoes rendering of HTML, CSS and JavaScript elements. This collaborative process culminates in the familiar and beloved Google webpage experience.

The seamless orchestration of this sequence of events, though seemingly instantaneous, is a testament to the engineering excellence that is inherent within the realm of technology. It represents a prodigious achievement in the field, showcasing the vast potential and possibilities of the ever-evolving technological landscape.

I'm new here

asiwaju — Sun, 25 Jul 2021 21:07:47 +0000

I'm a beginner and I really have the desire to be a software developer..I hope I find help here