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
P

Roy

@royschrauwenU0251DLTSP6
Rotterdam, The Netherlands
195Points

šŸ’» I am self-learning HTML, CSS and JavaScript at the moment, but as of September 2021 I will be going to school to learn Software Development as an Associate Degree education šŸŽ’. Please feel free to give me tips and tricks or just say hi. šŸ˜Š Have a nice day! šŸ™‹ā€ā™‚ļø

Iā€™m currently learning...

HTML CSS JavaScript

Latest Solutions

  • Desktop design screenshot for the Advice generator app coding challenge

    Using API for first time with this Advice Generator

    #accessibility#fetch
    • HTML
    • CSS
    • JS
    • API
    2
    Roy195
    Submitted

    Hi everyone! šŸ‘‹

    This was the first time I used an API for a project / challenge like this. It was not as hard to get it working as I thought it would be. However I am not sure if I did it the right way, because I am very new to this.

    Also I tried to keep in mind that changing text on screen, like with this challenge, is hard to notice for people with screen-readers so I tried to use aria-live for that. I also added a focus to the button in CSS for better accessibility.

    ā“ Concrete questions ā“

    1. Did I do the JavaScript for the API in the correct way?
    2. Did I do the accessibility the right way?

    šŸ“‘ GitHub: https://github.com/royschrauwen/100-days-of-code/tree/master/day-21

    šŸ’» Live: https://royschrauwen.github.io/100-days-of-code/day-21/

    I also did this project for the #100DaysOfCode Challenge! Today is day 21 and I am still very much enjoying it!

    Have a nice day! šŸ™‹ā€ā™‚ļø

  • Desktop design screenshot for the NFT preview card component coding challenge

    Card with an image with hover in HTML & CSS

    • HTML
    • CSS
    4
    Roy195
    Submitted

    Hello everyone! šŸ‘‹

    I got to upload another solution! Making the hover effect was a little challenging. And I still am not completely satisfied because I could not het the image of the eye as white as in the design. If anyone can tell me what I can do to improve it, that would be very nice.

    Also, I could not get the line the same in Chrome as I got it in Firefox. Any pointers?

    This was also my 6th day in the #100DaysOfCode Challenge!

    If you have any advice, please let me know.

    Have a nice day! šŸ™‹ā€ā™‚ļø

  • Desktop design screenshot for the QR code component coding challenge

    QR Code Component

    • HTML
    • CSS
    5
    Roy195
    Submitted

    Hello everyone! šŸ‘‹

    Today I completed another Frontend Mentor Challenge. I am doing the #100DaysOfCode and today I wanted to do some Frontend. I only had to use some HTML and CSS for this solution , so it was a quick and fun excersise. I used a Mobile-First approach and later tried to adapt the styling to a Desktop view. Because the card had the same look on both devices, I only had to change a couple of lines.

    ā“ļø Question I now gave the main (/card) a max-width in rem. Is there a better solution to make the card desktop-friendly?

    I would much like to become a better developer, so any advice you can give me is very welcome, also if it does not regard my specific question.

    Have a nice day! šŸ™‹ā€ā™‚ļø

  • Desktop design screenshot for the Article preview component coding challenge

    Article Preview Component - Did I make this accessible enough?

    • HTML
    • CSS
    • JS
    1
    Roy195
    Submitted

    Hello everyone! šŸ‘‹

    Woohoo! This is solution number ten for me šŸŽ‰

    I have been self-learing since May 2021 and besides just learning about HTML, CSS and JS, I am also trying to learn about accessibility and responsiveness.

    ā“ļø Specific Questions

    1. I ran my first solution for this challenge through an Color Contrast Accessibility Validator and the colours in the design did not have a high enough contrast, so I converted the colours to HSL and lowered the lightness untill they passed. Is that ok? Is this something you usually discuss with the designer?

    2. I also made the font slightly bigger for better readability. Ok or also a designer choice to make it, in my opinion, too small?

    3. I changed the outline when the button gets focus to a color from the design. Is this a good thing to do of better leave it alone?

    4. Did I give every item that needs accessibility label and alt, etc, in the right way?

    I would much like to become a better developer, so any advice you can give me is very welcome, also if it does not regard my specific questions.

    Have a nice day! šŸ™‹ā€ā™‚ļø

  • Desktop design screenshot for the Ping single column coming soon page coding challenge

    PING Coming Soon Page: Did I make it responsive and accessible enough?

    • HTML
    • CSS
    • JS
    4
    Roy195
    Submitted

    Hello everyone! šŸ‘‹

    I love doing all these challenges and finished another one, it's my ninth one! šŸŽ‰

    I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is very welcome. šŸ˜Š

    ā“ļø Specific Questions ā“ļø

    1. I wanted to make this one as responsive as possible. I think I managed to do that, but please give me tips on how to improve or point out things where I did a good job.

    2. I tried to take accessibility into account when making this page. I have no experience with it, so please tell me what I did right and where I can improve.

    Thank you very much for any support you can give me. I love all the small tips and tricks the community gives me. šŸ™

    Have a nice day! šŸ™‹ā€ā™‚ļø

  • Desktop design screenshot for the Meet landing page coding challenge

    Meet Landing Page - How to make it better responsive?

    • HTML
    • CSS
    0
    Roy195
    Submitted

    Hello everyone! šŸ‘‹

    I finished another challenge! šŸŽ‰

    It was a lot of fun, even though (or maybe because) they get a little more challenging šŸ’Ŗ

    Questions

    1. I have a hard time not using fixed widths and heights. I tried different ways (min- and max- and % and vw and rem). Can anybody give me some good pointers please?

    2. The 4 squarish images look good in FireFox, but not in Chrome (too big and the outer one are cut off). Can anybody tell me why that is?

    Thank you very much for any support you can give me. I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is very welcome. šŸ˜Š

    Have a nice day! šŸ™‹ā€ā™‚ļø

    Update: I fixed my second problem with the help of the Frontend Mentor Community on Slack šŸ™ and am learning to understand how to fix the first one.

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    Card component using HTML CSS Bootstrap

    1
    P
    Roy195ā€‚|ā€‚Posted about 1 year agocommented on Huu Ninh's "Stats preview card component" solution

    Great job on finishing a challenge.

    I also just finished this challenge so I know all the struggles. I see in your code you took a different direction than I did. I like seeing that, it tells me there are more roads leading to Rome.

    Your site switches over to the mobile view, so that is also a success. Maybe you could check at what moment it switches. For my taste it can be a bit earlier. I think you can also improve your solution by carefully checking the fonts. You might have missed something there.

    I am also just a beginner, so that is all the tips I can give you. I hope you find them helpful.

    Keep on coding and have a nice day! :-)

    0