2

Let’s Move to the Next Challenge🚀 — Challenge 002

 1 year ago
source link: https://uxplanet.org/lets-move-to-the-next-challenge-challenge-002-ad33b79cd544
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Let’s Move to the Next Challenge🚀 — Challenge 002

Hey Everyone 👋, Hope you all are doing good. If you are a first-time visitor Welcomeee!!🤩. As you might know from last week onwards I have decided to change the route to UI development. And as for challenge No 001 we have done a challenge called NFT Preview Card Component using HTML and CSS.

As for this week’s challenge I have found another easy peasy challenge from Front End Mentor. 👉 Challenge 002Single Price Grid Component.

As Dwayne Johnson said

Success isn’t always about greatness. It’s about consistency. Consistent hard work leads to success. Greatness will come.

So why not continue what we have started?? From what I believe, there is always at least one thing to learn.

1*5NqEGpnyTE-wGnqmQZT3hQ.jpeg

Before beginning, let me highlight a small note:-
For some of you, this might be a challenge that you can do with your eyes closed, for some of you this might be a challenge that you learn a new thing and for some of you this might be the beginner step for UI Dev. So this article is for anyone from pro to beginner who loves to learn and sharpen their skills.🤓 With that…..

LET’S THE CHALLENGE BEGIN💣

1*tl3Ptwnrw23DciNllCqiyA.png
Single Price Grid Component

🔸 Challenge Name:-

Single Price Grid Component

🔸 Description:-

Your challenge is to build out this preview card component and get it looking as close to the design as possible. Your users should be able to:

  • View the optimal layout for the component depending on their device’s screen size

🔸 Tools:-

HTML, CSS & Figma

🔸 Figma Link:-

Single Price GridComponent Link

STEP 01 — Begin With the blueprint (HTML)🚀

First and Foremost we will do a sketch/blueprint of the card component using HTML. Afterwards, we’ll make the look and feel of the Single Price Grid Component according to the Figma File.

🔴 STEP 1.1 Basic structure of HTML

<!DOCTYPE html>
<html lang="en"><!-- Head Section-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title> NFT Preview Card Component </title>
</head><!-- Body Section-->
<body>
</body>
</html>

🔴 STEP 1.2 Create the main structure of the single price grid component

1*_OtOnFJJmBXWOzsCOAYgBA.png

01) Start by dividing the main three classes as shown in the above snap

<body>  <div class="main-grid-container">

<!-- top section of the card -->
<div class="top-container">
</div><!-- bottom section of the card -->
<div class="bottom-container">
</div></body>

02) Since we have sketched out the basic structure of the single price grid component, it’s time for us to sketch out the layout of the top section.👇

1*c3CK6JmYAiE26rtXGjWCzQ.png
<!-- top section of the card --><div class="top-container">    <h1 class="main-heading"> Join our community </h1>    <h2 class="sub-heading"> 30-day, hassle-free money back
guarantee </h2> <p class="description"> Gain access to our full library of
tutorials along with expert code reviews.Perfect for any
developers who are serious about honing their skills. </p> </div>

03) To complete the blueprint and move on to the fun part, let’s finally layout the bottom section.👇 Let’s get into a more descriptive format for further understanding.

1*i0eRNAOzCoHgSlaG4RdKVw.png

(3.1) First and foremost, let us divide the bottom section into main three sections / <div> tags.

<!-- parent bottom container -->
<div class="bottom-container"> <!-- Child 01 container for bottom section-->
<div class="monthly-subscription-container">
</div> <!-- Child 02 container for bottom section-->
<div class="why-us-container">
</div></div>

(3.2) Now we have done the basic layout and it's time to get into the child containers in the bottom section.👇

1*WuS2OB5NXgnLbE4aOp3eiw.png

(3.2.1) Let’s do the layout for the child 01 container in the bottom section.

<div class="monthly-subscription-container">   <h1 class="bottom-main-heading"> 
Monthly Subscription
</h1> <div class="amount-wrapper">
<p class="amount"> $29 </p>
<p class="month"> per month </p>
</div> <p class="monthly-description">
Full access for less than $1 a day
</p> <button class="sign-up">
Sign Up
</button></div>

👆 Now, wait!! Before moving forward let me simply highlight a small thing in the top code snippet. Here we have used a <button> tag for the Sign-up button.

(3.2.2) Let’s do the layout for the child 02 container in the bottom section.

<div class="why-us-container">  <h1 class="bottom-main-heading">
Why Us
</h1>

<p class="why-description">
Tutorials by industry experts Peer & expert code review
Coding exercises <br>
Access to our GitHub repos
Community forum <br>
Flashcard decks <br>
New videos every week
</p></div>

👆 Here we have used a tag called <br> to break the lines. To understand more about <br> tags check out my article ‘Beginners Guide to HTML’ and learn in detail about the tags in HTML.

— — And with that, we have done with the blueprint. It’s time for us to check the output of our blueprint.👀👇 — —

1*vjpYrX9mY-0V_ZJiaCF3bg.jpeg
The output of the basic sketch of the price grid component using HTML

Looks Ugly Nah??? 🤮But wait, don’t judge too soon, it is just the beginning & the best part is yet to come.🔥

STEP 02 — Guys, do you have your coffee with you? it’s time for us to roll into the interior decorating scheme of the blueprint(CSS)🚀.

Alrighty!! now we have reached the best part, it’s time to get our hands dirty by doing the styling in the mobile-first approach. This means we start the styling for the mobile view first and then we’ll adjust the styling for the larger screens using media queries.

1*DSnPwwEO9rP79if6DNIWxg.gif

🔴STEP 2.1 ➡ First and foremost, Import The External Style Sheet to the HTML file

As you can see in the Figma style guide, we have used a font called ‘Karla’ throughout the design. Therefore what we can first do is, go to google font, search for ‘Karla’ font, click on the relevant font weights we needed, and then get the import link.

So in the previous challenge, we have linked the font in the index.html file. But this time we are importing the fonts, therefore go to the external style sheet and paste the imported link at the top of the page.

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&display=swap');

🔴STEP 2.2 ➡ Use root: to declare the colours we are using

You might question What and Why we have used :root?🤔Let me briefly explain to you…

  • The :root CSS pseudo-class matches the root element of a tree representing the document. Moreover, :root is where you have declared and initialized the global vars that you can reuse throughout your stylesheet.
  • Here the var() function is used to insert the value of a CSS variable. When you use CSS variables it has access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.
  • So for the question of WHY we have used :root is, rather than copy and paste the colours over and over again, we can simply place them in the variable and reuse the var() value throughout the stylesheet. It’s simple and easy😆.
:root{
--white:#FFFFFF;
--lightgreen:#C0DF34;
--lightseagreen:#2AB2AF;
--lightergreen:#4ABEBD;
--lightblue:#E6EFF6;
--purplishgrey:#98A6BD;
--boxshadow:rgba(0, 0, 0, 0.25);
}

🔴STEP 2.3 ➡ Include the Styling for the Universal Selector

As I have mentioned in my previous challenge, we are using a universal selector to act as the default styling throughout the page. Therefore rather than using the same styling in every class, we can simply define the styling in a universal selector and it will act as the default styling throughout the page.

*{
align-items: center;
color: var(--white);
font-family: 'Karla', sans-serif;
font-size: 16px;
font-weight: 400;
margin:0px;
}

🔴STEP 2.4 ➡ It’s time to get your hands dirty by styling the Single Price Grid Component in MOBILE FIRST APPROACH..😜

1*CH2-zjKlb3THBj0Dp2av3w.png

01) Let’s style the parent/main container

.main-grid-container {
background-color: var(--white);
border-radius: 5px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
margin-left: 20px;
margin-right: 20px;
margin-top: 75px;
width:100%;
}

02) Give the common styles for the once that we use in both top and bottom containers.

.top-container, .bottom-container {
margin-top:30px;
}.top-container,
.bottom-container .monthly-subscription-container,
.bottom-container .why-us-container
{
padding-left: 25px;
padding-right: 25px;
}

— — Now we have done the styles for the parent wrapper and defined the common styles that we can use in the top and in the bottom section of the single price grid component. The next step would be to include styling for each section separately. — —

03) Style the top section of the Single Price Grid Component

.main-grid-container .top-container .main-heading {
color:var(--lightseagreen);
font-size: 20px;
font-weight: 700;
padding-bottom: 15px;
}.top-container .sub-heading {
color:var(--lightgreen);
font-size: 17px;
font-weight: 700;
line-height: 20px;
padding-top: 15px;
padding-bottom: 10px;
}.top-container .description {
color: var(--purplishgrey);
line-height: 25px;
max-width: 300px;
padding-top: 15px;
}

04) To complete the styling for the mobile view shall we quickly do the styling for the bottom section as well?

1*5mtbp3JxVmpSz--Uc870dg.png

Well...Give yourself a second⏰ let’s first go through the top snap👆🤔. According to that, we have divided the bottom section into three containers. You have the parent container as class=”bottom-container”, and inside that parent class, you have two main child classes for the monthly subscription section and for the why us section.

(4.1) First start off with the parent bottom container

.main-grid-container .bottom-container {
display:block;
}

(4.2) Then, we’ll move to the next two containers in the bottom section👇

