FCC Technical Documenation Page - Feedback wanted

Hello,

I’ve completed 4/5 responsive web project tasks and would like any feedback on the responsiveness of the pages, improvement that could be to make it look better. I would really be interested in hearing other ways I could’ve would have styled the tags i.e. any css properties I’m not using but maybe should be.

The links to my Code Pen are below:

Product Landing Page - https://codepen.io/KingZim/pen/KKKGrJm

Technical Documentation - https://codepen.io/KingZim/pen/mdJeZwa

I can’t link my other projects because new users can only have 2 links, but you can find them by clicking on my CodePen account once you’ve clicked on the other links.

It’s pretty good m8,maybe put a little more emphasis on the code parts and make them stand out a bit. But the documentation is good m8 well done. The product page to me is absolutely flawless ,you’d be pretty good with advertising stuff! :wink:

Thanks Ma3_str0, by putting more emphasis on the coding part do you mean adding comments?

Try using something to add a caption to the code which you could customize on your own with CSS. Here’s an example of what you could do below.

<figure>
        <figcaption class="caption-format">Example of variable declaration and initialization</figcaption>
        <div class="code-snippet">
        <code>
          var
          i,x:integer;
          bTrueOrFalse:boolean;sCram:string;
          begin
          i = 3; bTrueOrFalse = False;sCram = 'Hello World';
          end;
          </code>
</div>
      </figure>

And what I mean with emphasis is making the caption bold,changing the background-color of the snippet,etc, to make the code stand out a bit and easier to read.

Welcome to the forums @shonaboy. Some things to revisit;
product page

  • Your page passes 15/16 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • There are coding errors you need to address.
  • Check that the email field is populated properly when clicking the submit button. Throw an error if it is not.
    • You learned how to do this when you did the survey form.

tech doc

  • Run your HTML code through the W3C validator.
    • There are coding errors you need to address.
  • 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 you could do
code {
  white-space: pre;
}

in CSS and skip the <pre> tag in HTML.

  • You have a duplicate selector for the navbar-links class…lines 146 & 182

Ok thanks for your feedback I’ll look to add emphasis to the code. :slight_smile:

Thanks for the feedback, I’ll look to make changes to my code.

Hey Ma3_str0,

I’ve added a left border to the code, made it bold and added background colour. Thanks for your feedback my page looks a little better now :slight_smile:

1 Like