What bad style (and habits) should i change in my code?

Code Feedback
1

I have just completed the 1st 2 projects on html and css .

just looking for advice from more experimented users about what they don’t like in the code i wrote . (a quick glance would suffice as i have just started in html and css)

first project: https://codepen.io/nzzcoding/pen/XWmKooQ
second project: https://codepen.io/nzzcoding/pen/ZEbBwvw

1 Like
2

Hi nzz.coding,
welcome to the freeCodeCamp forum!

Congratulations on finishing these projects. In my eyes, the thing your projects could benefit most from is support for mobile devices. Like, how the layout looks from 320px width on upwards. There are a couple of ways you can go about that, like media-queries, flexbox, css grid, bootstrap, …

3

For your second project, you have a width on #form-body of 170vh. Do you understand what that is doing? If so, why are you doing that?

4

so if i understood well vh is a fraction relative to the screen size ,that means i augmented the form body to 1.7 the screen size and now that you asked the question i realize that i forced it a little bit , i should just use a percentage .

the thing with vh is that it scaled up and down when resizing the window which i liked , maybe i could have used it on a parent div instead of going over 100 . (will try it now)

thank you for your help

5

thank you for emphasizing that.

just googled that i can test my code for mobile by switching device mode, will need to improve the css .

on another note the layer not fully covering the background image is not very aesthetic , i couldn’t find a simple way to solve the issue .

thank you for your help.

6

You’re welcome. The background comes from a default margin on the <body> element. You can see that with the dev tools: right click > inspect > select the element on screen > right pane of dev tools > ‘layout’ in firefox / ‘computed’ in chrome.

image
image852×716 114 KB

It can be removed with:

body {
  margin: 0;
}

Since there are a bunch of elements that have a default margins and paddings that people don’t like, you will often see this to remove all:

* {
  margin: 0;
  padding: 0;
}

Even beyond that there are multiple “css resets”.

7

You should get in the habit of validating your code.
For your form, run your HTML code through the W3C validator. There are errors you should clean up.
Also, do not use <br> to force line breaks. There are ways to style your checkboxes in CSS they way you want them.

8

I would look at adding some nice font combinations, it would make your page seem smoother and maybe more in tune with the theme you have. Check out google fonts.

9

Ok i tried following some advices when building my 3rd project .
here it is: https://codepen.io/nzzcoding/pen/NWGpdEo

I could have refined it more, using variables to swiftly switch styles but i got a bit discouraged, beware the code is very messy .

some questions: I use flexbox for literally everything , is it good practice ?

how long does it take on average for an expert to design a page like that for various types of devices ?

the organization of my code is bad, it feels forced and hackish trying to change it or adapt it to another device is very hard, do you guys follow templates or general rules for styling ?