Not Found
Not Found
socket hang up
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Flex-box, Grid

POTBβ€’ 330

@Peteonthebeat

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What did you find difficult while building the project? β€”Β I am in the process of figuring out 'Flex' and 'Grid.' So I'll refer to them as the most difficult. I

Which areas of your code are you unsure of? β€” I am quite satisfied with the results I get from using 'em' and 'rem' instead of pixels. On the contrary, I'm not 100% sure I use those values most optimally...

Do you have any questions about best practices? β€”Β Yes, I actually have one. What should I do if the following doesn't center a div inside my main?

main { display: flex; justify-content: center; align-items: center; }

Regards!

Community feedback

Snehamoy Bagβ€’ 600

@snehamoybag

Posted

Hi @Peteonthebeat

Looks like your site is not loaded as the index.html is inside of a folder/directory. I'd recommended you to put the files outside of the Qr~Code-Component folder and then update the solution πŸ‘

And also answering to your query, justify-content: center and align-items: center should center a div both horizontally and vertically when the parent container has a set height. If the parent container doesn't have a height, align-items property won't work when flex-direction is set to row. Similarly, justify-content won't work when the parent container doesn't have a height and its flex-direction is set to column. πŸ˜„πŸ‘

Marked as helpful

1

POTBβ€’ 330

@Peteonthebeat

Posted

Hello @snehamoybag !

Thank you for the extensive feedback! I'll definitely consider your advice on centering divs. I also already submitted the files as they are outside of the folder. So I hope now everything works properly. I should have done that initially, but I'm new to this. I appreciate your understanding!

Kind Regards!

1
Snehamoy Bagβ€’ 600

@snehamoybag

Posted

Hi @Peteonthebeat,

The file structure should be something like this :

  • images folder containing all the images
  • stylesheets folder containing all the css files
  • scripts folder containing all the script files index.html or any other html file should be outside of any folder.

And make sure css and script files are linked properly in the html file otherwise it wont load.

Also you can check out the full guide of submitting solution

0
POTBβ€’ 330

@Peteonthebeat

Posted

Hey @snehamoybag, Let me clarify, if I understand correctly.

I need a total of 3 folders:

1 Called 'images' to contain all the images; 1 Called 'stylesheets' to have all my CSS files; for instance: styles.scss, styles.CSS.map, and styles.css 1 Called 'scripts' including all my HTML files, like index.html.

I link my HTML and CSS files by using a link tag like this:

<link rel="stylesheet" href="styles/styles.css" />

in the head of my HTML file.

Thanks for the feedback and guidance!

Regards!

0
Snehamoy Bagβ€’ 600

@snehamoybag

Posted

@Peteonthebeat generally these are the main 3 folders you gonna need.. I'd recommend you to google more about this topic, such as

  • how to setup file structure for web site development
  • and how to link the stylesheets/scripts etc file to .html files πŸ˜„πŸ‘

Marked as helpful

0
POTBβ€’ 330

@Peteonthebeat

Posted

Hey @snehamoybag, I am sorry to bother you again. I'm trying to update my solution, and everything works (let's just say) almost perfectly when I test the project with VS Code Live Server (cmd + L + O).

I also uploaded the files (no folders) by manually dragging and dropping them into the brand-new repository I created.

However, my project looks like plain HTML when I test things through the provided Github link. There are no images, and there's absolutely no CSS. That is not how things are in my actual project.

I wonder whether you would share some insights on how to fix this, so I can upload the solution and move to the next challenge.

Sincere, Pete

0
POTBβ€’ 330

@Peteonthebeat

Posted

@Snehamoy Bag, Thanks!

I'll definitely consider your advice and maybe resubmit this solution with the folders properly organized...

Sincere, Pete

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord