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 Stats preview card component 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 | Stats preview card component - Day 8</title>
</head>
<body>
<main>
<div class="header"></div>
<div class="content">
<h1>Get <span>insights</span> that help your business grow.</h1>
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
<ul>
<li><span>10k+</span><span>companies</span></li>
<li><span>314</span><span>templates</span></li>
<li><span>12m+</span><span>queries</span></li>
</ul>
</div>
</main>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');
:root {
--Very-dark-blue: hsl(233, 47%, 7%);
--Dark-desaturated-blue: hsl(244, 38%, 16%);
--Soft-violet: hsl(277, 64%, 61%);
--White: hsl(0, 0%, 100%);
--Slightly-transparent-white-main: hsla(0, 0%, 100%, 0.75);
--Slightly-transparent-white-stat: hsla(0, 0%, 100%, 0.6);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
font-size: 1.5rem;
display: grid;
place-content: center;
min-height: 100vh;
padding: 2.4rem;
background-color: var(--Very-dark-blue);
}
main {
background-color: var(--Dark-desaturated-blue);
border-radius: 1rem;
overflow: hidden;
max-width: 111rem;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 24rem auto;
grid-template-areas: "header" "content";
}
.header {
grid-area: header;
background-image: url(images/image-header-mobile.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color: var(--Soft-violet);
background-blend-mode: multiply;
opacity: 0.8;
}
.content {
grid-area: content;
padding: 3.2rem;
}
h1 {
text-align: center;
font-size: 2.8rem;
font-weight: 700;
line-height: 3.2rem;
color: var(--White);
margin-bottom: 1.6rem;
}
h1 span {
color: var(--Soft-violet);
}
p {
text-align: center;
font-size: 1.5rem;
font-weight: 400;
line-height: 2.5rem;
color: var(--Slightly-transparent-white-main);
margin-bottom: 7.2rem;
}
ul {
list-style: none;
text-align: center;
}
ul li {
margin-bottom: 2.8rem;
}
ul li span {
display: block;
}
ul li span:first-child {
font-size: 2.4rem;
font-weight: 700;
line-height: 3rem;
color: var(--White);
margin-bottom: 0.5rem;
}
ul li span:last-child {
font-family: 'Lexend Deca', sans-serif;
font-size: 1.3rem;
font-weight: 400;
text-transform: uppercase;
color: var(--Slightly-transparent-white-stat);
}
@media screen and (min-width: 768px) {
main {
grid-template-columns: 1.1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "content header";
}
h1, p {
text-align: left;
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
margin-right: 1.6rem;
}
ul li {
margin: 0;
}
}
@media screen and (min-width: 1024px) {
.header {
background-image: url(images/image-header-desktop.jpg);
min-width: 54rem;
}
.content {
padding: 7rem 11rem 6.4rem 7rem;
}
h1 {
font-size: 3.6rem;
line-height: 4.4rem;
margin-bottom: 2.6rem;
}
}This is the 8st frontend mentor challenge we will cover. Today we will convert a Stats preview card component design to responsive HTML, CSS.
#thechallenge
- This is a great small challenge to help get you used to building to a design. There's no JS in this project, so you'll be able to focus on your HTML & CSS skills.
#Your users should be able to:
- View the optimal layout depending on their device's screen size
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62
- Solution URL: https://github.com/ICode88/Stats-preview-card-component-DAY-8
- Live Site URL: https://icode88.github.io/Stats-preview-card-component-DAY-8/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
04:14 HTML
07:12 CSS
18:36 Responsive
#frontend #day8 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Stats preview card component, Stats preview card component solution, Stats preview card component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar