Menjadi Seorang Frontend Developer
Disini kita akan membuat sebuah dokumentasi perjalanan menuju seorang frontend developer,
jadi ikuti dan saksikan perjalanan saya menjadi seorang frontend developer, saya akan konsisten dalam mengerjakan nya selama beberapa hari kedepan.
ini adalah hari ke 8 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Four card feature section pada website frontend mentor, dengan kelas newbie, saya mengkonvert menggunakan HTML dan CSS.
dimana kita menganalisis terlebih dahulu apa saja kebutuhan yang kita perlukan.
seperti memberikan kelas yang nantinya kita bisa style, dan melihat ketentuan yang berlaku,
dibawah ini contoh kodingan yang sudah selesai :
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>Frontend Mentor | Four card feature section - Day 10</title>
</head>
<body>
<main>
<div class="title">
<h2>Reliable, efficient delivery</h2>
<h1>Powered by Technology</h1>
<p>Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p>
</div>
<div class="cards">
<div class="card cyan">
<h1>Supervisor</h1>
<p>Monitors activity to identify project roadblocks</p>
<img src="images/icon-supervisor.svg" alt="icon-supervisor" />
</div>
<div class="card red">
<h1>Team Builder</h1>
<p>Scans our talent network to create the optimal team for your project</p>
<img src="images/icon-team-builder.svg" alt="icon-team-builder" />
</div>
<div class="card orange">
<h1>Karma</h1>
<p>Regularly evaluates our talent to ensure quality</p>
<img src="images/icon-karma.svg" alt="icon-karma" />
</div>
<div class="card blue">
<h1>Calculator</h1>
<p>Uses data from past projects to provide better delivery estimates</p>
<img src="images/icon-calculator.svg" alt="icon-calculator" />
</div>
</div>
</main>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
:root {
--Red: hsl(0, 78%, 62%);
--Cyan: hsl(180, 62%, 55%);
--Orange: hsl(34, 97%, 64%);
--Blue: hsl(212, 86%, 64%);
--Very-Dark-Blue: hsl(234, 12%, 34%);
--Grayish-Blue: hsl(229, 6%, 66%);
--Very-Light-Gray: hsl(0, 0%, 98%);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 1.5rem;
}
body {
font-family: 'Poppins', sans-serif;
min-height: 100vh;
display: grid;
place-content: center;
padding: 3.2rem;
}
main {
max-width: 35rem;
margin-top: 5.2rem;
}
.title {
padding-bottom: 4.8rem;
}
h1 {
font-weight: 600;
font-size: 2.4rem;
line-height: 3.6rem;
letter-spacing: 0.01em;
color: var(--Very-Dark-Blue);
text-align: center;
margin-bottom: 1.6rem;
}
h2 {
font-weight: 200;
font-size: 2.4rem;
line-height: 3.6rem;
letter-spacing: 0.005em;
text-align: center;
color: var(--Very-Dark-Blue);
}
p {
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.005em;
color: var(--Grayish-Blue);
text-align: center;
}
.cards {
padding: 2.8rem 0;
}
.cards .card {
background-color: var(--Very-Light-Gray);
box-shadow: 5px 5px 13px rgba(163, 165, 173, 0.3);
border-radius: 5px;
padding: 2.8rem;
margin-bottom: 2.4rem;
}
.cards .card h1 {
font-size: 2rem;
line-height: 3rem;
letter-spacing: 0.005em;
text-align: left;
margin: 0;
}
.cards .card p {
font-size: 1.3rem;
line-height: 2.3rem;
letter-spacing: 0.015em;
text-align: left;
margin-bottom: 3.2rem;
}
.cards .card img {
display: block;
margin-right: 0;
margin-left: auto;
width: 5.8rem;
}
.cyan {
border-top: 4px outset var(--Cyan);
}
.red {
border-top: 4px outset var(--Red);
}
.orange {
border-top: 4px outset var(--Orange);
}
.blue {
border-top: 4px outset var(--Blue);
}
@media screen and (min-width: 1024px) {
body {
padding: 7.8rem;
}
main {
margin: 0;
max-width: 117rem;
}
.title {
max-width: 52rem;
padding-bottom: 2.4rem;
margin: 0 auto;
}
h1 {
font-size: 3.6rem;
line-height: 5.4rem;
}
h2 {
font-size: 3.6rem;
line-height: 5.4rem;
letter-spacing: 0.005em;
}
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: row;
gap: 2.8rem;
grid-template-areas: "cyan red blue" "cyan orange blue";
padding: 0;
padding-top: 3.2rem;
}
.cards .card {
margin: 0;
padding: 3.2rem;
max-width: 35rem;
}
.cyan {
align-self: center;
grid-area: cyan;
}
.red {
grid-area: red;
}
.orange {
grid-area: orange;
}
.blue {
grid-area: blue;
align-self: center;
}
.cards .card h1 {
margin-bottom: 0.8rem;
}
.cards .card p {
margin-bottom: 3.8rem;
}
.cards .card img {
width: 6.4rem;
}
}This is the 10st frontend mentor challenge we will cover. Today we will convert a Four card feature section design to responsive HTML, CSS.
#thechallenge
- A nice layout-based challenge for beginners. This will test anyone who is new to multi-column and responsive layouts.
#Your users should be able to:
- View the optimal layout for the site depending on their device's screen size
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK
- Solution URL: https://github.com/ICode88/Four-card-feature-section-DAY-10
- Live Site URL: https://icode88.github.io/Four-card-feature-section-DAY-10/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:58 HTML
08:28 CSS
22:15 Responsive
#frontend #day10 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Four card feature section, Four card feature section solution, Four card feature section codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar