Technical Reference Project

Code Feedback
1

Hello!
I just completed this challenge and I must say, I’m quite satisfied with the result. I started this journey recently, and I’m already quite grown up, I don’t know where I’m going. I focus on Python and HTML/ CSS for now.
This is the first challenge in which I feel I have fulfilled the user requests with lucidity and concision. I think that’s the point of these challenges, not to obtain a super pleasant page but just a working page that satisfies the functionalities expected. As it is, the curriculum on Freecodecamp focuses a lot on CSS advanced topics (flexbox, etc.), and I don’t think it’s even possible to absorb that amount of theory before starting to create some working examples… Luckily, these concepts are not asked for the final projects. In the previous projects, I worked a bit automatically and I realized how that attitude is completely useless to build some skills. The result also was very poor (the worst of all was the product page). So I went through another HTML tutorial and now I feel my knowledge stands on a firmer basis. I had just a little help from my friend W3Schools to design the sidebar… This is my work, comments and general advice are welcome!
Python Intro

1 Like
2

Good work @teorems,

I don’t know why you still have one error. It seems to me that you completed all the tasks. How about collapsing the navbar when it hits a mobile, and making it a menu instead?

1 Like
3

Thank you. I don’t have errors, just needed some feedback.
I thought about making the navbar collapsing, but I’m lacking the know how.

1 Like
4

Look really good. Yeap, I don’t see the error now.

You could use media query to collapse the navbar diplaying it as none when it hits the mobile version. It could be 600px, just like you have there.

You could create the same navbar using divs being displayed block when you hit the 600px, and none when it’s bigger.

@media (max-width: 600px)  { 
#navbar {
 display: none
 }
}

And for another menu to be on top

@media (min-width: 601px)  { 
#secondNavbar {
 display: none;
 }
}

@media (max-width: 601px)  { 
#secondNavbar {
 display: block;
 }
}

Of course, if you use the grid system and create grid areas, you wouldn’t have to create two menus; you could easily move them wherever you want in the viewport.

1 Like
5

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

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you should address. They’re minor and easy to correct. HTML entities usually start with an ampersand and end with a semicolon. For instance you have &quot and it should be "
    • The warnings are informative. If you choose to implement them go ahead but it’s not necessary. It’s about making your page more semantic.

In HTML you have a style element to import your font. You can remove the element tags and just put the import as the first thing in CSS.

1 Like
6

Thanks for the feedback. I was not double checking these things as the starting codepen template is not “orthodox” but it is working at least on the platform(missing doctype, html, head tags etc.) I corrected the escaped symbols (didn’t get the semicolons!) and i put the @import element on top of the CSS code ( by the way does it make any difference?).

7

No, it doesn’t make a difference but since everything you’d put in the style elements was in the CSS section I just thought you should so the same with the import. Looks cleaner.

Yeah, codepen provides the boilerplate template for you. You can read about it in their official documentation. Also, if you want you can export your pen and then you’d see all those elements that codepen adds behind the scenes.