Feedback-FCC Front End Project 4- Technical Documentation page

Code Feedback
1

Hello fellow Campers,

Here is my attempt on the 4th project-Technical Documentation page
It’s quite a simple one, but it took time, because I couldn’t get the responsiveness perfect. Also, there was a lot of content that I needed to type in(Typing all this in a day or two still seems impossible to me.)
Kindly provide your constructive feedback, so that I can improve on my skill and make myself skilled enough to be able to contribute to this wonderful community
Thank you so much :slight_smile:

Link to Codepen: https://codepen.io/sambarvadai/pen/BajERPq

1 Like
2

Hi @anicsekaran!

I enjoyed the color you used on your page!

Nice job!

But your page got very deformed on my PC screen when @media was activated.

Adding this code on your @media solved the problem:

	main{
		top: 40%;
		left: 0px;
	}

And I think the max-width that you used on your @media was a little big, I think 600px is a good value, just an opinion :grin:

Edit:
And your text is going through the edge of the page.

3

Thank you so much for the feedback :slight_smile:
Seems slightly weird, as I developed this on VS Code and tested on Chrome before I put this on codepen.

Can you put up a screenshot here, so that I can see the problem as well?

And for the media query, yes, I’ll work on it. Possibly a lazy attempt from me at making it responsivr, but yes, Ill try to fix it.

Thank you so much for taking out your time to review this :slight_smile:

4

Hi @anicsekaran!

Sure! Here is the screenshot:

image
image1366×625 49.2 KB

I am using the MS Edge browser, so maybe this could have caused the problem…

But any way, if you need anything else, just ask :facepunch: :facepunch:

5

Is this the old edge or the chromium version, if you dont mind me asking.

6

I looked here and is the Chromium version.

Version: 84.0.522.40

64bits

image
image718×286 16.9 KB

And sorry about the image be in Portuguese language :sweat_smile:

7

Thank you for this info.
I’ll check why the rendering on Chromium edge is like this.
I tested it on my other system. And also tested it on my iPad. Looked alright.

Will deep dive into this issue. Thank you for your feedback, Julio :smiley:

1 Like
8

Hey Anirudh,

great job, I like it! :clap:

My ideas:

  • your use of spacing is very good; I would even add a little bit more spacing above the section headings (e.g. Pre Requisites or Printing Hello World ) to give the user a better visual break
  • I can reproduce what Julio said on Chromium 84.0.4147.105 and Firefox 80.0b1

Keep us posted!

9

@miku86 @julio-pinheirooCan you guys tell me the steps to reproduce this error? I am not able to do so, but I see that there is a problem with the page.

10

Hey there,

I created a video of it:

1 Like
11

Thank you so much for this :slight_smile:
I’ll try to see where is it that I went wrong, and fix it accordingly.

12

Your page looks good @anicsekaran. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • Mentioning because you have elements out of order. The links to the stylesheet and fonts belong in the head element. The link to the fcc test script belongs right before the closing body tag. Everything the browser renders belongs in the body element. So that last div element belongs in the body.
  • When cleaned up, run your HTML code through the W3C validator.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
1 Like
13

Sorry @anicsekaran! I didn’t saw that you marked me on this topic. :cry:

But I think the video that was made by @miku86 couldn’t be better, it shows perfectly the problem and the solution that I proposed.

14

Hello @julio-pinheiroo and @miku86 : Thank you for your feedback :slight_smile:
I’ve tried improving the responsiveness of the page, and found out a couple more flaws, which I have corrected.

Thank you so much for your inputs :slight_smile:

2 Likes