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

All comments

  • Vanza Setiaβ€’ 27,795

    @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

    2

    Hamzat Lawalβ€’ 560

    @EngineerHamziey

    Posted

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

    0
  • T
    Graceβ€’ 28,970

    @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

    2

    Hamzat Lawalβ€’ 560

    @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,795

    @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

    3

    Hamzat Lawalβ€’ 560

    @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β€’ 560

    @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

    3

    Hamzat Lawalβ€’ 560

    @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

    1

    Hamzat Lawalβ€’ 560

    @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β€’ 560

    @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β€’ 560

    @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β€’ 560

    @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β€’ 560

    @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β€’ 560

    @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