All solutions

Hello everyone! 👋

A little bit of fun fact. When I started this challenge, I thought it was the single-page developer portfolio, not the designer. 😅

I am happy to be able to finish this challenge and learned a lot. I thought I would not be able to finish it because the slider was really hard to make—I still can make it by myself. Then, I decided to use a third-party library—which is a better way to say, "I borrow someone else's source code to create it". 😉

The most important thing that I learned was about using fluid CSS Grid. I am getting more comfortable to use RAM (repeat(auto-fit, minmax(..)).

Now for the questions:

• What are the alternative texts for the images inside the "My Work" section? Right now, the alternative texts are "first work", "second work", and so on.
• I tried the website on my mobile device in landscape orientation. I noticed that I could not scroll when I was on the slider section. My screen was full of the image and I could not scroll to the top or to the bottom. I got stuck. As a user, I could fix the problem by changing my device orientation to portrait. But, is that a problem?
• The users always see a smooth transition on the slider even though they disable animations. I can not stop it with CSS. Also, I think a transition for the slide effect is essential. Without the transition, the slide effect will happen abruptly. What do you think? Should the transition on the slider get disabled?

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!

Happy coding! 👍

Hi everyone! 👋

I finally completed this challenge with React. 🎉

I learned about the basics of React such as useState. I also learned Next.js since I used the Next.js starter files to set up the React project.

I still do not understand anything about React and Next.js and I do not know what to ask.

You can give me any feedback about React and Next.js. All feedback is appreciated.

Happy coding!

Hello everyone! 👋

I finally completed another challenge. This is my first solution in 2023. 🎉

Surprisingly, I learned a lot while building this project. I mainly learned about progressive enhancement. In this case, the content of the site can be understood with HTML only. CSS and JavaScript are only for enhancing the site.

I have a question. How to make an accessible toggle button with HTML and CSS only? It is part of the bonus challenge. Right now, I use the checkbox input to create the toggle button.

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!

Happy coding!

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!

Hello Everyone! 👋

This is my 30th solution on Frontend Mentor! Also, it's my first Advanced challenge. This was a large project and fun project. I learned a lot of new things. 😎

I learned how to create an accessible hamburger menu. It required me to use an inert attribute. inert is an HTML attribute that prevents users from interacting with the interactive elements. Currently, it has 82.97% support by the time I finish this challenge. But, I still need to use a polyfill for browsers that don't support inert attribute.

Progressive enhancement was also something that I apply when I did the challenge. Usually, when the users disable JavaScript, I will hide all the page content and tell them to turn on JavaScript. Now, I make it possible to interact with the site content without JavaScript. 🙌

Now for the questions:

• Is the menu accessible with your screen reader? I have checked it with Narrator and TalkBack. It seems like everything is fine. But, I am not sure so I recommend trying it yourself with your screen reader.
• I tested the form on the contact page with TalkBack. It turned out that TalkBack pronounce the input by reading the label and the placeholder of the input. For example, TalkBack pronounces the input name as "Edit box, name, name.". Narrator only read the label of the input (expected behavior). So, is that okay?

This is a large project. I might miss something or do things in bad practice. So, if you notice something wrong or there are things that I could have done better, please do let me know. 🙂

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!

P.S. I wrote everything that I learned on the README.md. You should check it out to see some of my approaches to solving the tricky parts of the challenge. 😉

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!

Hello Everyone! 👋

I finally finish my first API challenge! 🥳

This is a hard challenge for me, but I learned a lot of new things. 😀

Hopefully, I can get some feedback as well since I am still new at asynchronous programming. 😁

Now for the questions:

• There's an article where it tells me that I should use input with type="text" instead of type="search". But, is this a good thing to follow?
• Should I put the role="search" on the form element or on the div element (inside the form element)? I don't know the correct answer because MDN recommends putting the role="search" on the form element. But, Ahmad Shadeed recommends to put the role="search" on the form element to prevent overriding the default form semantic.
• I follow the GitHub alternative text of the user's avatar which is like alt="@username". But, do you think it's good enough or is there a better alternative text for the avatar?
• If you see the site, there are some statistics such as the total of public repositories, how many followers the user has, etc. My question is, should it be read as "8 Repos" or "Repos 8"? Currently, screenreaders will read the text as "Repos 8". But, if I should change it, then I would probably use flexbox to reverse the text visually. So, screenreaders would read the text as "8 Repos".
• Should I have a hidden heading above each list? For example, <h3>User statistics</h3>. I got the inspiration from the @grace-snow's solution for the "Profile card component" challenge).
• There are disabled links (or not available links) in this challenge. So, let's say the janedoe's GitHub account has no link in his/her profile. So, what do you think about the way I handle the disabled links? Currently, I make them as normal text (<span>Not Available</span>).
• Also, you might notice that janedoe has no name. So, I visually hide the h2 if the user has no name, <h2 class="sr-only">Not Available</h2>. What are your thoughts?
• Is there a better way to manage the colors for the dark mode and light mode? I used CSS variables in this project to make it easier because I could just switch the colors with prefers-color-scheme. You can see the CSS code to see how I handle the color for this project.
• If you can help me suggest a better name for any function in my JavaScript, I would really appreciate it. For example, setThemeSwitcherStateForDarkMode() is a very long name. 😆

I am aware of the HTML issues that have been generated. I added the role="list" to each ul element to make sure the ul element still has the semantic meaning when I set list-style: none;.

If you find any bugs or notice I miss something, please let me know. Also, if you spot any bad practices in my code, feel free to tell me. I will try my best to make improvements to make this solution better. 🙂

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!

Hello Everyone! 👋

It has been a while since I submitted the last solution. That's because I had an exam and my internet connection was down. 😅

Anyway, it feels good to be able to submit another solution. This is my first challenge for doing a two-page website. It's also the first time I create a map. Luckily, the Leaflet quick start guide is easy to follow.

I have several questions:

• On the location page, there's a map image. The alternative text for it is "Map of Modern Art Gallery". I don't know that it is enough for screen reader users. Maybe, I should explain the location in great detail like "Modern Art Gallery map. It's located at 99 King Street near International Tennis Hall of Fame..." (?). I think that would be overly descriptive. So, is telling the screen reader users that it is a map of "someplace" enough?
• Still on the location page, I am not sure about the HTML markup. There are these texts, "99 King Street", "Newport", "RI 02840", and "United States of America". So, my question is, should I put each text as its own paragraph or I wrap the text with one paragraph element and then use span to move each text to seat on its own line? (Or am I just overthinking about this 😆)

Like this?

<div class="area__wrapper">
  <p class="area__street">99 King Street</p>
  <div class="area__details">
    <p class="area__city">Newport</p>
    <p class="area__state">RI 02840</p>
    <p class="area__country">United States of America</p>
  </div>
</div>

Or like this?

<p class="area__wrapper">
  <span class="area__street">99 King Street</span>
  <div class="area__details">
    <span class="area__city">Newport</span>
    <span class="area__state">RI 02840</span>
    <span class="area__country">United States of America</span>
  </div>
</p>

• To simplify my second question, is it should be read as one sentence? (Or it doesn't matter 😆)

I have created the site without Leaflet JS. The map is an image that has been provided by Frontend Mentor. Here's the link: https://noleaflet.netlify.app/. This might be useful to understand my first question.

Any questions on the technique that I'm using 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!

I've done another challenge! 🎉

It's hard to find the exact RegEx that I want to validate user inputs. For the email RegEx, I already created by myself so I did just copy-paste from previous solution. For the name RegEx, I created a RegEx where the user's first name and last name should have at least a vowel letter and two characters long. Password RegEx that I wanted was difficult to find. However, I finally found a gist that contains the password RegEx that I wanted.

I added two new features such as

• Users are able to toggle the password visibility so they can see what they've typed.
• Users can see the password length so they don't have to count it by themselves.

These features were added based on my users' stories.

I have no questions however, any feedback is appreciated.

Any questions on the technique that I'm using 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!

I've finished another challenge! 🎉

This challenge has a straightforward layout and it is a nice challenge to keep my skill sharp. However, I try a new thing by changing the order of the head meta tags which hopefully makes the site run faster. In 4G the site loads after 1.3s, and in 3G the site loads after 3.5s which, is still really slow. So, is the site loads fast enough on your side?

I also make this as PWA (Progressive Web Apps), just for practice. So, you can install it and, it should be able to work even without the internet. 😁

Feel free to give me any feedback or comments. 😉

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!

P.S. I follow the order of the meta tags that Harry Roberts recommends. You can learn more about it by watching this YouTube video (Harry Roberts - Get Your "head" Straight).

Hello Everyone! 👋

This was, in my opinion, the hardest newbie challenge. There were a lot of decorative images that I needed to take care of. I even ended up doing a revert commit to rewrite the styling. However, It's a nice and fun challenge that really tested my CSS skill, and I'm glad I was able to complete it. 😊

I don't have any questions. However, feel free to give me any feedback or comments. 😉

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!

Hello everyone! 👋

I just want to create a simple project to boost my motivation a bit. Also, I keep it as simple as possible since it's a simple challenge so I don't want to think too much about it. However, I have written a README where I mention some approaches that I could take to finish this challenge. I hope that it will be helpful.

Anyway, feel free to give me any suggestions or feedback. Thanks!

Hello Everyone! 👋

Finally, I completed another PREMIUM challenge! 🎉

It was a challenge where I needed to play around with the background images. They were tricky! I also improved my old Regular Expression from the Base Apparel challenge. I had written everything that I learned in the README file. So feel free to check it out! (and give feedback on it 😄)

Now for the questions:

• I added alternative text for the Spotify, Apple Podcast, Google Podcasts, and Pocket Casts logos. However, the paragraph above the form element has mentioned all the platforms. I'm not sure that they are decorative or informative images. So, what do you think about it?
• If you try using a screen reader on my website, can you understand the page content?
• Can you navigate this website comfortably using your keyboard?

Any questions on the technique that I'm using 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!

Hello Everyone! 👋

I finished my first premium challenge! 🎉

The most challenging part was the number elements between sections. However, I managed to handle them with only pseudo-elements. That way, I didn't have to deal with the accessibility thing (hopefully). 😅

Now for the questions:

• I put the logo in a header. I'm not sure that it is correct or not, so what do you think about it? Should I put the logo inside the main element instead?
• If you try using a screen reader on my website, can you understand the page content?
• Can you navigate this website comfortably using your keyboard?

Any questions on the technique that I'm using 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!

Hello Everyone! 👋

My first solution in 2022 and as a PRO member! 🎉

It's been a while since I did the last project, so the quality of the code might not be as good as usual. Anyway, the layout was tricky, especially the hero image. Luckily, I managed to handle it, and hopefully, it looks good on your side. 😆

I also learned about Regular Expression when I worked with email validation. I searched for Regex on the internet, but I didn't find the one that I wanted. So, I ended up creating my own. 😁

Check the README to learn more about the Regex.

Now for the questions:

• Can you understand the page content if you use a screen reader on the website?
• Can you navigate through this website using your keyboard with the Tab key?
• What are your thoughts on the Regex? Do you think it will detect the common invalid email address?

Any questions on the technique that I'm using are very welcome! 🙌

Also, if you want me to give my feedback on your solution for this challenge, feel free to put the link on the community feedback! I will be glad to help you too!

Thanks!

Hello Everyone! 👋

This challenge looks simple, yet still challenging! Especially when making it accessible. 😅

Two things that I learned:

• WebP Image
• Creating the overlay with pseudo-element and shorthand background property.

Check the README.md to get more info!

Now for the questions:

• If you try using screen reader on my website, can you understand the page content?
• Can you navigate through this website comfortably using your keyboard (Tab and Enter)?
• Do I have to wrap the text inside a figcaption element with p tag? For example the text inside a blockquote element should be wrapped with p tag according to hail2u/html-best-practices repo.

Any questions on the technique that I'm using are very welcome! 🙌

Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link to the community feedback! I will be glad to help you too!

Thanks!

Hello Everyone! 👋

My second JavaScript challenge is completed. 🎉

The tooltip or the "share element" is a tricky one. It took me almost one day to figure out how to create and position it correctly. 😅

Now for the questions:

• If you try using screen reader on my website, can you understand the page content?
• Can you navigate through this website comfortably using your keyboard (Tab and Enter)?
• In my opinion, the drawers image is a decorative image, since it doesn't contain any information at all. But, it is a banner or the cover image of that article that commonly has alternative text. So, what do you think about it?
• I notice there are is-open, is-active, what kind of class naming convention is that? I want to google about it, but I don't know what keyword should I use.

Any questions on the technique that I'm using are very welcome! 🙌

Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link to the community feedback! I will be glad to help you too!

Thanks!

Hello Everyone! 👋

I finally finished the first JavaScript challenge. 🎉

After learning JavaScript for about one month. Here's the result! 😎

Now for the questions:

• Does this website looks good on your device?
• For the FAQ, I uppercased the letter on the HTML file instead of doing it on CSS. I'm afraid that the screen reader will pronounce FAQ when it should spell F-A-Q (letter by letter). So, is the screen reader smart enough to spell the faq letter by letter?
• Please try to navigate this website using your keyboard. If you don't know how to navigate using a keyboard, see the keyboard support section. Do all the keys work based on the functionality?
• For those of you who have finished this challenge, which text uses a very dark grayish blue color (hsl(237, 12%, 33%))?

Any questions on the technique that I'm using are very welcome!

Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link in the community feedback! I will be glad to help you too!

Hint: Try to disable JavaScript to get the pop-up box that will give you the link to the non-javascript version (using details and summary tag) or just click this.

Thanks!

Hello Everyone! 👋

I finally finished the first intermediate challenge. 🎉

This challenge is really testing my CSS skill, especially when making it responsive. 😆

Now for the questions:

• I added aria-hidden="true" for the phone, since it's just an illustration. Also because of that, I didn't use any interactive elements such as button and input. But, what do you think about this?
• I am struggling with making the two background that is on the top left and bottom right corner have a fluid layout. I had tried using calc(), clamp(), but I wasn't able to find the calculation for it. Do you have any solutions for this?
• I'm not sure what kind of animation should I make, so any idea about it would be appreciated.

Of course, other comments or any issue that you may find, feel free to write it down.

Also if you want me to give my feedback on your solution, feel free to give me the link on the community feedback! I will be glad to help you too!

Thanks!

Hello Everyone! 👋

Newbie challenges are tricky challenges. 😬

Now for the questions:

• I used button element for Change and use anchor tags for Proceed Payment and Cancel Order. Do you think it's true or not?
• For the Order Summary words, do you think it can be a heading or other tag?
• I tried to use TalkBack on my Android phone and I understood what it has spoken to me. Could you try it using your screen reader? I want to know that you understand what's going on.

Of course, other comments or any issues that you may find, feel free to write it down.

Also if you want me to give my feedback on your solution, feel free to give me the link on the community feedback! I will be glad to help you too!

Thanks!

Hello Everyone! 👋

This challenge is really testing my CSS skill on using background properties.

Now for the questions:

• Do you think using h3 for the Newsletter word inside footer is correct or should I use p and strong tag instead? Or maybe other HTML tag?
• I also tried to make all interactive elements to have a decent touchtarget by increasing the size of them. Do you think the UI still looking good?
• How good the transition between each breakpoint?
• If you try this using screen reader, does everything make sense?

If you find any issues or have any other comments, feel free to write them down!

Also, if you'd like me to give feedback on your solution, feel free to give me the link! I'll be happy to help you as well!

Thanks!

Hello Everyone! 👋

I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

Questions:

• I used aria-labelledby on every section. However, I'm not sure that it is a good thing to do. So, what do you think about it?
• If you have a solid understanding of SEO and believe there is something wrong with it, please tell me about it.
• Is this website has a good accessibility? Especially for screen reader, since I only tested the site using TalkBack.

Of course, any feedback is appreciated!

That's it! Happy coding everyone!

Hello Everyone! 👋

I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

Questions:

• I struggled with the footer layout, but this is what I've come up with so far; do let me know if you have any recommendations!
• I am not sure about the accessibility of this solution. So, feedback on the accessibility part is appreciated!

Of course, any feedback is appreciated!

That's it! Happy coding everyone!

Hello Everyone! 👋

I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

Of course, any feedback is appreciated!

That's it! Happy coding everyone!