Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions8Comments55

All comments

  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello everyone! 👋

    I finished my first guru challenge! It felt amazing to complete this challenge at the end of 2022.

    I learned a lot of things when building this project. I wrote everything that I had learned in README. There are eight things that I learned. I hope it can help developers to do this challenge.

    If you notice there is something wrong or things that can be improved, please do let me know. I am happy to fix or improve the README so that it can be helpful for developers.

    Grace Snow answered all my questions in Slack so I do not have any questions. Thank you, Grace! 😊

    Any suggestions for improvements are welcome. Also, you can ask me any questions about the technique that I used.

    If you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    Responsive Designo Multi-Page Website with Grid and Flexbox

    #accessibility#bem#lighthouse#progressive-enhancement#sass/scss

    2

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

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

    0
  • P
    Grace• 27,950

    @grace-snow

    Submitted

    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• 580

    @EngineerHamziey

    Posted

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

    0
  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello Everyone! 👋

    I finally completed another challenge! 🎉

    In this challenge, I completed the challenge by using fluid space and fluid typography which by using clamp() functions a lot. I also used CSS logical properties.

    Any questions on the technique that I'm using are welcome! Of course, any suggestions on how I can improve are welcome! 😁

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    Officelite Coming Soon Site | Fluid Space and Fluid Typography

    #accessibility#lighthouse#sass/scss#bem

    3

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    😘 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 😊

    1
  • Fareem Mohamed• 90

    @faryyym

    Submitted

    Keeping the image from resizing depending on the resolution was a pain. I think it has something to do with using <picture> tags instead of maybe an <img> or a <div> with background-image property.

    I could not make both the image and the content area be responsive. The overlay of the image was achieved by ::before pseudo element and when flex-direction: row-reverse was applied to the card for desktop version, the pseudo had a fixed width of sorts and the image was resizing. Managed to do it by setting a min-width on picture selector but I dont think this is the way.

    Using `picture` tag to change image between screen sizes

    1

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    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

    1
  • Prabu• 150

    @reallyUndefined

    Submitted

    Hey everyone,

    Please do give your feedbacks and suggestions, they are welcome. 😊✌️

    NFT Preview Card Component

    #sass/scss

    3

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    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 😊😁

    1
  • Richmond• 30

    @xtoby-1

    Submitted

    I struggled to keep all the contents, next to the image, in the div when the width decreases. The only solution I know is to use the overflow property in css. It would be much appreciated if someone could tell me how to eliminate overflow. I noticed that , I repeated my code most of the time. Could someone show me how I could refactor my code and also resources that could help with code reuse and custom css. Thank you

    Product preview card component - Solution

    #bootstrap#wordpress#node

    1

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    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 😊
    1
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello, you have done a great job Here are some tips to fix the accessibility issue

    • your attribution should be inside a landmark tag. Footer is most suitable here, You can use
    <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
   Coded by <a href="#">MariusB</a>.
  </footer>

    Or simply wrap the div with a footer tag

    • <html lang="en"> always add language (lang) attribute to your HTML tag, en in this case means English

    In addition Also main is the most suitable here not section, a section is expected to have a heading h1 or ...h6 So you can have <main class="main"></main>

    Marked as helpful

    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello Ernesto Borges, Your solution looks great here are some suggestions:

    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English.
    • To make your website accessible for assistive technologies users, i.e to avoid accessibility issues, All Your page content should be contained by landmarks like <header>, <main> ,<footer>, /*etc*/ . read more
    • alt on the decorative image can be left blank for better accessibility i.e use <img class="img2" src="images/image-header-desktop.jpg" alt=""> NOT <img class="img2" src="images/image-header-desktop.jpg" alt="image-header-desktop">
    • Any time you submit a solution, check if you have any accessibility or HTML issues, if yes, click the "view report" button, then on the "view report" page, click learn more under each issue, then fix it, and click the "generate new report" button.
    • I just glanced through you html and observed you used pure divs , Read more on landmark elements

    I hope this helped 😊

    Marked as helpful

    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello ZAURI KHUTSISHVILI, you have done a great job Your solution look so good, and I like the fact that you left the alt of the images empty because of accessibility, since they are decorative image

    here are my suggestions: To fix your accessibility issues,

    • Sections are always expected to have a heading, if you see that what you want to put in doesn't have a heading then think of something better to use.
    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English.
    • Document should have one main landmark: your header should not be contained inside the article tag and you should have a main landmark.
    • I'll suggest modifying your structure to this to avoid accessibility problem, to make it easy for assistive technologies to navigate your site:
    <body>
    <header class="four-cards-header">
    </header>

    <main class="four-cards">
      <section class="four-cards__card four-cards__supervisor">>
      </section>
      <div class="four-cards__middle-cards">
        <section class="four-cards__card four-cards__team-builder">
        </section>
        <section class="four-cards__card four-cards__karma">
        </section>
      </div>
      <section class="four-cards__card four-cards__calculator">
      </section>
    </main>

  <footer class="attribution">
  </footer>

    Also:

    • I'll suggest wrapping the "Reliable, efficient delivery Powered by Technology" with one heading, then use span to separate them for styling, because it's one sentence and should be read as one especially by screen readers.
    • I observed that the upper and lower part of the page is cut off on a smaller screen, then I saw that you added height: 100vh; to the body and that's the cause, to allow responsiveness use min-height: 100vh; NOT HEIGHT, using ordinary height, won't allow responsiveness, and don't forget to add some margin so that the page won't disappear to the edge of smaller screen

    I hope you found this helpful😊

    Marked as helpful

    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work To fix Your accessibility issues:

    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English
    • All Your page content should be contained by landmarks like <header>, <main> ,<footer>, etc
    • your card should be wrapped in main as in,
    <main class="main">
 /*INSTEAD OF */ 
