Thread: Review My Code

Results 1 to 9 of 9
  1. #1 Review My Code 
    Member

    Join Date
    Nov 2011
    Posts
    2,436
    Thanks given
    571
    Thanks received
    485
    Rep Power
    0
    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.
    Reply With Quote  
     

  2. #2  
    Unfortunately we’re all human. Except me


    Join Date
    Aug 2011
    Posts
    926
    Thanks given
    539
    Thanks received
    439
    Rep Power
    601
    dont use that many line breaks Its hard to read
    Reply With Quote  
     

  3. Thankful user:


  4. #3  
    Donator
    Syber's Avatar
    Join Date
    Dec 2014
    Posts
    21
    Thanks given
    19
    Thanks received
    28
    Rep Power
    43
    Looks ok. But please consider keeping a clean structure.
    Spoiler for Beautiful:

    Code:
    body {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .nav {
        text-align: right;
        margin: -90px 150px 0 0;
    }
    h1 {
        font-family: Segoe UI;
        font-weight: bold;
        font-size: 65px;
        color: white;
        opacity: 0.8;
        margin-left: 130px;
    }
    ul {
        list-style-type: none;
        position: relative;
    }
    li {
        padding: 40px;
        display: inline;
        color: white;
        font-size: 11px;
        list-style-type: none;
        font-family: Segoe UI semibold;
        letter-spacing: 0.3em
    }
    a {
        text-decoration: none;
        color: white;
        -webkit-transition-duration: 0.4s;
        /* Safari */
    }
    a:hover {
        color: red;
    }
    h2 {
        text-align: center;
        font-family: Segoe UI;
        font-weight: bold;
        color: white;
        font-size: 190px;
        letter-spacing: 0.5em;
        margin-top: 35px;
        opacity: 0.8;
    }
    h3 {
        text-align: center;
        font-family: Segoe UI;
        font-weight: bold;
        color: white;
        font-size: 190px;
        letter-spacing: 0.5em;
        margin-top: -260px;
        opacity: 0.8;
        margin-left: 300px;
    }
    .button {
        margin-top: -140px;
        background-color: black;
        padding: 5px 10px;
        border-radius: 60px;
        opacity: 0.58;
        width: 200px;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
    }
    .button:hover {
        background-color: red;
    }
    .button p {
        text-align: center;
        color: white;
        font-family: Segoe UI semibold;
        letter-spacing: 0.2em;
        font-size: 12px;
    }
    Attached image
    Reply With Quote  
     

  5. #4  
    Member

    Join Date
    Nov 2011
    Posts
    2,436
    Thanks given
    571
    Thanks received
    485
    Rep Power
    0
    Quote Originally Posted by Syber View Post
    Looks ok. But please consider keeping a clean structure.
    Spoiler for Beautiful:

    Code:
    body {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .nav {
        text-align: right;
        margin: -90px 150px 0 0;
    }
    h1 {
        font-family: Segoe UI;
        font-weight: bold;
        font-size: 65px;
        color: white;
        opacity: 0.8;
        margin-left: 130px;
    }
    ul {
        list-style-type: none;
        position: relative;
    }
    li {
        padding: 40px;
        display: inline;
        color: white;
        font-size: 11px;
        list-style-type: none;
        font-family: Segoe UI semibold;
        letter-spacing: 0.3em
    }
    a {
        text-decoration: none;
        color: white;
        -webkit-transition-duration: 0.4s;
        /* Safari */
    }
    a:hover {
        color: red;
    }
    h2 {
        text-align: center;
        font-family: Segoe UI;
        font-weight: bold;
        color: white;
        font-size: 190px;
        letter-spacing: 0.5em;
        margin-top: 35px;
        opacity: 0.8;
    }
    h3 {
        text-align: center;
        font-family: Segoe UI;
        font-weight: bold;
        color: white;
        font-size: 190px;
        letter-spacing: 0.5em;
        margin-top: -260px;
        opacity: 0.8;
        margin-left: 300px;
    }
    .button {
        margin-top: -140px;
        background-color: black;
        padding: 5px 10px;
        border-radius: 60px;
        opacity: 0.58;
        width: 200px;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
    }
    .button:hover {
        background-color: red;
    }
    .button p {
        text-align: center;
        color: white;
        font-family: Segoe UI semibold;
        letter-spacing: 0.2em;
        font-size: 12px;
    }

    Will do, thank you
    Reply With Quote  
     

  6. #5  
    Registered Member
    Project's Avatar
    Join Date
    Dec 2010
    Posts
    2,669
    Thanks given
    1,043
    Thanks received
    820
    Rep Power
    1101
    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.
    Reply With Quote  
     

  7. Thankful user:


  8. #6  
    Member

    Join Date
    Nov 2011
    Posts
    2,436
    Thanks given
    571
    Thanks received
    485
    Rep Power
    0
    Quote Originally Posted by Project View Post
    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.
    I appreciate that link, i didn't code it to be responsive yet, still gonna learn more about media queries to do that.
    Reply With Quote  
     

  9. #7  
    (Official) Thanksgiver

    Arham's Avatar
    Join Date
    Jan 2013
    Age
    23
    Posts
    3,415
    Thanks given
    7,254
    Thanks received
    1,938
    Rep Power
    3905
    Pastebin for lazies XP: https://pastebin.com/55mYnizv
    Attached image
    Attached image
    Quote Originally Posted by MrClassic View Post
    Arham is the official thanker!
    List of my work here!
    Reply With Quote  
     

  10. Thankful user:


  11. #8  
    hopeless grinder
    peer1k's Avatar
    Join Date
    Aug 2014
    Posts
    227
    Thanks given
    110
    Thanks received
    60
    Rep Power
    53
    Quote Originally Posted by Mister Slyther View Post
    I appreciate that link, i didn't code it to be responsive yet, still gonna learn more about media queries to do that.
    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.
    Reply With Quote  
     

  12. Thankful user:


  13. #9  
    Registered Member
    Join Date
    Mar 2017
    Posts
    1
    Thanks given
    0
    Thanks received
    0
    Rep Power
    0
    Feedback:

    1. Put font family in the body:

    Code:
    body {
        font-family: Segoe UI;
    }
    As long as you're not using any other CSS framework, elements such as h1, h2 etc. should inherit this.

    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:

    Code:
    html {
        font-size: 100%; /* 16px */
    }
    Then in your heading tags:

    Code:
    h1 {
        font-size: 4rem; /* around 65 / 16 */
    }
    h2 {
        font-size: 11.875rem /* 190 / 16 */
    }
    Another useful thing with rem is that you can manage responsive typography by changing the root font size at difference break points:

    Code:
    @media only screen and (max-width: 550px) {
        html {
            font-size: 90%;
        }
    }
    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.

    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
    Reply With Quote  
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Similar Threads

  1. Could anyone review my hwk [SO FAR]
    By Dave in forum Homework
    Replies: 9
    Last Post: 06-05-2009, 05:00 PM
  2. What's wrong with my code
    By Oxygen in forum Help
    Replies: 18
    Last Post: 05-26-2009, 07:18 PM
  3. What is wrong with my code?
    By Simon in forum Application Development
    Replies: 5
    Last Post: 04-18-2009, 10:56 PM
  4. Replies: 2
    Last Post: 11-01-2008, 04:09 AM
  5. All my code....
    By Evan in forum Application Development
    Replies: 4
    Last Post: 10-30-2008, 04:46 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •