FCC Mock Website Review

Code Feedback
1

Hello all,

I have reverse engineered the freeCodeCamp welcome page using my knowledge of HTML and CSS so far. The website lacks JS for now since I am learning it. I figured it would be a great test to see if I could make the site without looking at the dev code and giving it my own personalized style :slight_smile:

Love to have some feedback.

Cheers!
freeCodeCamp Welcome Page

3 Likes
2

Just had a quick look, new myself so can’t comment on much, layout looked good to me, there was a few issues with being responsive though. Mainly the Freecodecamp title and a paragraph almost at the bottom. But other than that ok to me :+1:

Screenshot_20200713_204956_com.android.chrome
Screenshot_20200713_204956_com.android.chrome1080×2340 315 KB

Hopefully the screenshot will show what I mean, viewing on my phone for comparison purposes.

Edit: Now works fine so either my phone or you’ve sorted it :+1: good job either way.

3

Nice. How long have you spent learning coding now?

4

Took a quick look; your HTML looks semantic and it is a faithful recreation of the page. By all means, this is nice work!

From an accessibility standpoint: one place where the current FCC homepage falls short is the experience for visually impaired keyboard users. Visually impaired users may have hard time visually figuring out which element they’ve tabbed into (or out of!) if they aren’t using assistive technology. Universally, browser defaults for element focus are pretty bad.

If you want to make a further improvement, you could look into either:

  • mimicking the link hover behavior and copying that over to the focus behavior (lazy, but easy approach)
  • come up with a visually distinct effect for various focus behaviors that provides some sort of visual contrast (WCAG 2.0 standard, as a start) when keyboard users focus an element (like a h1, a link, or a button)

Anyways, great work!

5

About 2 and a half months so far. Learned using FCC and W3Schools. I’m now on JS but having difficulty grasping some ideas. Think I’ll use MDN to help with learning basic concepts. I code about 3 hours every day.

1 Like
6

Keep up the good work!