Skip to content
OverviewSolutions
33
Comments
18

Mijail Hernandez

@MishaHernandezPiura, Perú950 points

I am a growing programmer but with a lot of motivation to keep learning and creating.

I’m currently learning...

Figma, UX/UI Design, CSS/SCSS (BEM, ITCSS, Atomic CSS), TailwindCSS, PostCSS, JavaScript, NodeJS, Babel, TypeScript, Git.

Latest solutions

View more solutions

Latest comments

  • Mijail Hernandez•950
    @MishaHernandezPosted almost 4 years ago

    Hello Nofar Aviv 👋

    It looks great, congratulations.

    I just have a little remark: in desktop layout the main component has a lot of margin-top and this can produce a scroll bar on some screen sizes. So I would recommend removing margin-top and using flexbox or grid to center it horizontally and vertically.

    body { display: flex; align-items: center; height: 100vh; }

@media (min-witdh: 1200px) {
   container {margin-top: 0; }
}

    I hope this is helpful to you. Happy coding 🙂

    0
  • Mijail Hernandez•950
    @MishaHernandezPosted almost 4 years ago

    Hello TrakaMeitene 👋

    1. Adding javascript in the html is not a good practice, but if the script is very small then there is no problem and rather it turns out to be more efficient.

    2. To change the button you just need to add to the script a constant that gets the button's id and then inside the condition where the button must change color add the styles. For example:

    var x = document.getElementById ("pop");
const btnShare = document.getElementById ("btnShare")
   if (x.style.display === "none") {
     x.style.display = "block";
     btnShare.style.backgroundColor = "hsl(217, 19%, 35%)";
     btnShare.color = "white";
   } else {
     x.style.display = "none";
     btnShare.style.backgroundColor = "hsl(210, 46%, 95%)";
     btnShare.color = "";
   }

    As additional observations:

    • To initialize a variable use const or let instead of var.
    • To add styles from javascript I recommend using classList which gives you more options. [HTML DOM classList Property] (https://www.w3schools.com/jsref/prop_element_classlist.asp)

    I hope I can help you with these recommendations. Happy Coding ✌

    1
  • Mijail Hernandez•950
    @MishaHernandezPosted almost 4 years ago

    Hi TrakaMeitene 👋

    Good job! Looks very similar to the challenge design. There is only small detail, you should rewrite the margin to the body (margin: 0) because this can generate a vertical scroll bar on some desktop screens.

    Greetings and happy coding! 🙂

    1
  • Mijail Hernandez•950
    @MishaHernandezPosted about 4 years ago

    Hello TrakaMeitene. Looks great, good job. 👋

    I would recommend that in your * {...} formatting rules you always use box-sizing: border-box, so that margins and padding do not affect the size of your boxes.

    Always avoid using ID's, especially if your design doesn't use javascript. In similar elements, for example the three icons: file, folder and cloud, you could use pseudoclasses to select each one.

    Sometimes the use of clip-path can be replaced by something simpler like a correctly positioned geometric figure. For example the .sturis element could be a semi-hidden triangle in the pop-up message.

    The font family should be assigned in the body so that all elements inherit it and not have to repeat this property in several rules.

    Greetings, and continue with the challenges 👍

    1
  • Mijail Hernandez•950
    @MishaHernandezPosted about 4 years ago

    Hi Lawrence,

    • The layout looks good, but I recommend using the <header> tag only as a container for the logo, the <main> tag should not have a <header> tag as the parent container, and the social media buttons could go inside a <footer tag >. I recommend checking about the "html5 semantics".
    0
  • Mijail Hernandez•950
    @MishaHernandezPosted about 4 years ago

    Hi Nizamuddin, I recommend:

    • Use the patterns as background images and avoid some complications with the positioning.
    • Check Flexbox and if possible also Grid, this will help you to improve the distribution of the elements within a container.

    Greetings, check the documentation and continue with the challenges :)

    1
View more comments