Conquering Frontend Mentor — Challenge -7

Frontend

Welcome to the part-7 of the series. You can find part-6 here. We will continue with the next frontend master challenge which is Article Preview Component Challenge.

Article Preview Component

After downloading the resources, I had extracted the zip file and copied it in the Frontend-mentor-challenges folder. After that opened the index.html file with Live Server.

Basic file

Next, we will add the required html tags. Here, everything is wrapped in a container, with a left and right section. The left will only contain an image which we will add through the css.

The right contains all the data, with h3, p and the author section containing image and user data. Also, notice that we have a share__box, which contains our social icons. We are going to hide it from CSS and show once we click on the arrow button.

index.html

Now, we will create our desktop view first. So, head over to style.css and add the google font first. After that in the body, using the font and centring everything using grid.

After that making the container as grid with two columns of 280px and 450px. Also, making a row of 300px.

After that using the left id to show our image of drawer. Also, making the top left and bottom left radius as rounded corners.

style.css

Next, we will start styling our right part. The styles for right, h3 and p are straight-forward.

After that we are making the author class as flex, which contains our author image, name, date and the share image.

We also have the share__box inside it, which we are soon going to hide. The info and the name__date class are also made flex.

style.css

Next, we will style the name, date and the share_image, which is the share icon.

After that we are making the share__box, containing the Share text and three social icon. Also, notice that we are using position: absolute to move it in the correct position.

We are showing the inverted triangle at the bottom in the :before pseudo tag. Again we are using position: absolute to move it in the correct position.

style.css

After that we are doing just a bit of style for the Share text and hiding the whole box, by giving the hidden class a display: none. Notice that we have this class in the share__box div in the html.

span

Now, we will add our tiny logic in main.js file. Here, we are selecting the share_image and the share__box. After that in the event listener of the share button, we are toggling the hidden class.

main.js

Now, our desktop view is complete so we will create our mobile view. The main change is to do the grid-template-columns: 1fr for the container.

mobile view

The share button is also different, as per the design provided. We are changing the whole share__box style, including it’s position.

mobile view

This completes our seventh Frontend mentor challenge. You can find the code for the same in this github link.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript Algorithms and Data Structures Challenge: Day 10

Basics of Javascript · String · split() (method)

Dom Kennedy Type Beat

React: Use Redux To Control Modal Visibility States

Code

Redux Lifecycle in React

Real-time data with redux-saga event channels and socket.IO

How To Do Create React App Customizations

How to Build a Linked List in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Getting Started Learning React.js

REACT JS MASTERING GUIDE — Part 1: React Components & Props

Inputmode attribute in HTML — Display Appropriate Mobile keyboards

How to Build a Github User Search App With ReactJS 🚀

Learn how to build a Github user dashboard by using ReactJS then test & deploy the app with Cypress, WebdriverIO, and ScreenerIO.