Skip to content
OverviewSolutions
20
Comments
42

Suraj Raju Hadage

@SurajHadagePUNE, India670 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Front-end web development

Latest solutions

View more solutions

Latest comments

  • Suraj Raju Hadage•670
    @SurajHadage

    A better website designing start with structure. Break your elements such way they are more accessible and manageable. What i meant is, think about above example.

    '''

    <main> <picture></picture> <article></arrticle> </main> '''

    Now you can use flex.

    As a beginner '<picture>' tag may be new to you.

    But i highly recommend you to learn about here

    With the help of picture tag you can insert two images with media query without any CSS

    Marked as helpful
  • Suraj Raju Hadage•670
    @SurajHadage

    Okay! your design look pretty cool but here is what can you do to improve it. Use <!DOCTYPE html> at top of your document. You can make all the design inside <main> tag. And take tow <div>. Always use <h1> tag. Here for you have used 815gb of 1000gb. For icons you have used <a> tag, images inside <a> tag is not accessible, try to use only text inside <a>. For more accessibility and ease to make that range one thing you can do with that range illustration is

          <div class="bar-container">
        <input type="range" class="range" min="0" max="1000" value="1000" disabled>
      </div>

    And

    .bar-container {
    height: 20px;
    width: 100%;
    margin-top: 20px;
    background-color: var(--Very-Dark-Blue);
    border-radius: 10px;
    overflow: hidden;
    padding: 2px;
}
.range {
    -webkit-appearance: none;
    appearance: none;
    width: 81.5%;
    height: 90%;
    border-radius: 10px;
    background-image: linear-gradient(90deg,hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    outline: none;
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
}
.range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
}

    That's it from me. Happy coding.

    Marked as helpful
  • Suraj Raju Hadage•670
    @SurajHadage

    To make color lines on each card you are using pseudo elements. I will recommend to use border-top property:

     .card--green {
    border-top: 2px solid green;
}

    I will suggest to not wrap <header> inside <main>.

  • Suraj Raju Hadage•670
    @SurajHadage

    I have suggestion to reduce your HTML code and make it more Semantic.

    • Wrap your card inside <main> tag.
    • Take a <figure> tag to wrap the <img> tag. use
      img {
    width: 100%;
    height: 100%;
}
    • Then for heading <h1> and <p> for other text.
    • If you want make a design with not even flex and grid you can make it.
    • To center the <main> Use :
    main {
  position: absolute;
  top: 50%;
  left: 50%
  transform: translate(-50%. -50%);
}
    Marked as helpful
  • Suraj Raju Hadage•670
    @SurajHadage

    I would suggest to reduce font-size of <h1> and padding of other elements when screen becomes smaller.

  • Suraj Raju Hadage•670
    @SurajHadage
    • Use <main> tag for your design because this is main content of your webpage and not a section.
    • Always use <h1> tag for every webpage and I can see in your code.
    • To shorten your HTML you can do :
      <main>
    <figure><img></figure>
    <h1></h1>
    <p></p>
  </main>
    • You can center this with position absolute or display flex method.
    • Make sure to give padding to parent element (main) instead setting margins to every child element.
    • Use Paint app to know dimensions of your design.
    • You are using max-width: 1440px to <body>. Your <main> element will not be in center when width exceeds 1440px.
    • I would suggest to not upload unnecessary files and folders to save server space.
    • Give some @media query for smaller devices like galaxy fold.
View more comments