Feedback?

[Chetnike]

Hey!

Just started learning HTML and CSS would love some feedback.

P.S (Just started, so please don't have a go @me)​

 

[Suggestied]

Well done, keep it up!

 

[Chetnike]

Well done, keep it up!

Thanks man

 

[Corf]

Looks awesome homie!

 

[Chetnike]

Looks awesome homie!

Thankyou

Just an update: https://gyazo.com/81c6a900cbfe6e689a75c469f268b13e

 

[VidaNova]

Hey Chetnike! I love what you're doing, keep it up!

Now, for code etics, I don't recommend you space things up like you're currently spacing, do something more like:

.navbar ul {
(tab) float: right;
(tab) margin-right: 10px;
}

And try to keep with this code style all around your css file, this will help other future developers understand your code and will help you understand your own code! But ey, you're just learning and did something awesome, keep collecting feedback and improving more and more each day! You got this!

*The (tab) means that you should press tab once.

 

[Chetnike]

Hey Chetnike! I love what you're doing, keep it up!

Now, for code etics, I don't recommend you space things up like you're currently spacing, do something more like:

.navbar ul {
(tab) float: right;
(tab) margin-right: 10px;
}

And try to keep with this code style all around your css file, this will help other future developers understand your code and will help you understand your own code! But ey, you're just learning and did something awesome, keep collecting feedback and improving more and more each day! You got this!

*The (tab) means that you should press tab once.

Thanks for your honesty, will be taking this into consideration

 

[Shaun]

I'm going to comment on the code seeing not a lot of people above have.

For starters, do not import your font family in your CSS. Instead, load in your fonts in the head of your HTML. This is to prevent "flash of unstyled text" or FOUT since your font family will resolve AFTER your HTML has loaded (since CSS files are processed after HTML files by the browser). During the time your font family is loading the text on the browser will appear unstyled.

In your global reset, make sure to include box-sizing: border box;. This makes the behaviour if margin and padding a lot more consistent among all the HTML elements.

Your .logo class makes use of padding and marging for positioning, which is not ideal. Consider using absolute positioning and top/right/left/bottom to position the logo. Padding should be used to add space INSIDE an element whereas margin should be used to add space OUTSIDE and element. To know the difference of when to use padding and margin comes with intuition and experience, for now it's okay to use one for the other purpose just to space things out but conventionally speaking you want to stick with what I mentioned before.

Lastly, float is an old way to do layouts in the browser. The common approach to aligning and positioning items is to use flex-box. The sooner you look into it the easier it'll become for you to build layouts.


That's my two cents.

 

[VidaNova]

I'm going to comment on the code seeing not a lot of people above have.

For starters, do not import your font family in your CSS. Instead, load in your fonts in the head of your HTML. This is to prevent "flash of unstyled text" or FOUT since your font family will resolve AFTER your HTML has loaded (since CSS files are processed after HTML files by the browser). During the time your font family is loading the text on the browser will appear unstyled.

In your global reset, make sure to include box-sizing: border box;. This makes the behaviour if margin and padding a lot more consistent among all the HTML elements.

Your .logo class makes use of padding and marging for positioning, which is not ideal. Consider using absolute positioning and top/right/left/bottom to position the logo. Padding should be used to add space INSIDE an element whereas margin should be used to add space OUTSIDE and element. To know the difference of when to use padding and margin comes with intuition and experience, for now it's okay to use one for the other purpose just to space things out but conventionally speaking you want to stick with what I mentioned before.

Lastly, float is an old way to do layouts in the browser. The common approach to aligning and positioning items is to use flex-box. The sooner you look into it the easier it'll become for you to build layouts.


That's my two cents.

Very very very good advice to take into consideration!

Agreed with every single thing you said, besides the logo.
I do agree with the padding, because it obviously should be used to space things inside an element, but using position absolute in here wouldn't be the ideal.

The ideal play here, would be for you to create a wrapper, that has display flex and contains two divisions, one for the logo and another for the items. This would also have justify-content space-between as you want the logo to be on the left and the items to be on the right. And then, to space your items from the border, use padding on this main division (wrapper).

Do you agree with me Shaun?

Thank you,
Goncalo

 

[Shaun]

Very very very good advice to take into consideration!

Agreed with every single thing you said, besides the logo.
I do agree with the padding, because it obviously should be used to space things inside an element, but using position absolute in here wouldn't be the ideal.

The ideal play here, would be for you to create a wrapper, that has display flex and contains two divisions, one for the logo and another for the items. This would also have justify-content space-between as you want the logo to be on the left and the items to be on the right. And then, to space your items from the border, use padding on this main division (wrapper).

Do you agree with me Shaun?

Thank you,
Goncalo

This approach is also valid.

 

[Benliam12]

Don't know if you have the required stuff for but, uploading your creation on some kind of web hosting could be nice. A screen shot is pretty limiting when it comes to give a feed back because people will see your final product onto a web browser (full screen) and not really on a screen shot.
The style looks nice though, well done!