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

Responsive single page using flexbox

Edi Carlos 130

@ediCarlosSilva

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


I would like (and would be so grad) if someone see my solution and told me if I used tags unnecessary. Maybe sugest good names for my css classes.

I programation, I learned someday, that there is not good and better code for the solution. What there is, is your solution. "you solved the problem".

But in front-end, I would be so grad, if someone told to me, helping me to improve my self. Thanks!

Community feedback

@javascriptor1

Posted

Hi Edi ,

Nice work. You have included lots of span elements which not really need it for the purpose you wanted to achieve ( breaking into new line). You can control text flow by control the width of the element. Moreover , if you want to break into a new line , just use the <br> tag and it will send the text which comes after into a new line.

Another note , your p tag ( class="box__descricao" ) is not aligned with h1 tag (class="box__titulo") as the design. Give it a look.

Also , there is no need to wrap h1 and p tag in div tag. p & h1 tags are block level elements and they are the only child for each div in your markup. So using div here does not make any sense - you can write the tags directly without div.

Keep Going 🚀

Marked as helpful

1

Edi Carlos 130

@ediCarlosSilva

Posted

Hi @javascriptor1 ! I did it. Could you see there? If it is ok? thanks.

0

@javascriptor1

Posted

Hii Edi,

The p tag alignment is correct but not h1. Try to increase the font size of h1 tag and compare with original design using trial and error till you get it right.

@ediCarlosSilva

1

@M-UmarHashmi

Posted

Congratulations for creating your first project here! One thing which I can point out is that your project is not responsive for screen size below 360 px which is not a good thing. You can use medai queries to make it mobile responsive for screen sizes below it. It will enhance the user experience and you will also practice mobile responsive layout and figure out which problems can come in the way. Otherwise everyother things seem good. Best of luck for upcoming projects. Be motivated and happy coding!

Marked as helpful

1

Edi Carlos 130

@ediCarlosSilva

Posted

Hi @M-UmarHashmi ! thanks. I did it. Could you see there? thanks.

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