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.
saya mulai dengan mengerjakan sebuah challange yang mudah berjudul QR code 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">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | QR code component - Day 1</title>
</head>
<body>
<div class="container">
<div class="card">
<img src="images/image-qr-code.png" alt="">
<div class="text">
<h2> Improve your front-end skills by building projects</h2>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills <br> to the next level</p>
</div>
</div>
</div>
</body>
</html>CSS :
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Outfit', sans-serif;
background-color: hsl(212, 45%, 89%);
min-height: 100vh;
display: flex;
align-items: center;
font-size: 15px;
}
.container {
max-width: 360px;
margin: 0 auto;
}
.card {
background-color: hsl(0, 0%, 100%);
padding: 18px;
border-radius: 17px;
text-align: center;
margin: 0 1em;
}
.card img {
width: 100%;
border-radius: 12px;
}
.text {
padding: 22px 10px;
}
.text h2 {
color: hsl(218, 44%, 22%);
padding-bottom: 15px;
}
.text p {
color: hsl(220, 15%, 55%);
}This is the 1st frontend mentor challenge we will cover. Today we will convert a QR Code Component design to responsive HTML, CSS.
#thechallenge
- A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.
#link
- Interactive card details form challenge: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H
- Solution URL: https://github.com/ICode88/QR-code-component-DAY-1
- Live Site URL: https://icode88.github.io/QR-code-component-DAY-1
👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤
⏱ Timestamps:
00:00 Starting Up
03:45 HTML
07:12 CSS
15:21 Responsive
#socialmedia
Twitter : https://twitter.com/VlogKomputer
✨Frontend Mentor Challenges Playlist Link:
#frontend #day1 #frontendmentor #challenge #solution #vlogkomputer
Keywords: qr code component, qr code component solution, qr code component codepen, frontend mentor challenge, front end mentor, web design challenge
Komentar
Posting Komentar