Skip to content
OverviewSolutions
36
Comments
5

Tjaša Žilavec

@TjasaZilweb590 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...

Vue.js, Javascript and Cypress

Latest solutions

View more solutions

Latest comments

  • Tjaša Žilavec•590
    @TjasaZil

    Hi Mzu Soci,

    good job on the challenge. I remember struggling with it myself when I first tried to solve it. I looked at your code and live site and I have a suggestion that you may take into account.

    At @media (min-width: 600px) you change your wrapper to have max-width: 1100px;. The wrapper is wider than the screen and it looks cut off on screens that are less than 1100px wide. Based on your code I think that the best solution is to change @media (min-width: 600px) and @media (max-width: 600px) to @media (min-width: 1050px) and @media (max-width: 1050px). You can also eliminate the .wrapperclass from the @media (min-width: 1150px) and add width: 1100px; to the .wrapperthat is outside the media queries.

    I hope my writing makes sense. Keep up the good work! Cheers 🥂

    Marked as helpful
  • Tjaša Žilavec•590
    @TjasaZil

    Hi Agil,

    good work on the project. To enhance your code you can put the navbar section outside of the main component and wrap it into <header> tag. You can read more about the tag and why it is used here. I also see that all of your pictures do not have an alt attribute. Some of the alt attributes are empty. It is good practice to describe the picture in the alt attribute, just in case, the user can not see the image (slow connection, broken src or the user uses a screen reader).

    I do not think you need to use any frameworks with this project, as it is pretty simple. Basic HTML, CSS, and a bit of JS are enough. You can redo the challenge once you know some frameworks if you want.

    Otherwise, you are doing great :)

    Cheers! 🥂

  • Tjaša Žilavec•590
    @TjasaZil

    Hi Trezmor. I say that you wrapped your image in a div. try adding a purple background color to the div around the image. This should put a purple color above the picture. You will probably have to adjust the opacity of the background.

    I hope that helps :)

  • Tjaša Žilavec•590
    @TjasaZil

    Hi EviTee!

    Good job on your solution!🥂 I see that you did not link your CSS and HTML files properly. Try href="styles.css" instead of href="../styles.css" in your link tag and this should solve the issue. Also, try and use <h1> instead of <h2> since this is the main/only heading. You can style it accordingly with CSS.

    Other than that I have skimmed your code and it looks nice. 👌

    I hope this comment will be helpful to you.

  • Tjaša Žilavec•590
    @TjasaZil

    Hi Gamajunior!

    Good job on your design! I have a few suggestions for you to consider, that will make your solution closer to the design.

    Here are some of the CSS changes that you can implement:

    • You can change height: 400px; in the body tag to height: 100%. After that, you can add:
    position: absolute;
top: 50%;
transform: translate(0, -50%);

    this will center your card on all devices.

    • You can style your button with border: none; to get rid of the border around it and make it look closer to the solution.

    Some HTML changes:

    • The <div class="Card" > around your image is not necessary for this project, so you can delete it.
    • Instead of using <br> in your <p> tag it is better practice to style the text with CSS. Try adding width:270px; to .Content and deleting <br> from HTML. It will give you the same result.
    • Look into semantic HTML. Using tags like <main>, <header>, <footer>... makes the site more accessible and most of the time also easier to style. Try to use <div> only when necessary.

    Hope it makes sense, you can have a look at my solution for this challenge to have an idea.

    Marked as helpful