Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Yari M

@YariMorcus
Netherlands
60Points

An eager to learn student with a future vision in the Front-end development career.

I’m currently learning...

The foundation of HTML, CSS and JavaScript (I have been using all three languages for a longer period of time, but never took the time to really learn the foundation

Latest Solutions

  • Desktop design screenshot for the QR code component coding challenge

    QR code component made with HTML(5), Flexbox, Sass and Mobile first

    #gulp#sass/scss
    • HTML
    • CSS
    0
    Submitted

    What I learned and the things I should keep in mind can be found in the README.md file on my GitHub repository.

    A couple of questions:

    1. Are there any remarks on how I implemented HTML(5) in my index.html? Like, would you do it in another way, and why?

    2. Are the comments I defined within my stylesheet clear, or is there a different way I should use them?

    3. What about my written CSS in general. Are there any remarks on that?

    I also created an alternative solution to the raster image that has been used for the QR code (supplied by Frontend Mentor). This alternative solution can be found in the README.md in my GitHub repository.

  • Desktop design screenshot for the Interactive rating component coding challenge

    Mobile-first solution using HTML5, CSS, Flexbox, JS (+ ES6), Gulp etc.

    #accessibility#gulp#sass/scss#node
    • HTML
    • CSS
    • JS
    0
    Submitted

    In the README.md file (on my GitHub repository), you can find information such as:

    1. Which languages and tools I used to build the challenge
    2. What I learned
    3. Things I should keep in mind for the next challenge
    4. My continued development

    However, there are some questions I have, which you can find below:

    1. Are there any remarks about how I implemented the HTML5 markup? Like did I use <header>, <article>, <section> etc. in the right way?
    2. Should I have been using a <h1> in both cases or <h2>? (In this case I used both a <h2>, because I know that you are only allowed to use a <h1> once, and found it quite odd to use a <h1>, and for the thank you card a <h2>)?
    3. Are there any remarks on the way I used whitespace in both HTML and JavaScript?
    4. What about my comments? Did I describe them clearly? Or did I use too much of them?
    5. The boolean condition I used on line 97 (index.html), is this clear enough? Or should I have been doing this maybe in another (better) way? Like, how would you have written this condition?
    6. Do you have any other tips or things for me which I should keep in mind?

    And at last, thank you for taking your time to check the solution of my challenge. I really appreciate it!

Latest Comments

  • Solution screenshot
    • HTML
    • CSS
    • JS

    Less, BEM, Flexbox and Jquery

    2
    Yari M60 | Posted about 20 hours agocommented on Rodrigo's "Interactive rating component" solution

    I took a look at your result, and it looks good.

    However, I do have some feedback points, which I want to share with you (it is up to you what you do with it):

    Critical feedback

    1. I can submit your form without selecting a number. This action brings me to the rated.html page, which gives me the following message: You selected null out of 5. This shouldn't happen in a real system, so this is something I would definitely change (like disabling the button if the user did not select a number. In this case, don't forget to enable it again haha).

    Other feedback according to the design

    1. The padding on the top, right and left should be a little larger.
    2. The padding on the bottom should be a little less (if I am seeing this right in the design).

    Other tips

    1. I see you created a hover state for your links in your footer, but not a visited and activated state (which should exist as well according to Web Accessibility).
    2. I personally would place <small> within <footer>, to better indicate to assistive technologies (such as screen readers) that the text belongs to a footer (unless there is a reason why you don't want to convey it as footer text).
    3. I always learned to use CSS background images for decorative images (in this case, the icon-star.svg). There is a side note here, and that is the following: if you do want to use HTML images for decorative images, then leave the alt attribute empty. Screen readers will otherwise read this out to their users, and this might confuse them because it doesn't offer any real value for these people.
    4. Always supply a raster image as a fallback for your vector graphics, in the case the user disabled images, or the browser does not support an SVG. Otherwise, nothing will be shown to the user.

    I hope you can do something with the feedback points and tips I gave you, but don't see it as something you need to do, but rather something for later (you are always free to correct your solution if you want).

    If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things :D.

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    CSS Flexbox and JavaScript

    2
    Yari M60 | Posted about 1 month agocommented on Abdullah Ajayi's "Interactive rating component" solution

    I took a look at your solution, and have a couple of feedback points and tips I want to share with you. I do need to say up front that it might be a lot to digest, but I am doing this to not only help you out, but also to share information about things I learned from others.

    Feedback points

    1. I am able to submit a rating, even if I did not select any number. In a 'normal' rating system this would not be allowed, because normally you cannot submit your review form, without not giving up a rating number. Unless the system doesn't require you to supply a rating number, but in this challenge it does (or at least, that is how I read it in the challenge description).

    2. I always learned not to write a word in uppercase, when you want to show it in uppercase to your users. This has more to do with Web Accessibility because screenreaders might read it in the wrong way. My advice is to always use text-transform: uppercase;.

    A couple of tips

    I do have a few other tips for you as well:

    1. Always supply a raster image as a fallback for your vector graphics, in the case the user disabled images, or the browser does not support an SVG. Otherwise, nothing will be shown to the user. I noticed that you did not supply text within the alt attribute, and that is good (because it is decorative)!

    2. Try to use a little more of the semantic HTML elements HTML5 offers you for structuring your document. You can think of <article>, <section> and <header>. When I did this challenge, I used <article> for both the rating card and thank you card, <section> to indicate it is a specific section within article (section offers the same functionality), and <header> to enclose any titles or introduction content. When you start using these semantic HTML elements more, you make your component even more accessible for people who use assistive technologies (such as screenreaders), because theses HTML elements are recognized better than using the common 'div'.

    3. Do not use of @import statement within your stylesheets. They create a new HTTP request, which in return results in slowing down the speed of your website (when the user requests to open your webpage). I do need to say that in this case, it doesn't really matter, because it is just one of them, and the website doesn't use a lot of resources. But I do recommend not to use them when you use more of them, especially when creating a big website. Just as a sidenote: speed is an important metric for search engine optimization (SEO), and also user experience.

    4. Don't try to repeat your CSS (follow the DRY principle). It makes it harder to maintain, and unnecessarily increases the size of your file (again, this has to do with the speed of your website).

    I saw that body main, .star, .rating-star-component and .thankyou-page-wrapper use the following CSS declarations:

    display: flex;
    justify-content: center;
    align-items: center;
    

    In this case, I recommend you to group all of the above named selectors together, and apply above CSS declarations to it:

    body,
    main,
    .star,
    .rating-star-component,
    thankyou-page-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    

    When you have to update one of the CSS declarations, it will all be adjusted automatically for the other selectors (you spend less time repeating the same action).

    Other things I want to say

    The responsiveness of your interactive rating component is something I tested as well, and that seems to be fine (which is very important nowadays).

    I hope you can do something with the feedback points and tips I gave you, but don't see it as something you need to do, but rather something for later (you are always free to correct your solution if you want).

    If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things :D.

    1