QR Code Component - Frontend Mentor Challenge

[@nicoleallen5352]

wow this was so great and the steps were easy to follow, I recently joined frontend mentor and you have helped me immensely, this video was so helpful. Great job sir.

[@fkndead454]

Your style is awesome, I am going through your videos and learning quite a bit

[@rc-wingman5719]

thanks. just registered to Frontend Mentor and looking at how submitting on the site works. Very cool and fast video. No faces, no blabla. Like your content! Why is no one using Dreamweaver for frontend work these days? Isn't it "the IDE" for this? 5-15 years ago every web design company I knew used it for PHP, WordPress, and HTML-CSS work.

[@tsbsankara]

I'm glad you liked the video! I confess - this is the first time I'm hearing about Dreamweaver 😅

[@biljeg]

Very good video, thank you for this quality of content.

[@realityglitch9677]

Thank you very much!!! You can't even imagine how much you helped me💪🏻🔥🙌🏻

[@paulonivar5678]

Thank you very much for your tutorial, it was really helpful. Your tutorial helped me accomplish my goal and I learn a few new things along the way.

[@tsbsankara]

I'm glad to hear that 😊

[@dilinyercastillo7129]

Thank you very much for this video!

[@avlodlar]

justify-content: center; height: calc(100vh - 1px);

[@islamicmotivation04u]

Thank you for the detailed video sir

[@florin7538]

Thanks for this video, it was helpful.

[@huynhnhutanhduy]

Excuse me, Why did you subtract 1px from 100vh in the body? I don't quite understand about that

[@tsbsankara]

Because on mobile devices, viewport heights are not properly supported, such that they cause the content to readjust every time that the viewport changes like when you scroll. So to avoid this behaviour, I use the calc() function and subtract a (negligible) amount of pixels so that the height evaluated by the browser is now in pixels and no longer in viewport heights. Makes sense?

[@khaledMohamed-tp4wx]

@@tsbsankara does this still happen when using vmin or dvh?

[@girijeshthodupunuri1300]

can you explain why you set the height to calc(100vh - 1px) for it to be vertically in the middle of screen?

[@tsbsankara]

When you use flex to align items, you need to have a fixed height on the element so that it centres it within the parent element. In this case, we wanted the container to center in the middle, therefore we add a height of 100vh - 1px. We take away the 1px to allow for full support of the height on mobile screens, because smartphones don't correctly interpret vh units, but they have complete support for px.

[@nadeemdirkse]

thanks bro ....im new at this and it was very helpfull

[@tsbsankara]

That's so nice to hear. I'm glad I could help

[@tetradhomes5022]

God bless you for this video. Been having problems on it

[@tsbsankara]

You are welcome 😊

[@bengbeng2005]

you didn't set width and height to the ".container", why it is not stretching on the window? and why did you set a margin on the body

[@tsbsankara]

Because I added the fixed width as a media query towards the end. Keep watching the video, or take a look at the repository - link in the description. Margin on the body to push the container inwards away from the edges.

[@seanwalkerjr1864]

How did you get the images and index.html folders, please? Thank you

[@tsbsankara]

I downloaded them from the challenge website

[@mostafaalaael-din2600]

hello may i ask you why you set (height 100vh - 1px)?? what does it mean??

[@tsbsankara]

So, vh units are not properly supported on mobile because it causes the content on the website/web app to resize every time that the viewport height(vh) changes - and it changes when you scroll up or down on mobile. So to prevent this, I use the CSS function calc() and subtract a negligible amount of pixels, in this case 1px, which ensures that the evaluated height is now is pixels, which are so much better supported on mobile. Hope this helps :)

[@MalikMuneeb32]

When i write ( git init ) in powershell it gives error

[@tsbsankara]

Try to run it as administrator. And also check whether you have git installed. If not, use command prompt

[@MalikMuneeb32]

@@tsbsankara Thx Bro

[@MoadTechnologie]

It worked thanks@@tsbsankara

[@wynez1]

I still don't quite get about height: calc(100vh - 1px); this part. I read your explanation from other comments here and understand this is to accommodate the mobile devices as the viewport is still not supported by mobile devices properly. But I'm using my desktop on my computer. If I did not put height: calc(100vh - 1px); in my CSS code, it does not center *vertically* properly. However, once I added it to the CSS code, it will center perfectly now. I don't understand this. I'm still using the same flexbox, same flex-direction, justify-content & align-items. I thought with that (flexbox), I can make it center perfectly. But I still have to add height: calc(100vh - 1px); to make it center perfectly. Why?

[@wynez1]

I think I figured it out. Thomas' explanation still stands! I only realised, the height of the depends on its content. And because my content- the card which includes the image, the title and the paragraph do not take up the whole viewport, that's why my card does not center perfectly but it does center perfectly in the tag. But if I set my 's height to 100vh (which means taking up the whole viewport), my card will be in the center perfectly. And Thomas' code that minus 1px is just for mobile devices as mobile devices can interpret px (pixel) better and 1px does not change much in the position of the height cuz it's such a small amount. I'm glad I figured it out! Hope this helps anyone confused like me today.

[@tsbsankara]

I understand the frustration - I also understand the relief when you finally figured it out 😁

[@nicoleallen5352]

I'm stuck at terminal - how can I initialized git so that it can run like yours. Did you install a program?

[@tsbsankara]

Check if you have Git installed by running the command `git --version` in your terminal. It should print out the current version of Git if you have it installed. If nothing prints out - or if it says something, "git is not recognized as an internal or external command" then go to git-scm.org to download and install it. About committing to the remote GitHub repository, you can follow the steps in the video, or go through the GitHub documentation on this link: docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github

[@nicoleallen5352]

@@tsbsankara thanks, this is a great help

[@codenamemoe9337]

Great video as usual.

[@nicoleallen5352]

For some reason I'm seeing my styles.css like this - qr- code- component> # styles.css 1 - with an empty row to enter codes. I don't know if I entered something by mistake and it came out like that. I can't see any of my Css at all. Please tell me there is a way for me to see my css again @styles.css. plse sir on the left under open editors plse sir, thanks much for all your help.

[@tsbsankara]

What happened that caused the css to disappear?

[@nicoleallen5352]

@@tsbsankara I believe I pressed something I was hoping you can help me figure it out ...I know that it has to be there however bcus the qr code image shows up when I run the live server but it is positioned to the left of the page and the grey background is no longer there. Hoping this cleared up what I'm saying. Thanks for your help

[@villyaugust6439]

Wonderful Thank you!!!

[@qrchina]

thank you brother

[@renatollagas5711]

Thank you sir!

[@tsbsankara]

Thank you 😊

[@tryinghardfedev6962]

lol the ads.

[@tsbsankara]

😅😁

[@eminn_]

thx gj