Could I please get some feedback on my projects?

Code Feedback
1

Apologies I think I should have submitted these one at a time but would it please be possible to get some feedback on my responsive web design projects and portfolio?

I have put them all up on the web as I didn’t like code pen, but I might go back and try codepen again someday now I have learned a bit more:

http://www.mutantalien.com/

2

A few accessibility issues on the portfolio page:

  • I can’t see where the keyboard focus is. Use the CSS outline property to make it much more pronounced. I should be able to look at the page and know exactly where my keyboard focus is currently set.
  • There is not enough color contrast between the color of the links at the top and the background. Use https://webaim.org/resources/contrastchecker/ to check for accessible contrast.
  • You want one h1 heading near the top of the page and then the rest should descend by one step at a time. So you can’t have an h4 at the top of the page followed by an h1. Put the h1 and the very top and then it should be followed by h2s, and those h2s followed by h3, etc…
  • When I narrow the browser width everything responds nicely, but if I increase the text size things start to get a little messy. Responsiveness is about both width and text size. Make sure that your page can handle big changes in text size gracefully (at any width).
3

Thank you for taking the time to review my pages.

I will try and make the changes you suggest. I think I should have submitted my pages for review one at a time. Have you looked at the other pages as well, or is what you found looking at the portfolio page so far?

I think with what you suggest I can find similar problems in my other pages - I’ll will work at this for now.

4

Pages looks good @tangent-man. Some things to revisit;
survey form

  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button

product landing

  • Again, don’t use <br> to force line breaks.
    • Nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks.
      Or skip the <pre> tag and do the following in CSS;
code {
  white-space: pre-line;
}

In response to your note. The test script is JavaScript. So it won’t work in a CSS stylesheet.

tech doc

  • Same note as above re: don’t use the <br> element to force line breaks or spacing
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.

portfolio

  • When clicking a project they should open in a new tab
  • Again with the <br>
  • I don’t normally comment on someone’s design because it is their’s.
    • Years ago there was a HTML element called blink. It’s no longer around because it was incredibly annoying.
5

Thanks for taking the time to review my Code :+1:

I can see I have a lot to do…

6

Dear friend, thanks for submitting your work for review.

Quick fix: On your product page, there is a contrast issue with black text on blue background. Contrast is one of those critical things you have to be careful with, otherwise visitors won’t be able to read your content.

7

Thank you for your input :slight_smile:

8

I have a question: Why is it wrong to use <br> for code? When I use: white-space: pre; as you suggested it means I can’t resize the page without the design breaking?

I would have thought if it was OK to use <br> for a poem is it not OK to use it for code?

Is it considered bad practice?

9

The link you provided no longer links to your code so I can’t do much without guessing. I’m not going to guess.

I do know that using br can be problematic for those using screen readers but I’m a little fuzzy on the specifics. If you don’t have to use them then you shouldn’t.

As an aside, I can wrap a poem in a p element and use white-space: pre-line;

10

Apologies I meant to link to the page:

product landing page

11

I see,

white-space: pre-line;

Fixes the issue :+1:

1 Like
12

Glad to hear you’ve got it worked out.
Btw, that link doesn’t go anywhere.

Edit: I fixed your link so it works. When you add a link into markdown it goes like this;
[text the user clicks on](http link to take them there)

13

Thanks Roma that’s awesome :+1: