Technical Documentation Page (UX)

{% codepen %}


I am excited to almost be done with the first section. I designed this tech documentation page, and as with the other I did not wish to copy the examples provided, so I adapted them to my own ideas.

But with this one, they seem to desire the same inputs as they have given on their example.

I added code to match their requirement, but cannot seem to understand how to meet the outstanding requirements.

Any assistance regarding this and design as well as my code quality would be appreciated!

Ruan Moolman

Nice job, but a bit monochrome. Add some more color.
You picked an awesome font!

I really like your page!
Perhaps, make some of the text bold so important things can stand out.

@Ruanmool, this may help…

  • Not sure if you noticed but you’re using the <b> tag but the text on your page doesn’t render as such. This is because when you imported your font you only selected regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700). Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.

I think I’ve mentioned this to you in some of your other requests for feedback…

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’

Looking good! :smiley:
Maybe add some smooth scrolling to it? It’s easy in CSS, just add this property to your html, body thing:

scroll-behavior: smooth;

Actually, you could put that right in the CSS. But, remember to move your <meta name="viewport" content="width=device-width, initial-scale=1"> CodePen’s box for head stuff. Also, to improve iPhone X things when the device is landscape, you could even use this:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Links get cut off on smaller screens:
Note that there’s no scrollbar there.

The “What makes a Good Mobile Site?” link is broken.

What’s all that empty space doing there?

In CSS it would be an @import statement. I was going by what he was doing/using without adding anything confusing. As he learns more he can look up the differences between linking a font vs importing a font.

But, when I looked I saw an @import…???

  @import url('');

Holy crap! I didn’t even notice that he had used internal styling. :flushed:

So yeah, don’t use internal styling and either link it in <head> as I mentioned or do all your styling with external CSS.

When I import fonts, I always put it in the CSS. Just my habit.

When I start a new project, at some point while I’m writing my CSS this will appear:

@import url("");


I’ve read two schools of thought on linking a font vs importing a font. For the small things we do here in FCC I don’t think it matters too much.
Here’s a good read;

(Btw, I like the few spirited discussions we’ve had here @Steffan153…you keep me on my toes)

1 Like

Phew, I need to stop that @import then. Maybe I do it because I’m lazy. I think it’s because I like to keep all my font stuff in the CSS, it just makes sense to me. Import it there, use it there.

1 Like

I always did the @import thing…only recently started with link but don’t notice a diff. Made sense to me to import also for the same reason.
In the end, it’ll all be dependent on however your shop uses it.

1 Like

Thank you so much. I’ll check it out. I’ll move them to the head.