Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
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

All 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.

  • Desktop design screenshot for the Four card feature section coding challenge

    Four card feature section - HTML, CSS, Flexbox, Mobile First

    • HTML
    • CSS
    4
    Roy195
    Submitted

    I tried making the Mobile version first and after that adjusting the stuff for Desktop.

    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. šŸ˜Š

  • Desktop design screenshot for the Social proof section coding challenge

    Social proof section - HTML, CSS, Flexbox, Grid

    • HTML
    • CSS
    1
    Roy195
    Submitted

    I had a hard time with the positioning of all the objects, but in the end I made something that looks somewhat like the design.

    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. šŸ˜Š

  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

    Huddle landing page - In HTML and CSS

    • HTML
    • CSS
    5
    Roy195
    Submitted

    I tried learning and using the BEM Naming Convention, but I am not sure I did it the right way. It would be very helpful to me if anybody can give me some pointers.

    Also: How can I center the Font-Awesome Social icons properly inside of the circles?

    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. šŸ˜Š

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

    Stats Preview Card Component using HTML and CSS

    • HTML
    • CSS
    0
    Roy195
    Submitted

    I tried learning and using the BEM Naming Convention, but I am not sure I did it the right way. It would be very helpful to me if anybody can give me some pointers.

    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. šŸ˜Š

  • Desktop design screenshot for the Profile card component coding challenge

    Profile Card Component using HTML and CSS

    • HTML
    • CSS
    4
    Roy195
    Submitted

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

    Also, in Chrome there is a cyan border around the top-half of the profile-image, but there is not in Firefox. Can anybody tell me why that is?

  • Desktop design screenshot for the 3-column preview card component coding challenge

    3-column preview card component with HTML and CSS

    • HTML
    • CSS
    4
    Roy195
    Submitted

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

  • Desktop design screenshot for the Single price grid component coding challenge

    Single Price Grid Component in HTML and CSS

    • HTML
    • CSS
    4
    Roy195
    Submitted

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