1*upl5kXr0C4smZpQHXJ1HsQ.png

(4.2.1) Let us define the common styles that we are using for both child containers.

.bottom-container .monthly-subscription-container,
.bottom-container .why-us-container
{
width: auto;
}

(4.2.2) Let us add the styles for the monthly subscription section

.bottom-container .monthly-subscription-container {
background-color: var(--lightseagreen);
padding-top: 30px;
padding-bottom: 25px ;
}.monthly-subscription-container .bottom-main-heading,
.why-us-container .bottom-main-heading
{
font-size: 20px;
font-weight: 700;
}.monthly-subscription-container .amount-wrapper {
display: flex;
flex-direction: row;
padding-top: 20px;
}.amount-wrapper .amount {
font-size: 30px;
font-weight: 700;
}.amount-wrapper .month {
padding-left: 10px;
}.monthly-subscription-container .monthly-description {
padding-top: 12px;
}.monthly-subscription-container .sign-up {
align-items: center;
background-color: var(--lightgreen);
border-radius: 7px;
border: none;
font-weight: 700;
justify-content: center;
height: 50px;
display: flex;
margin-top: 30px;
width: 100%;
}

(4.2.3) Let us add the styles for the why us section

.bottom-container .why-us-container {
background-color: var(--lightergreen);
padding-top: 30px;
padding-bottom: 15px ;
}.why-us-container .why-description {
max-width: 230px;
line-height: 22px;
padding-top: 20px;
}

— — Phew, now we have completed two main parts of developing the Single Price Grid Component🎯.

But wait... there is one more thing to do 👇

Last but not least, let us add the responsiveness to adjust the single price component according to the device screen size, as shown in the Figma file— —

STEP 03— It’s time to complete the challenge by including responsiveness to adjust the styling according to the device size.🚀

Pre note🔊:- Since I have briefly explained the media query in my ‘Fundamental of CSS’ article, I won’t explain what we have done follow in descriptive format. To get a descriptive idea or a reminder about media queries and other CSS components check out the ‘Fundamental of CSS’ article.

With that note, without wasting any more time let’s include responsiveness.

01) Let’s fix the styling for the tablet portrait.

/* tablet potrait */@media screen and (min-width:768px) and (max-width:992px){  .main-grid-container {
margin-left:80px;
margin-right: 80px;
} .why-us-container .why-description {
max-width: 350px;
}}

02) And finally, complete styling by adjusting styles for larger screens, where the screen sizes are greater than 992px.

/* tablet ladscape & desktop & larger screens */@media screen and (min-width: 992px){
.main-grid-container {
margin-top: 160px;
width: 630px;
} .main-grid-container .top-container .main-heading {
font-size: 30px;
} .top-container .sub-heading {
font-size: 20px;
} .top-container .description {
max-width: 800px;
font-size: 17px;
} .main-grid-container .bottom-container {
display: flex;
flex-direction: row;
justify-content: space-between;
} .bottom-container .monthly-subscription-container,
.bottom-container .why-us-container {
width: 100%
} .bottom-container .monthly-subscription-container{
height: 200px; } .bottom-container .why-us-container {
height: 210px;
} .why-us-container .why-description {
line-height: 20px;
}}

Now we are done with UI development for the Single Price Grid Component. Now the time has arrived to check the outcome of what we have done.

ARE YOU ALSO EXCITED TO CHECK OUT THE OUTPUT LIKE ME?🤩💣

Check the following for the output and let me know your thoughts👀. Does it come as you’ve expected?

1*WfSIVy5Q9pgxXfqDnBlbaA.gif
1*slp9zPrlEEvR2XtXJjOSvg.png

Final Thought

As we have done with the challenge, I’ll end this article with the hope that you have gained and learned something. Thank You for checking this out.
Now your time has arrived to give a try to this challenge. Trust me you would love the process.

If you are interested in gaining more knowledge, sharpening your skillset or need a small reminder, check out the following articles.👇🧠

Understanding flexbox to make things easy:- https://levelup.gitconnected.com/understanding-flexbox-to-make-things-easy-adf90891ff25

Learn the fundamentals of CSS within a few minutes:- https://bootcamp.uxdesign.cc/beginners-guide-to-css-9bc8298985c0

Beginner’s guide to HTML:-https://uxplanet.org/beginners-guide-to-html-and-css-letss-start-off-with-html-3d7ffd035182

And finally do not hesitate to check the Challenge No 001 as well:- NFT Preview Card Component

If you like this give one or more claps and feel free to leave your thoughts and feedback in the comment section.

Thank you for checking this out and feel free to checkout my other articles by clicking the following link 👇

Check It Out

🔸Follow me on Twitter👀: @NathashaR97🔸


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK