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 5 saya menjadi seorang frontend developer dengan mengerjakan sebuah challange yang mudah berjudul Results summary 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="./assets/images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Results summary component - Day 6</title>
</head>
<body>
<main>
<div class="left">
<h5>Your Result</h5>
<div class="score">
<div class="big-score">
<h1>76</h1>
</div>
<p>of 100</p>
</div>
<h3>Great</h3>
<p>You scored higher than 65% of the people who have taken these tests.</p>
</div>
<div class="right">
<h5>Summary</h5>
<div class "score">
<div class="score-reaction">
<div class="score-name">
<img src="assets/images/icon-reaction.svg" alt="">
<span>Reaction</span>
</div>
<span class="light"><span class="black">80</span> / 100</span>
</div>
<div class="score-memory">
<div class="score-name">
<img src="assets/images/icon-memory.svg" alt="">
<span>Memory</span>
</div>
<span class="light"><span class="black">92</span> / 100</span>
</div>
<div class="score-verbal">
<div class="score-name">
<img src="assets/images/icon-verbal.svg" alt="">
<span>Verbal</span>
</div>
<span class="light"><span class="black">61</span> / 100</span>
</div>
<div class="score-visual">
<div class="score-name">
<img src="assets/images/icon-visual.svg" alt="">
<span>Visual</span>
</div>
<span class="light"><span class="black">72</span> / 100</span>
</div>
<button>Continue</button>
</div>
</div>
</main>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap');
:root {
--Light-red: hsl(0, 100%, 67%);
--Orangey-yellow: hsl(39, 100%, 56%);
--Green-teal: hsl(166, 100%, 37%);
--Cobalt-blue: hsl(234, 85%, 45%);
--Light-slate-blue: hsl(252, 100%, 67%);
--Light-royal-blue: hsl(241, 81%, 54%);
--Violet-blue: hsla(256, 72%, 46%, 1);
--Persian-blue: hsla(241, 72%, 46%, 0);
--White: hsl(0, 0%, 100%);
--Pale-blue: hsl(221, 100%, 96%);
--Light-lavender: hsl(241, 100%, 89%);
--Dark-gray-blue: hsl(224, 30%, 27%);
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Hanken Grotesk', sans-serif;
font-size: 1.8rem;
display: grid;
place-content: center;
font-weight: 500;
min-height: 100vh;
background-color: var(--Pale-blue);
}
main {
max-width: 80rem;
overflow: hidden;
flex-direction: column;
display: flex;
background-color: var(--White);
}
.left {
background: linear-gradient(var(--Light-slate-blue), var(--Light-royal-blue));
text-align: center;
border-radius: 2rem;
color: var(--White);
padding: 3rem;
max-width: 40rem;
width: 100%;
position: relative;
transform: translateY(-20px);
}
.left h5 {
color: var(--Light-lavender);
margin-top: 0.4rem;
margin-bottom: 2.4rem;
font-size: 1.8rem;
font-weight: 500;
}
.left .score {
background: linear-gradient(var(--Violet-blue), var(--Persian-blue));
border-radius: 50%;
width: 14rem;
height: 14rem;
margin-bottom: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 auto;
}
.left h3 {
font-size: 2.2rem;
margin-bottom: 2rem;
margin-top: 2rem;
}
.left p {
color: var(--Light-lavender);
font-size: 1.4rem;
margin-left: 2rem;
margin-right: 2rem;
letter-spacing: 0.0125rem;
}
.right {
background-color: var(--White);
text-align: left;
border-radius: 2rem;
color: var(--Dark-gray-blue);
padding: 3rem;
max-width: 40rem;
width: 100%;
font-size: 1.4rem;
}
.right h5 {
margin-top: 0.4rem;
margin-bottom: 2rem;
font-weight: 800;
font-size: 1.8rem;
}
.right .score :where(.score-reaction, .score-memory,.score-verbal,.score-visual) {
display: flex;
margin-bottom: 1.4rem;
padding: 1rem;
border-radius: 1rem;
width: 100%;
justify-content: space-between;
}
.score-name {
display: flex;
}
.score img {
margin-right: 0.8rem;
}
.light {
color: hsla(224, 30%, 27%, 0.5);
font-weight: 700;
}
.black {
font-weight: 800;
color: hsl(224, 30%, 27%);
}
.score-reaction {
background-color: hsla(0, 100%, 67%,0.1);
color: hsl(0, 100%, 67%);
}
.score-memory {
background-color: hsla(39, 100%, 56%,0.1);
color: hsl(39, 100%, 56%);
}
.score-verbal {
background-color: hsla(166, 100%, 37%, 0.1);
color: hsl(166, 100%, 37%);
}
.score-visual {
background-color: hsla(234, 85%, 45%,0.1);
color: hsl(234, 85%, 45%);
}
button {
border: 0;
background-color: hsl(224, 30%, 27%);
color: var(--White);
font-weight: 700;
padding: 1.5rem;
border-radius: 2.5rem;
width: 100%;
margin-top: 1.5rem;
margin-bottom: 0.4rem;
cursor: pointer;
}
button:hover {
background: linear-gradient(var(--Light-slate-blue), var(--Light-royal-blue));
}
@media screen and (min-width: 768px) {
main {
flex-direction: row;
border-radius: 2rem;
}
.left {
transform: translateY(0px);
}
}This is the 6st frontend mentor challenge we will cover. Today we will convert a Results summary component design to responsive HTML, CSS.
#thechallenge
- This challenge has something for everyone. It’s a HTML and CSS only project, but we’ve also provided a JSON file of the test results for anyone wanting to practice JS.
#Your users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: Use the local JSON data to dynamically populate the content
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV
- Solution URL: https://github.com/ICode88/Results-summary-component-DAY-6
- Live Site URL: https://icode88.github.io/Results-summary-component-DAY-6/
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:43 HTML
11:28 CSS
37:51 Responsive
#frontend #day6 #frontendmentor #challenge #solution #vlogkomputer
Keywords: Results summary component, Results summary component solution,Results summary component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar