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
Not Found
Not Found
Not Found

Submitted

Mobile-first solution using CSS Flex, adaptive web

Alisa 30

@alisaTonga

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 are you most proud of, and what would you do differently next time?

That's my first adaptive web. I stragle most with Css code aligning elements and trying to make it adaptive.

What challenges did you encounter, and how did you overcome them?

As i told that was my first time doing it, i found youtube video and did almost the same thing.

What specific areas of your project would you like help with?

I think right now styling the web is my issue. I;m writting code but sometimes i dont complitely undersand consequences of some parts of code.

Community feedback

P

@nisimi96

Posted

good job!

i do think you wanna work on the flex\grid thing. as you can see you main object is off the center try to add and remove some staff because it small project not need to use main so you dont get confused. try to use display flex on body tag and keep it same just in css do body + justify content center and align items center maybe get you better position

then use the .block as the organizer for the elements that come in side maybe even ! display flex > flex direction ; column that way you don't need to use <br> because all element will come one after one as there DNA is flex column

love it i will give this challenge a try now to see what is my result

keep it up , Yuval

Marked as helpful

0
P

@O-Julia-O

Posted

Hello, Alisa!

You are doing a great job!

Here are some links which tells you more about aligning items on page.

FlexBox: https://css-tricks.com/snippets/css/a-guide-to-flexbox

Grid: https://css-tricks.com/snippets/css/complete-guide-grid

Keep coding :)

Marked as helpful

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