Article Preview Component Full Tutorial (Frontendmentor.io)

In this video we will build the Article Preview Component from FronendMentor.io from scratch. This video will teach you how to break down a design, position items using flex box, and show you how to implement some basic JavaScript.
FrontendMentor Challenge: www.frontendme...
Project Code: github.com/Pra...
Live Site: grand-begonia-...
Like my style? Learn to Code with me:
HTML Course: • What is HTML and How d...
CSS Course: • What is CSS and Why it...
JavaScript Course: • What is JavaScript and...

[@hcmac100]

Great job - thank you.

[@lc8478]

hey bro, thanks for your work. I appreciate your detailed work..
I hope you create more frontendMentor challanges, especially those with JS. I
I have a question. Looking at the active version of the Desktop version, you see a little upside-down triangle attached to the share-component. I tried to recreate that, but failed hard. How do you create that?

[@PracticalWebDev]

Thanks bro.
As far as the triangle thing you I'm not sure man. I suppose you could save it as an image in Figma and then maybe set it as a background image and put the icons on top of it. Or I'm pretty sure their is a way to create the triangle with CSS. I didn't want to waste time figuring it out because I have more content to create and client work to do. If this stuff was for a paying client I'd worry about it LOL

[@BLINKBOXHD]

Hi, is there a way to center the container using flexbox or can we only do it by setting the margin to auto?

[@PracticalWebDev]

You can use flexbox to center an item within a div/container. But If I’m building a small project component I center it with margin auto and add top margin because it otherwise looks bad on the mobile devices. Using flexbox you end up getting a ton of margin on top in smartphone view which looks dumb and requires more code to be written. In the future, search that question on Google, build a project completely alone without me, and then my answer wont be necessary because you’ll learn this on your own, which is much more powerful. If you want to be a web dev, learn to look stuff up and struggle before discovering the answer.