I just upload it on the FCC Challenge, apparently went through (it got the check it in the /learn tab). I believe that as long as you meet the User Stories it should work.
From that you can spin it how you like it. I did like this to play a bit with flexboxes and responsive layout.
Yes, just change the existing break points from px to em. Setting your breakpoints in em will automatically make them responsive to both changes in the browser width and font size changes. You get two for the price of one.
Not sure if it was just my scrolling/loading before or not, but it looks like you now have a black background below the title area, which looks much cleaner than it did before, also allows faster and easier reading which means I noticed something…MJ attended UNC-CH or University of North Carolina at Chapel Hill (you do not have to include the at Chapel Hill as that is the main campus and is referred to as UNC ) to my knowledge there is no North Carolina College .
Looks real good. Isn’t that nice, now your page is automatically responsive no matter what the view port width or text size.
A few other issues:
Don’t use ‘vw’ (of ‘vh’) for font size. Doing this makes the size of the text solely dependent upon the view port dimensions. It takes away the ability of the user to control the text size.
I think your heading levels could be fixed up a little. All of those h4’s should probably be h2’s. The current h2 and h3 should not be headings at all, or you could add “The greatest to ever play the game” to the h1.
The alt text for the four images at the bottom is the same for every image. I’m guessing you just forgot to customize them.
The blue link at the bottom is too hard to read on the black text, it definitely needs to be a lighter color. You can check color contrast accessibility at https://webaim.org/resources/contrastchecker/
That link is also not quite as descriptive as it could be. Maybe change the sentence to something like
"Visit <a>Michael Jordan's Wikipedia page</a> to learn more about his career.
I agree with those. Regarding the headings I was making the mistake of using the headings tag to also give bigger font-sizes, which I’ve read is a mistake, since headings have a purpose. I’ve created class to them instead and left only h1 and h2.
For the responsive text I found a solution that mixed em + vw, so you can set a minimum for the text size and still make it variable with the vw size. I believe it worked.
Thank you for the welcome. Since is my first project I missed out on the script to test the code. Now runs 10/10.
I’ve also checked the bugs in W3C, fixed them all. Just in the CSS it shows me some Parse error, but I believe is from copying to Codepen. Is that right?
Changed the link, it wasn’t acessible, also included some :hover and etc, to make it even more accesible.
One final question, I’ve already upload the codepen link (which is still the same) into the FCC, should I redo it? Or is gonna work fine?
this is what I was originally asking you about @victor.zamith with the testing …
@Roma where in our code should the test script be placed? I have not tested my projected yet with the script…I have run it through W3C validator and it passes, however FF accessibility does not like my text/background contrast so I am working on that currently
If using codepen the script element can be the first line in the HTML section.
If you’re coding elsewhere that requires you to create the HTML boilerplate then the test script (being JS) would go right before the closing body tag.
I checked out your project, once again, Super Job!
My recommendations are purely visual in nature.
First, I would change “kid” to “child” it just sounds better
Also, I would switch:
“What grade is he/she in” → “What is the last grade completed by your child” (Since it is Summer Break, the child is not really in a grade, but between them.)
“Did your kid went in last year’s summer camp?” → “Did your child attend last year’s summer camp?”
I know that these are not “coding” fixes per say; however, if you are going to use them as part of your portfolio, then it will more accurately display your true talent and skill.