Skip to content
OverviewSolutions
8
Comments
54

Hamzat Lawal

@EngineerHamzieyNigeria560 points

Junior Frontend Developer Skilss: HTML, CSS, SASS/SCSS, JavaScript, React, Git and GitHub, GitHub markdown.

I’m currently learning...

React

Latest solutions

View more solutions

Latest comments

  • Hamzat Lawal•560
    @EngineerHamziey

    Hello sir, how have you been? please I'll be glad to have your review on my new solution

  • Grace•32,130
    @grace-snow
    What are you most proud of, and what would you do differently next time?

    Glad to have added notes to hopefully help others.

    What challenges did you encounter, and how did you overcome them?

    No challenges.

    What specific areas of your project would you like help with?

    Happy to explain my choices.

    Simple single-card challenge built with scss

    #sass/scss
    2
    Hamzat Lawal•560
    @EngineerHamziey

    Hello ma'am l, how have you been? Kindly help me to checkout my solution here 😊 when you have time. Thanks in advance.

  • Hamzat Lawal•560
    @EngineerHamziey

    😘 Your solution is amazing, I'm just checking it out and remembered a question I have wanted to ask you since a very long time. I have learnt markdown but your markdown skills seems to be on another level 😁. Could you please recommend a markdown tutorial for me? I want to step up to 😊

  • Hamzat Lawal•560
    @EngineerHamziey

    hello Fareem Mohamed you have done a great job here are my suggestions

    • I observed that the left and right part of the desktop version of the page is cut off on a smaller screen add some margin to the left and right (will fix this the page won't disappear to the edge of smaller screen)

    • I observed that you removed the div.attribution, if you will like to include it, you can place in a footer tag to make it accessible(or in order words "avoid accessibility issues")

    • avoid using px as much as possible to avoid responsiveness problem, use units like rem and em for widths, height(you min-height 100vh is cool and is an exception), font-sizes and others.

    • the answer to you questions are in this links below, here is the link to my own solution with alot of explanation in it and here is the code with explation on github

    I strongly hope you find this helpful 😊

    Marked as helpful
  • Hamzat Lawal•560
    @EngineerHamziey

    Hello there you have done a great job, I'll think:

    • the card need some margin-top and bottom because of short screens(in height) like mobile landscape, it almost enter the edge of the browser on landscape.
    • including the word "image" in your image alt attribute is like repetition because screen readers reads it as image already once they notice the img tag and that will make it say image twice.
    • and also images that are only meant for decoration do not need alt attribute, you can just add an empty alt like: alt=""
    • awwwn 😁 you used SCSS you are a hero 😂😂😂 since you using SCSS, you already have the power and you are strong enough to ignore that ugly stressful CSS variables 😆 also you don't need to declare it in the :root. now your code should look like this:
    /* 
and once you declare it up here, it is is global, you can use it anywhere below it
even in your partials(you will just have to import the partials below the variables )
*/
$color-soft-blue: hsl(215, 51%, 70%);
$color-cyan: hsl(178, 100%, 50%);
$color-cyan-with-opacity: hsl(178, 100%, 50%, 0.5);
$color-very-dark-blue-main-bg: hsl(217, 54%, 11%);
$color-very-dark-blue-card-bg: hsl(216, 50%, 16%);
$color-very-dark-blue-line: hsl(215, 32%, 27%);
$color-white: hsl(0, 0%, 100%);
/*notice the way i use/call the variable below
one of the sweetest thing about SCSS variable is that, it doesn't compile to variable in
your CSS it instead replate the variables with the values*/

body {
  min-height: 100vh;
  font-family: "Outfit", sans-serif;
  background-color: var($color-very-dark-blue-main-bg);
  color: var($color-soft-blue);
  padding-inline: 1.5rem;
  display: grid;
  place-items: center;
}

    I hope you found this ver helpful 😊😁 Happy coding 😊😁

  • Hamzat Lawal•560
    @EngineerHamziey

    Hello there ☺️ You have done a great job by completing the challenge and asking question. Here are my suggestions:

    1. Using flexbox for the section was a good idea but instead of height: 100vh;, use min-height: 100vh;, using min height is the best so that it will grow bigger(increase in height) when needed. I.e it will be responsive.
    2. Don't give width to the card use max-width: instead; instead, let it grow wide as needed. 😆 Typing on a mobile phone is like a pain in the next, I'll hopefully add more suggestions in the next few hours when I get to my PC. I hope you found this helpful 😊
View more comments