@fyrfli's Solution to the Clipboard Landing Page challenge

Community feedback

• 

  T

  Grace•31,330

  @grace-snowPosted almost 3 years ago

  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

  ---

  

  T

  Grace•31,330

  @grace-snowPosted almost 3 years ago

  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

  @fyrfliPosted almost 3 years ago

  @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

  

  T

  Grace•31,330

  @grace-snowPosted almost 3 years ago

  @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

  @fyrfliPosted almost 3 years ago

  @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

  @fyrfliPosted almost 3 years ago

  @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
• 

  T

  Grace•31,330

  @grace-snowPosted almost 3 years ago

  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

  @fyrfliPosted almost 3 years ago

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

  0