Please rate my CSS.

[TheSamehMagdy]

Hello there,
I’m learning HTML and CSS. I know a lot of things, but I have a bit of a hard time applying them by myself (it’s mostly positioning that’s giving me a headache).
This is my attempt to copycat Coder Manual’s homepage (I didn’t bother to get the font they’re using): http://s30.postimg.org/dhehsbpwv/Untitled.jpg
And here’s the original website: https://codermanual.com/
I need you to tell me if the code is any good or just dumb (I know it’s not responsive).
Here’s the pen: http://codepen.io/TheSamehMagdy/pen/dorjpQ
It’s all manual coding from scratch..I’ve only included bootstrap at the end because I couldn’t get the button right with CSS.
This simple task took a lot of time and I’m beginning to doubt myself and thinking to try myself in another field like Android development for example.

[bearhead]

My thoughts:

If you’re trying to learn, don’t use bootstrap. Its going to change a lot of default styles, and if you’re not 100% aware of what it does, it can make things much more frustrating than it needs to be.

You’re relying too much on ids. Use classes instead.

What is the purpose of this div: <div id="blue-div"> </div>? Why not just give the body a blue background?

The sign up button should be an actual button, the nav links should be links. I realize you might have left that off just for the demo, but it will impact how you write your css, so you should be using the correct elements.

Generally speaking, the way you’re positioning elements is not effective. You should start by giving your content a max-width.
The logo can be floated left, the navigation can be floated right, and the centered content can be centered simply by giving the parent div text-align:center.

Finally, you’ll need to add hover states for buttons/links and use media queries to get it to look proper on narrower screens.

Here is a forked pen that can be a starting point for you:

http://codepen.io/kvana/pen/OVqGvx

[TheSamehMagdy]

I made that empty div with the background because I was willing to continue copying the original site and would make another white div below it but I didn’t continue.
And yeah I was just trying to get the layout right..because making the list items into links won’t be a problem when working on an actual project.
I wanted to do the max-width and floating, but I couldn’t make the background div and the content div overlap this way.

[TheSamehMagdy]

What does that do by the way?

.header:after{
content: “”;
display: table;
clear: both;
}

[bearhead]

To create the blue/white sections, you can start by wrapping all of the elements you want in the blue area in a div, and give that div the blue background. Then you can just create another div after that one for the white section. I updated my forked pen to include this.

The .header:after selector is being used to clear the floats. Which is important for positioning purposes.

Here is the css article about floats:
https://css-tricks.com/all-about-floats/

[TheSamehMagdy]

Thanks!

[TheSamehMagdy]

I had a good look at your code then tried to write it from scratch.
Here’s the result: http://codepen.io/TheSamehMagdy/pen/KpYyea

[mhodges44]

This is a nit-picky comment, but it seems that nobody else has mentioned it, but a small, attention-to-detail, piece that you missed on your application is giving your “sign up” button a border radius. Also, another piece of small detail is that your “start learning” button has a border around it that is a very bright blue, and the original site does not have that. Obviously you mentioned the font, which is not a huge deal, and others have mentioned hover states on your buttons/links as well as how you have positioned your elements, and I think it can go without saying that your background is not a gradient like the original. Other than those few things, however, not bad.

[suprob]

Its best practice to use classes to style verses ids. Ids are supposed to be unique and are typically used with javascript. Define base styles for your p, ul, li, h1, etc. then add styles case by case. On a side note, make your call to action button a little bigger and maybe a different color for the sake of usability. Other than that, it looks nice!

[HTMLPanda]

Hi I think after completion design is good but some text is not bold which gives a negative impact on design so change your font or bold your text then it look nice and attractive.

[Author]

Posts