dont use that many line breaks Its hard to read
|
Hi guys,
I'd like someone to be kind enough to review my code. I'm not amazing with CSS3. However I can read and understand code, but not the best with using it and implementing it.
I converted a landing page to code so its usable for practice purposes.
It's mainly the CSS file, no need to show the index.html as that is basic. If you still want to see the index, no problem i'll provide it.
Gif preview: https://i.gyazo.com/dae7ae206a9c8113...e5c5e0eaac.mp4
Here is the stylesheet file: https://mega.nz/#!A2RWWI5S!K77N9nusS...pDkQeBZw72VaGI
Again, i would really appreciate it. Please tell me how it could have been coded better and what code I should have used instead so I can learn more.
dont use that many line breaks Its hard to read
Personally, I prefer things in order to relevance or alphabetically ordered.
I agree with the line breaks, to fix that just use a formatter.
Here's one that's pretty good
in terms of functionality, as long as it scales perfectly for mobile-tablet-desktop etc then it's good, but I'm personally not amazing at this so I can't give my input there.
You could learn about media queries, but.. there's lots of frameworks that include responsiveness, some examples: Bootstrap & Skeleton. As for Bootstrap, it comes with a lot of stuff to make everything in your site responsive (buttons, forms, navigation).. the only shit thing is you'd have to overwrite their styling. Skeleton comes with a nice and clean responsive boilerplate which is very easy to implement.
Feedback:
1. Put font family in the body:
As long as you're not using any other CSS framework, elements such as h1, h2 etc. should inherit this.Code:body { font-family: Segoe UI; }
2. Combine selectors
You can reduce the size of the file by combining selectors that use the same property
Code:h1, h2, h3 { font-weight: bold; /* or use 700 */ color: white; }
3. Since you have used the em in letter-spacing, you can use it elsewhere. Setting sizes with the em and rem units make it easier to produce consistent spacing and sizing throughout the document.
I'd recommend using rem units which are based off the root font-size (16px by default). This root font-size can be changed in the html selector:
Then in your heading tags:Code:html { font-size: 100%; /* 16px */ }
Another useful thing with rem is that you can manage responsive typography by changing the root font size at difference break points:Code:h1 { font-size: 4rem; /* around 65 / 16 */ } h2 { font-size: 11.875rem /* 190 / 16 */ }
The above sets the root font size to 90% (14.4px) when the screen is less than 550 pixels wide which will effectively make elements with rem sizes smaller.Code:@media only screen and (max-width: 550px) { html { font-size: 90%; } }
4. Prefixes
Are you certain you need -webkit-transition-duration ? If you're targeting Safari 4 and below, you'll probably need -webkit-border-radius as well. Otherwise you can take it out.
Hope this helps. I do like the design though
« Previous Thread | Next Thread » |
Thread Information |
Users Browsing this ThreadThere are currently 1 users browsing this thread. (0 members and 1 guests) |