Skip to content
OverviewSolutions
24
Comments
7
P
Abouelhouda Iliass
@ilyesab

All comments

  • sambensim•20
    @sambensimSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Pretty proud of my use of a div background for the button to fade into a gradient, although I think I probably could've done without the extra background if I'd set the original background color to a gradient of only one color. I think I also could've gotten around using media queries if I'd set my flexbox sizing better.

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

    As always, spacing was the largest annoyance, but I didn't face any real issues there. I didn't use all of the colors given, and I'm a bit unsure about where the light lavender color was supposed to go, but it looks fine...?

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

    I need to work on formatting for accessibility and working out layers of specificity so I don't need so many selectors.

    Results Summary Component with raw HTML and CSS

    1
    Abouelhouda Iliass•480
    @ilyesabPosted 7 months ago

    Hi @sambensim, I reviewed your solution a few remarks from my side:

    • your html code really misses on accessibility you're only using divs. divs don't convey any sematic meaning so a blind user using a screen reader will have a hard time navigating your website. try to use landmark elements such as:

    • <main> for main content

    • <section> for a generic section

    • <nav> for navigation

    and so on.

    • it seems that you also struggle on how you structure your styling using selectors like :first-child or nth-child should only be done rarely. if you want help with that I recommend you check out BEM which is a methodology of how to structure your html using classes to make styling more organised and maintainable.

    • it seems like you used flex a lot to center content and so on. I recommend you check out grid it allow you do much of what you did in your solution but in fewer lines.

    • you kept setting the weight of the font using font-variation-settings but you could use also just use font-weight by the way.

    hope this will be useful to you other than that good work!

    0
  • Abouelhouda Iliass•480
    @ilyesabPosted 7 months ago

    Hi @Kaoutherbo, I reviewed your solution. really great work. I never realised that CSS Nesting was available in the browser without a CSS preprocessor. that was good to know. It also seemed you built the backend yourself using GO. as I have no experience in that I didn't take a look at that code.

    However I did take a look at the frontend code and below you can find some of my remarks:

    • I think it would be a better idea to use a button and not a div for the dice button to generate new advice. a button has the semantic role of ''button" and it is declared as such by screen readers. while your div won't be declared a button. you also cannot tab into it so if I don't have a mouse I'm gonna have a hard time. you can add a tabindex attribute to it to resolve that.

    • in relation to accessibility it might be a good idea to add an H1 even if it's visually hidden and add alt texts to your img elements.

    • in design terms I think you should increase a little the spacing between elements especially on mobile as they seem a little bit squished.

    Marked as helpful
    1
  • Abouelhouda Iliass•480
    @ilyesabPosted 7 months ago

    Hi @victorJandreu, Great Work!

    I taken a look at your code. it looks like you did a good job. a few notes about it from my side are:

    • first on a mobile screen such as 375px wide. the content overflows the main container. it looks like from your CSS that you took a mobile first approach. the divider svg is 295px wide on mobile whereas the main container is 269.25px. so overflow happens. however on screens wider than 440px your design doesn't overflow.

    • Second is your JS Code. it seems like you don't add semicolons at the end of your javascript statements. Javascript does add them automatically if you omit them. however in some certain cases it can lead to errors that are hard to debug. so a general advice is to always add them manually.

    Marked as helpful
    0
  • Favour•2,160
    @Nadine-GreenSubmitted 8 months ago
    What specific areas of your project would you like help with?

    Someone, please explain to me why the background images never show up when i publish a website, it shows up on my editor but not on the published site for some reason, same thing happened to this site as well.

    intro-component-with-signup-form-master

    1
    Abouelhouda Iliass•480
    @ilyesabPosted 8 months ago

    Hi @Nadine-Green, I think I know why your image doesn't show.

    in the file SCSS/Components/_sections.scss is where you're styling the main container and where you set the background image:

    main {
  background-image: url("../../images/bg-intro-desktop.png");
}

    The path is correct since you're jumping one up to the SCSS and then one up to the root directory where the images folder exists. however the compiled index.css has the same code but it exists directly under the SCSS folder.

    So the path should be:

    main {
  background-image: url("../images/bg-intro-desktop.png");
}

    Since Sass doesn't fix the path based on where the compiled file will be generated.

    It shouldn't work on your local machine on mine it works and I'm using live server. I'm assuming since live server notices that we're going up above the root directory it fixes the path. because if I open the html file without live server the background doesn't show. so just fix that line and it should work.

    Hope this was helpful.

    2
  • DivasJaglan•170
    @DivasJaglanSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of making this project in my given period of time. Next time I want to reduce more time in making this.

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

    It was not so challenging but I forgot about the focus state of the button which consumed my time 😅

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

    Open for your suggestions 😃

    Interactive Rating Component

    1
    Abouelhouda Iliass•480
    @ilyesabPosted 8 months ago

    Hi @DivasJaglan, Your solution looks great!

    I like how you included your personal touch using linear gradients and so on to customise the design.

    A few notes from my side:

    • I believe you should have use h1 vs h2 in the html. since you already set the font-size using CSS I believe using an h1 is semantically better.

    • You create spacing mainly using flexbox and the gap property. I would advise you to look at grid as it allow you do the same but saving few CSS Lines.

    • The content looks a little bit squished on mobile and the paragraph looks vertically squished so maybe decrease the padding of the main container and give the paragraph a line-height and maybe a bigger font. though it still looks nice without all of that.

    Over all I think you did a great job!

    Marked as helpful
    0
  • Abouelhouda Iliass•480
    @ilyesabPosted 8 months ago

    Hi @CLOUD_CODES, I've gone through your solution. Great Work!

    A few things I noted about it:

    • I can submit a rating without a visual indicator. which means when I click one of the ratings I don't get feedback that it's still selected.
    .numbers-to_select p:hover {
  background-color: var(--Orange);
  color: var(--White);
}

    I think it's better to add a class to the clicked rating that does what you're doing on hover so it show the user the rating that he selected.

    Also on mobile you get a horizontal scrollbar that's because you're setting a min-width on your main-container of 400px but mobile can be as low as 320px. also the mobile design is 375px. so you're always get a horizontal scrollbar because of that.

    Otherwise these are the main issues that I noticed hope this was helpful.

    0
  • Lo-Deck•2,790
    @Lo-DeckSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Hi here is my solution for "Ping single column coming soon". I used HTML, CSS, Flex, Grid, Mobile-first, JS.

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

    I used a span and a listener to display the error message with innerTextand an if to validate the form if(!myForm[0].validity.valid).

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

    Thanks to leave any comment if you see something I can do better.

    Ping single column coming soon

    1
    Abouelhouda Iliass•480
    @ilyesabPosted 8 months ago

    Great Work! I think the only thing that seemed a little bit odd in layout terms was that you have no margin around the content on Mobile. so the logo and the copyright sticks to top/bottom of the view port looks a little bit odd.

    You created the spacing mainly using margin and used the position property to position the error message. all looks good for me using the validity API was a great idea.

    Maybe something to try next is that your design doesn't change from 0px width to 1200px. it's static as you used a lot of max-width I understand that was intentional. but it'll be great if the design changed to best utilise the available space in the view port.

    Marked as helpful
    1