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

html css media queries before and after pseudo elements etc

Millz 530

@Brezus

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


any tips on how to do the curvy backgrounds (without any custom svg creator like getwaves.io) the curved backgrounds gave me a really really warm time i used the images provided for curvy backgrounds and when i do a position absolute or relative and position it the way i want once the screen resizes the perfect position just goes to oblivion! please any article that helps with this or gives tips on this i would love a link to it

Community feedback

P
Grace 27,710

@grace-snow

Posted

Hi

I think this looks ok. My biggest recommendation is to spend more time really learning html semantics, accessible html and really thinking about how a site is going to be used. This needs quite a bit of work still... Some things to think about

  • what is this site to a search engine or screenreader - how will they know what it is
  • should text ever be in a div or span? Does it need to be read with something else? What element should that be
  • is this a form?
  • would. I expect to be able to click this? What element should surround it?
  • should this svg be visible or hidden from assistive technology and search engines?
  • what landmarks and structural elements does my page need?
  • how should I organise my files and make the repo easy to understand?
  • how can I organise my styles better?
  • Is this style declaration reusable?
  • Can I reduce css specificity here?
  • what order should my media queries go in?

I guess my goal in sharing these questions is to encourage you to slow down and break challenges down into small steps. Focus on end users as you plan and then code.

One more tip - never ever have font size in px. Use rem/em. I don't recommend changing on the root either. That default has been set for a reason and it can really mess with the end result for people with different zoom or font size settings.

Keep going and good luck

1

Millz 530

@Brezus

Posted

@grace-snow thank you i will try my best after a while my css got hard for even myself to read again thank you ill be working on these

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