First challenge done, maybe?

Hi everyone,
Just found freeCodeCamp a couple of days ago and it looks like a great site and community for helping me get better at building webpages. I’ve been doing that for a long time, but more as a “hacker” than as a “developer” and that’s where I’d like to go.

Anyway here is my first challenge page and I’d love to hear some feedback!

Alan Turing Tribute

Thanks!

George

3 Likes

pretty nice, but remember that in the projectthat you submit you need to have the test suite included

Thanks! And I didn’t realize that so I’ll add it back in, thanks!

image

so for the next ones you will remember it!

1 Like

I will!

Is it better if I use Codepen to submit projects?

-George

I like the terminal theme! But the text is to small for mobile devices.

1 Like

Hey, nice job on your first project, just a few suggestions:

  • Was it your intent to have his name at the top line wrap in the middle of his last name? As I narrow my browser the last letters of his last name shift down to a second line. You might want to keep his last name all on the same line.
  • You need at least an h1 heading at the top of the page, and that should most likely be his name.
  • Don’t use <br> to create vertical space. Use CSS margin/padding instead.
  • You have a header and footer section but you don’t have a main. Change div#main to <main>
  • The image needs to have alt text.
  • The green used for the dates does not quite have enough color contrast with the black background to be accessible. Use this page to test color accessibility:
    https://webaim.org/resources/contrastchecker/
  • The embedded video can get pretty tiny as I narrow my browser.
1 Like

Thanks! I have been experimenting with different screens, but will have to keeping fiddling with text sizes!

Thank you for the detailed feedback – I really appreciate it!

  • As for the first point – I liked the idea of wrapping the name on smaller screens, but have been having a hard time controlling how much wraps and where it goes. My overall intent was to have Turing’s name displayed so that each letter was centered in its own box – like a “Turing machine” tape. I thought using a grid for the title would work for that, but I am open to a better suggestion on how to do it.
  • I see the need for an <h1> tag at the beginning, but would like to be able to style it as mentioned above.
  • I’ll avoid the <br> tag from now on and fix the accessibility issues too!
  • As for sizes of text and boxes, I am still trying to figure out when I need to use @media rules and when I can rely on browsers automatically shrinking things down in the right way.

George

great job,

i like the “hacker” point of view. is that somekind of learning how to build mock page after you hacked them. lol

Thanks!

More like hacking my way through a jungle of code with a blunt instrument, NOT in the bad-guy meaning of breaking into other people’s stuff!

From the FAQ:

Do I have to use CodePen for the front end projects?

As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

You can use GitHub pages or surge.sh as alternatives to CodePen.

Welcome back everyone!
Made some fixes…
And here is the url for the code.

And the actual project’s page to save you the scroll up:
https://gwmatthews.github.io/freeCodeCamp-challenges/responsive-web/01-tribute/

thanks,
George