<div class="main">
    • Also div.attribution should be contained in the footer. i.e
    <footer>
  <div class= "attribution"></div>
</footer>

    Then you can go to accessibility issue and click the "regenerate accessibility report" button

    I think this will help....my EXPLAINED correction to someone's code

    github repository link

    live site link

    if you notice anything wrong, feel free to correct me I am not perfect, I am a beginner, I am open to correction and suggestions and I am wiling to learn more I'm doing this because I hope it will help feel free to ask questions,

    I hope this was helpful and my hope my bad grammar isn't giving you a hard time 😊.

    Marked as helpful

    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work

    To fix Your accessibility issues:

    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English
    • All Your page content should be contained by landmarks like <header>, <main> ,<footer>, etc
    • your card should be wrapped in main as in,
    <main class="survey card">
 /*NOT*/ 
<section class="survey card">
    • Also div.attribution should be contained in the footer. i.e
    <footer>
  <div class= "attribution"></div>
</footer>

    Then you can go to accessibility issue and click the "regenerate accessibility report" button

    • You can also improve on the responsiveness, check the my explained example below.

    if you don't mind, there are more explanation here on how I did mine after being corrected by mine dearest mentors.

    I hope you found this helpful 😊

    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work To fix Your accessibility issues:

    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English

    You might wanna add somemargin-top to the card, cuz it's too close to the top edge of the browser on short screen

    I hope you found this useful 😊

    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work To fix Your accessibility issues:

    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English

    I hope you found this useful 😊

    0
  • Ethan Schurkman• 20

    @ethan-schurkman

    Submitted

    Hello. I think that I was able to re-create the solution pretty well. However, I am most unsure of my code readability and efficiency. Is my CSS organized and readable? I find that with CSS I am often adding/removing properties in a hacky fashion that's conducive to having unreadable and sloppy code. Is there a process I should follow with my CSS? The same goes for HTML with div/class naming.

    Interactive Rating Component - HTML, CSS, JS

    1

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work

    To fix Your accessibility issues:

    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English
    • All Your page content should be contained by landmarks like <header>, <main> ,<footer>, etc
    • your card should be wrapped in main as in,
    <main class="survey card">
 /*NOT*/ 
<section class="survey card">
    • Also div.attribution should be contained in the footer. i.e
    <footer>
  <div class= "attribution"></div>
</footer>
    • Yea you are right, the alt of decorative images should be left empty. but you should have it there like alt="" to solve the HTML issue.

    Then you can go to accessibility issue and click the "regenerate accessibility report" button

    I hope you found this useful 😊

    1
  • Yashraj Deshmukh• 10

    @yashrajsd

    Submitted

    I made it for the windows so when I tried it for android device it's looking horrible. On what should I work on?

    Payment Process

    1

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work I noticed Your page isn't centered on all screen, to fix that, follow the code below

    body {
 /* 
    inorder to center the page vertically and horizontally,
    you should use flexbox. For that you will need to add min-height 100vh to the body to ensure that it's center vertically on all devices
    min-height is the best option so that will grow bigger when needed(i.e responsive). min-height NOT HEIGHT, using ordinary height, won't 
    allow responsiveness
  */
  min-height: 100vh;
  /* then we can now center it with flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    To fix Your accessibility issues:

    • All Your page content should be contained by landmarks like <header>, <main> ,<footer>, etc
    • your card should be wrapped in main as in,
    <main class="content">
 /*NOT*/ 
<div class="content">
    • Also div.attribution should be contained in the footer. i.e
    <footer>
  <div class= "attribution"></div>
</footer>

    Then you can go to accessibility issue and click the "regenerate accessibility report" button

    I hope you found this useful 😊

    Marked as helpful

    1
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work To fix Your accessibility issues:

    • always add the language attribute to your <html> tag, it should look like <html lang="en"> , here en means English

    I hope you found this useful 😊

    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello , you have done a great work To fix Your accessibility issues:

    • always add the language attribut to your <html> tag, it should look like <html lang="en"> , here en means English.
    • All Your page content should be contained by landmarks like <header>, <main> ,<footer>, etc
    • your card should be wrapped in main as in,
    <main class="container">
 /*NOT*/ 
<div class="container">
    • Also div.attribution should be contained in the footer. i.e
    <footer>
  <div class= "attribution"></div>
</footer>

    I have noticed Your page isn't centered, to fix that, follow the code below

    **Then you can go to accessibility issue and click the "regenerate accessibility report" button**

body {
 /* 
    inorder to center the page vertically and horizontally,
    you should use flexbox. For that you will need to add min-height 100vh to the body to ensure that it's center vertically on all devices
    min-height is the best option so that will grow bigger when needed(i.e responsive). min-height NOT HEIGHT, using ordinary height, won't 
    allow responsiveness
  */
  min-height: 100vh;
  /* then we can now center it with flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    I hope you found this helpful 😊

    Marked as helpful

    0
  • CarnyConQueso• 60

    @CarnyConQueso

    Submitted

    Please give me any feedback on what I can improve on for the future. One specific aspect that I would like some guidance on is the interactivity of the custom option of the calculator. Advice on other parts of the project would also be appreciated.

    Tip Calculator App Main HTML/CSS/JS

    1

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello, you have done a great work.

    • To solve the accessibility issues and to avoid it next time, Here is my suggestions concerning the accessibility issues Always add the language attribute to your <html> tag, i.e it should look like <html lang="en"> and here en means English.
    • The desktop version isn't centered, to center it,
    /* 
    inorder to center the page vertically and horizontally,
    you should use flexbox. For that you will need to add min-height 100vh to the body to ensure that it's center vertically on all devices
    min-height is the best option so that will grow bigger when needed(i.e responsive). min-height NOT HEIGHT, using ordinary height, won't 
    allow responsiveness
  */
body{
  min-height: 100vh;
  /* then we can now center it with flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
    • And you need to add some spaces around the card so that on smaller screen, it won't be cutoff by browser edges and it won't be too close to the edge.

    I said this because the bottom was cutoff on a small screen over her...so it needs margin/padding . I hope you find this useful 🙂

    Marked as helpful

    1
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello, you have done a great work

    • To solve the accessibility issue Your attribution should always be inside the Landmark footer tag I.e you should have
    <footer>
    <div class="attribution">
   </div>
</footer>

    • Your footer isn't centered, try to center it.

    • I wanted to view your code to provide feedback, but it took me to your GitHub profile, meaning I'll have to naviget to the repository.Try to correct this.

    I hope you found this helpful,

    0
  • Rahimullah• 40

    @biqrar

    Submitted

    QR-code card was a challenge for the front-end mentor. I solve it using Bootstrap and custom CSS. you can view and give feedback.

    QR-code responsive card

    #bootstrap

    1

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello Rahimullah, you have done a great work

    Here are my suggestions concerning the accessibility issues

    • Always add the language attribute to your <html> tag, i.e it should look like <html lang="en"> and here en means English.
    • All page content should be contained by landmarks, like Header, footer, main, aside.....so Instead of <div class="container"> you should use <main class="container"> And your .attribution should be inside the footer tag
    0
  • Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Asalamu aleykum warohmotullohi wabarokaatu sister, May Allah crown our effort with success.

    Here are my suggestions concerning the accessibility issues

    • Always add the language attribute to your <html> tag, i.e it should look like <html lang="en"> and here en means English.
    • All page content should be contained by landmarks, like Header, footer, main, aside.....so Instead of <div class="container"> you should use <main class="container"> And your .attribution should be inside the footer tag

    and I noticed a lot of other errors , so if you don't mind, there are more explanation here on how I did mine after being corrected by mine dearest mentors. The code contains alot of comments which are explanations to how and why everything is done in the code

    I hope you found this helpful 😊

    Marked as helpful

    1
  • Maria• 130

    @maaghia

    Submitted

    I got a little bit confused with th edimentions of components, I might try to adjest them in a second trial. All your comments are wellcome.

    order-summary-component

    2

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hello Maria, You have done a great work You have some accessibility issues, to fix them:

    • Always add the language attribute to you <html> tag, it should look like <html lang="en"> and here en = English. You can out your preferred language.
    • your attribution should always be inside the Landmark footer tag I.e you should have
    <footer>
    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io? 
      ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="#">Toubal Maria</a>.
   </div>
</footer>
    • Your design looks great 😊, try to add some padding/margin-top for the attribution. In short add some more spacing between them.

    I hope you found this helpful 😊

    1
  • promise• 520

    @ugochukwuuu

    Submitted

    I would like tips on how to make sites like this more responsive

    CSS flex and grid

    1

    Hamzat Lawal• 580

    @EngineerHamziey

    Posted

    Hi Bright, you have done a great a job. here is one thing I noticed, your page isn't centered , and alot more. to fix all that:

    /* 
    inorder to center the page vertically and horizontally,
    you should use flexbox. For that you will need to add min-height 100vh to the body to ensure that it's center vertically on all devices
    min-height is the best option so that will grow bigger when needed(i.e responsive). min-height NOT HEIGHT, using ordinary height, won't 
    allow responsiveness
  */
body{
  min-height: 100vh;
  /* then we can now center it with flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    and I noticed a lot of other errors , so if you don't mind, there are more explanation here on how I did mine after being corrected by mine dearest mentors.

    I hope you found this helpful 😊

    Marked as helpful

    0