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

@fyrfli's Solution to the Clipboard Landing Page challenge

Camille 130

@fyrfli

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


As I note in my README, the solution looks presentable but there are overflows everywhere. I know enough that I can definitively say it has to do with my box sizing and margins, but I just can't get it right. Submitting as is in the hopes for some useful feedback on how I can do this better.

Community feedback

P
Grace 27,590

@grace-snow

Posted

Hi Camille

I think your layout problems stem from using % widths heights and flex basis everywhere. That's never going to give you good control. Instead, use techniques like max-width on layout elements to let them grow up to a point as needed, and only ever use explicit heights (preferably in rem) for images.

On my mobile I'm seeing content overlap, touch side of screens and lots of different font sizes but it's hard to advise on all of these without inspecting in browser and I'm away from my computer atm.

I can definitely advise

  • change your use of landmark elements - this is a full page solution so should have a header main and footer (your attribution is fine to also be in a footer, just give it an aria-label of "attribution")
  • logo images should just say the name of the site/product. Or, if wrapped in an anchor tag to take people home, as is a usual convention, you can make the alt something like "Clipboard - Home"
  • footer links need to use interactive elements
  • there should be a nav in that footer
  • on desktop looking at the preview above all of your fonts look too small
  • on desktop especially it's important to limit text line length for readability (and it's what the design shows). A common way to do this is with a max-width in ch units. You may need to add margin auto to center the text block again after applying this.
  • very very very important if you scale root font size down on html to immediately scale it back up again with font size 1.6rem on the body element, and look up all the elements that don't inherit font size from the body so you know to increase their font size too. BUT, in my opinion and experience it is completely unnecessary to scale 1rem down to 10px like this and simply advise you don't do that at all. The potential accessibility issues out weigh the very little benefit it gives you

I can see you've not had any feedback on other solutions and I think this has maybe been a step ahead for you. So I'll try and go back to look at your others - some feedback and refactoring there will likely really help ☺

Good luck

Marked as helpful

2

P
Grace 27,590

@grace-snow

Posted

Ps make sure you fix those report errors above 👆 - they're very minor typo and use of section where you may as well use a div

Marked as helpful

1
Camille 130

@fyrfli

Posted

@grace-snow Yes. I am brand new so I am still working my around the site and the culture ... I know I need to initiate more with others before I get feedback on my own stuff. But the coding bug is biting hard; so much so that my social skills are being neglected. ;)

I only saw that typo after I'd already gone to bed and forgot to make a note to fix it first thing this morning. On it!

Thanks SO much for all that feedback. I actually started over again this morning because in my own head my solution was all jumbled and confused. So I will incorporate all this into my new attempt.

0
P
Grace 27,590

@grace-snow

Posted

@fyrfli I don't think you need to start again, especially not with the html. This is well on the way!

But even if you do redo, you can push up new code to the same repo. That's what version control (git) is great for - improving and seeing changes over time

0
Camille 130

@fyrfli

Posted

@grace-snow Yep. I am using the same project just a new branch (develop; this way the pages url doesn't get updated every push).

I did re-do the HTML markup because, like I said, I think I was confusing myself. I wanted to organise it in a less confusing (to me) manner. My selector names were all over the place. And ... I find I focus better if I am starting on a clean canvas. At some point, I am going to have to learn how to clean code up as that is part and parcel of this work too, yes? ;)

0
Camille 130

@fyrfli

Posted

@grace-snow You said:

"on desktop especially it's important to limit text line length for readability (and it's what the design shows). A common way to do this is with a max-width in ch units. You may need to add margin auto to center the text block again after applying this."

When you say "what the design shows", I'm not seeing that in the original files. Is that in the part of the project gated behind a subscription?

Also, you may be right about this challenge being a bit beyond my my level. I thought I knew enough to take it on. Maybe not. Although, I am enjoying the challenge anyway. :)

0
P
Grace 27,590

@grace-snow

Posted

Nope it's visible right there in the preview above. See how your text runs right across the whole.screen width under keep track of your snippets? On the design line length is limited. You can see the same thing happening in lots of places

0

Camille 130

@fyrfli

Posted

@grace-snow OH! Doh. I see it now.

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