Skip to content
OverviewSolutions
38
Comments
7
Tomas Scerbak
@TomasScerbak

All comments

  • Tomas Scerbak•720
    @TomasScerbakPosted over 2 years ago

    Hi @Eleanor-hn,

    let's start with HTML issues:

    1

    <center></center> tag is depracated HTML tag You can read more about this here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

    You can use <div></div> tag instead

    2 Your HTML should always be structured with semantic tags so that browser can better read structure of your webpage:

    <header></header> <nav></nav> <main></main> <section></section> <footer></footer> In this particular case you only need <main></main> tag for main content which is card and you can also use <footer></footer> tag and move there your attribution <footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Eleanor Worthington</a>. </div> </footer>

    you can find more info here: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

    3 your webpage should contain heading tags. You can replace p tag with h1 tag for "Improve your front-end skills by building projects" sentence and give the h1 element specific font -size.

    4

    <figcaption> tag should be used on images with description. You can replace this with div as well and give it class

    5 never use inline styles to style your website. It's very bad practice. You should only apply styles in your css files.

    From the CSS

    your card is not visible on mobile devices. You should use mobile first approach. Try to avoid using specific widths and heights.

    you should be able to fix your card position by:

    #bodywrapper { height: 100vh; display: flex; justify-content: center; align-items: center background-color: hsl(212, 45%, 89%); }

    if FLEX is something new to you, I highly recommend learning it as well as GRID as these two properties are most crucial when it comes to webpage layout.

    Keep up the good work and have fun! :)

    Marked as helpful
    0
  • Tomas Scerbak•720
    @TomasScerbakPosted almost 3 years ago

    Hi Ruan,

    you have missed semicolon on line 19 in your CSS file. Also line 54 has z-index property with no value.

    Regarding attribution: if you want your attribution to be displayed move this code to CSS file.

    <footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">RuanCs</a>. </div> </footer>
    Marked as helpful
    0
  • Tomas Scerbak•720
    @TomasScerbakPosted almost 3 years ago

    Hi,

    if you want your card to be in the middle of the screen apply height: 100vh on .container class

    1
  • Vueko•160
    @Vueko1Submitted about 3 years ago

    How do I make those lines at the top of each item ? Also is there any way to make line break after word "points" so that it isnt so long ?

    Four cards challenge using grid

    3
    Tomas Scerbak•720
    @TomasScerbakPosted about 3 years ago

    Hi Vueko, I used

    inline-size - 50rem;

    to shorten the line and make it break

    0
  • Tomas Scerbak•720
    @TomasScerbakPosted about 3 years ago

    Hi @cmendez20,

    my approach was to give my main card background color and used mix-blend-mode: overlay; for img.

    sass --color-card-background: hsl(244, 38%, 16%);

    .card background: var(--color-card-background);

    .card-image { width: 100%; mix-blend-mode: overlay; object-fit: cover;

    0
  • Tomas Scerbak•720
    @TomasScerbakPosted about 3 years ago

    Just finished "Huddle Landing Page", any suggestions for improvment would be appriecieted.

    0
  • Tomas Scerbak•720
    @TomasScerbakPosted about 3 years ago

    Hi Ahmed, nice work. I'd like to ask, how did you change color of the picuture? I took this challange yesterday and I was unable to change the color with any css property. Thanks.

    0