Looking to hire developers?
@jonathan401
@karolbanat
Submitted
Hi. After a long time I post this solution. It took me a little bit longer due to the things happening in my life, but I will finally post it. Started it with testing, but later abandoned it. Worked on it a little each week. It will certainly have some bugs and issues, so if you find one let me know. Feedbacks are welcome. Have a nice day.
@jonathan401
Posted
Congratulations @Karol on completing this challenge 🎉🎉. The solution looks great on my mobile device. I hope everything works out fine with you too.
@LuisComZ
Submitted
I don't know how I can take the white bar in the left off, so I accept any suggestion to how a can make it. I also wanna learn other way to centralize all the container without using the properties of position and transform. Anyone know other methods or can recommend me a site who teaches about this?
@jonathan401
Posted
Congratulations on completing this challenge 🎊🎊. Well a few suggestions:
container be a main element instead.h1 element per page. So you make the other h1 a h2 instead.text-transform: uppercase; in the CSS to make it all caps.Once again, congratulations on completing this challenge 🎊🎊.
@visualdenniss
Submitted
🔥 Here is my 30th Challenge! This was fun and tricky! 🔥
I've added some more features to the challenge:
This is still a work-in-progress, next i plan to refactor my code using useReducer and tidy up the function, improve accessibility/semantic stuff, localStorage implementation, perhaps a notification system for users when they are being replied to, a function for real/dynamic timestamps.
If anyone interested in how i've built this step by step, i recommend checking MY WORKFLOW
Hope you guys like the final result ♥️
@jonathan401
Posted
A wonderful solution 🎊🎊. This is my first time hearing about npoint.io. I'll try using it in my solution to this challenge. Love the extra features ❤️❤️
@MelvinAguilar
Submitted
Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀
🎁 Features:
🛠️ Built With:
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊✌️
@jonathan401
Posted
Wonderful solution as always 🎉🎉. Just curious though, how do you match the design exactly. It's always eluded me 😅. I'll like to make my solution match the design but since I'm a free subscriber, it's really hard achieving that 😅. Any tips on how I could match the mobile and desktop design 'perfectly'?
@karolbanat
Submitted
@jonathan401
Posted
Congratulations on completing this challenge 🎊🎊. Honestly I was waiting for you to submit your solution since mine is taking me longer than I expect 😅. Wonder solution as always. I have a few suggestions though from what I observed from the live site.
@usermame, the user can just clear out the content and reply and the card no longer has the @username. I don't know if you understand me though.Those are mainly the two observations I have. Hopefully you understand me because I find it hard to really express myself. Congratulations on completing this challenge 🎊🎊. Happy Coding 💪🏾. I really look forward to your solutions 💫💫.
Marked as helpful
@IliaIvashkevich
Submitted
Hi all! How to change background of active image (to Cyan)?
@jonathan401
Posted
Hey @IliaIvashkevich 👋🏽. Congratulations on completing this challenge. To answer your question, you could use two approach to change the background to cyan.
img an overlay, give it a background colour of cyan and when the div is hovered, show the background colour. or::before or :: after pseudo element to create an overlay for the image.
I don't know if the above is enough without using a code example though 😆.And also,.you could try checking out the accessibility reports to you solution.
You could try wrapping the whole elements in a main element. That is <main>{the rest of your html code}</main>. So you should change that <div class="container"> to main.
You could checkout this freecodecamp article on semantic html.
Hope you got at least something from this feedback.
@AdrianoEscarabote
Submitted
👨💻 Hello everyone.
My first project with Typescript, I really liked it and found it very different. I decided to make a slightly simpler project, so as not to get too stuck in the development, but I will definitely make some more elaborate ones, but this one was definitely a lot of fun to do!
Thanks! 😊
@jonathan401
Posted
Hey 👋🏽. Congratulations on completing this challenge 🎊🎊. Well I didn't check out your code but I have a suggestion based on the live site. Maybe you should consider the social media links of the searched user clickable. What I mean is that I should be able to go the user's Twitter profile of available for example.
That's all.
Happy coding.
Marked as helpful
@JaneMoroz
Submitted
👋 Hi, guys!
Here is my solution to the 'Multi step form' challenge 🎉
I used Vite for this challenge with React integration.
So to sum up I used:
🤝 Happy to hear any feedback and advice.
@jonathan401
Posted
Congratulations!. This is a beautiful solution!. I just have one suggestion though. Is there a way for you to make the steps at the left side of the solution clickable? So that whenever a user wants to visit a step that user can just click on those steps. I don't know how I could explain this clearly enough :). But I think it'll be nice if you could implement it. I'll also try to implement it when working out the next solution. But really, this was a beautiful solution. Haven't gotten the time to check your code but I would do that when I complete this solution myself :D. Keep up the good work :D
Marked as helpful
@karolbanat
Submitted
@jonathan401
Posted
Wonderful solution 🎉🎉. I really love your solutions. I have an observation. In the about page, where a user clicks on the plus icon to reveal the information about a particular team member, I noticed the transition was not that smooth and it took quite a while. That's the only thing I noticed. Other than that, your solution is amazing 🎊🎊
Marked as helpful
@karolbanat
Submitted
@jonathan401
Posted
Nice work on this challenge 🎉🎉. Sorry again I had to ask, when I looked at your package.json file, I noticed you used Babel and gulp. Could you point me to any resource that teaches how to use Babel and gulp. Because I want to make my next challenge backwards compatible too (i.e the JavaScript).
@karolbanat
Submitted
@jonathan401
Posted
This is a really beautiful. I live your solution 💫. I took a look at your scss and I must confess, I was blown away 🚀. Could you suggest any resource to learn scss. If you could provide me with the one you used to learn scss, I'd be really grateful ☺️
@echoturnbull
Submitted
My second project solution.
A few things I had trouble doing. I was unable to figure out why i could not center the entire container into the center of the page. Hopefully this time around I have fixed a few things from the first project, such as phone compatibility.
If anyone takes the time look at this and provide a comment then thank you very much in advance!
@jonathan401
Posted
Hey @echoturnbull 👋🏽. Congratulations on completing this challenge 🎉. You did good 👍🏾. A few things to note: html
body element. So you should remove the body tag surrounding your h1 element.h1, p tags in extra divs or other wrappers. Since this challenge only contains an image, h1 and p elements. Doing this will make your html a little bit more neat, and you don't have to write a whole lot of CSS. But the method you used is also perfectly fine since you could practice using classes 💪🏾.CSS
To center the container, you have to give a min-height property to the body element because by default, block level elements have a height of 0 and only take the height of their children. The style definition for the body element becomes:
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
And any other style you want to give the body.
display: block;
width: 100%;
object-fit: cover;
Should be enough.
remove the margin: 0 auto 0 auto; from the main selector. The display: flex you added to the body selector will center the main element horizontally and vertically.
Avoid using absolute values like px to for defining size or padding of elements. This could cause issues with accessibility.
There is no need to set width to h1 and p tags, the text-align: center; property you added to the body element would make sure that the elements are centered horizontally.
Sorry that got too long. You did really good 💪🏾. Once again, congrats on completing this challenge 🎉🎉
Marked as helpful
@jccaychop
Submitted
I would like to know if the components folder structure is correct, when using styled components
@jonathan401
Posted
Hey there @jccaychop your solution looks great 😇. I didn't look at your code because I've not started this challenge but I have a suggestion, I'm guessing you used an input of type text for the card number input field but since this is field is expected to only receive numbers you could consider changing it's type to number this in itself will provide a form of validation and will reduce the code you need to write to validate that field.
As I said I only provided this feedback by just checking out your solution ☺️. Feel free to correct me if I'm wrong 😁.
Once again congrats on completing this challenge 🎉🎉.
Marked as helpful
@winprn
Submitted
I would really appreciate your feedback and also guidance on how to make the site works better. Thanks in advance!
@jonathan401
Posted
Hey there @winprn 👋🏽 congrats on completing this challenge 🎉🎉🎉. You did really well. Just a few things from me 😄.
main element..card-title which is currently a p element to an h1 element. This is because it is required that every page contains at least one h1 element for easily navigation of the page by other users who may have some disabilities.max-width style rule to the card instead of a width to the card. This will make sure that the card easily 'contracts' on mobile screens and then on larger screens you remove this max-width and adding a definite width of 37.5rem (which you defined in your CSS for larger screens).
That is all from me 😄. Once again nice work 👏🏾. Happy Coding 🎉Marked as helpful
@maria-js
Submitted
Hello, leave me comments to my exercise.
Thank You!!
@jonathan401
Posted
Congrats on completing this challenge @maria-jose :). You did a really good job :). Just a few suggestions though.
To fix your accessiblity issues you should wrap you whole card component in a main tag.
Also, it is a good practice as well as required by the WCAG guide that every page should contain one h1 element. This provides a good way for users that with disablities like coordinative abilities or users that find it hard to see to easily navigate your site (or your page).
This is a small project so this might much be very important but you should consider adding classes to your html elements. This will make it easier for you to style the elements when you're working on a large project in the future. For example, when you have a lot of p elements in your page, adding a class to each of these p elements could save you a lot because in you might want to style a p element different from another p element. I hope you get that ;). This article by w3schools might provide better understanding on this concept. Feel free to do more research on this :).
I noticed in your css that you were using absolute units to style your css. This is good in some cases but it leads to your site to break and not responsive. You should consider using relative units like % or rem instead ;). (You don't have to do this though, It depends on what you are building). You could check out this article by freecodecamp.
I have to apologize for making this so long :). Congrats on completing the challenge :). Happy Coding :D.
Marked as helpful
@correlucas
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.
Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) 😂
I added some features:
I'll be happy to hear any feedback and advice!
@jonathan401
Posted
Nice work on this challenge 🎉🎉. I love the dark mode feature you added 😇. Could you point me to any resource (preferably an article) that details how to create dark mode in CSS?
@kamlouckDelor11
Submitted
@jonathan401
Posted
Congrats on completing this challenge 🎉🎉. You did a really great job. Here's my thought on this challenge 😇.
@christopherbeech
Submitted
Feedback welcome.
@jonathan401
Posted
Congrats on completing this challenge 🎉🎉. You did a really good job 😇. Just a few things though.
main element instead of a div. This will help make your html markup more semantic and easy for additive technologies like screen readers to easily navigate your site/page.display: flex; justify-content: center; align-items center; min-height: 100vh; The min-height: 100vh; style rule is to make sure that the body element takes at the entire screen height and makes it easy for thecss flex rule to work. If you're more comfortable using the CSS Grid, you could use the rule display: grid; place-items: center; 😇.
I guess that's the feedback I could provide ☺️. Once again congrats on completing this challenge 🎉🎉. Happy coding 🎉🎉Marked as helpful
@alvaroormeno
Submitted
Please let me know if you have any feedback!
@jonathan401
Posted
Congrats on completing this challenge 🎉. You did a really good job and the result was good overall 😇. Here is my feedback:
<div class="card-container) with a main tag or element this will help make your html markup semantic as well as accessible and easy for users with disabilities to easily navigate your site. You could check out this w3schools tutorial on html landmarks..price-time-container a ul element since it provides a an easier way to display a list of items and as an added bonus, makes your html markup more semantic and accessible 😇margin 0; padding: 0; from the body selector since you already defined this style rule in the universal selector (*) 😁.box-sizing: border-box; to your universal selector. Adding this to your universal selector will save you from a lot of unexpected layout and sizing issues 😅. This is because by default, properties such as padding and border are added to an element's width and this might make an element bigger but adding the box-sizing: border-box; rule will make sure that padding and border are included in an element's width and height 😁. You could checkout this article by w3schools to help you better understand the box model 😉
I guess that's all from me 😄. So sorry this got a bit lengthy 😅 just wanted to make sure you don't run into any issues when creating your project and also help make you sure your projects are more accessible 💪. Hope this helps 😇. Once again congrats on completing this challenge 🎉🎉Marked as helpful
@maximkatut
Submitted
Tried a different approach to my last challenge, Next.js with TS and tailwind css. I struggled with getting the infinite scroll working with query search and card filters. Also has some issue to get dark mode working with NextJS and localStorage, because render happens on server side, there is no window object access, useEffect helps. Also tried a lot of new things, such as Zustand - state management, infiniteScroll component, Nprogress
@jonathan401
Posted
Congrats on completing this challenge 🎉. I have one suggestion ☺️ (I'm still a beginner 😄, so you could take this suggestion from a user's perspective ☺️). You could consider making the navigation bar fixed since this app has the infinite scroll functionality. This was because when I checked the app out, after scrolling down for some time, I wanted to toggle the dark mode but I had to scroll back up since the navigation bar was at the very top of the app (it took a while for me to get back to the top of the app 😅). That's just my observation/suggestion by the way. I hope this helps 😁. Congrats once again on completing the challenge 🎉
@vanzasetia
Submitted
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
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!
@jonathan401
Posted
This was a fantastic solution. I learnt a lot. I'm still working on this challenge now and the little note you added about not focusing much on achieving pixel perfection was a great tip for me because I've been struggling to make my solution match perfectly with the design 😄. Could you recommend any resource that'll make me better at making my projects more accessible? Because there just seems to be a whole lot of rules in making our projects more accessible 😁.
@davedove86
Submitted
@jonathan401
Posted
Congrats on completing this challenge 🎉 . You did a really good job 😇.
<main></main> element instead of < div class="container"></div> element😉. Once again, beautiful work 👍☺️. Happy coding 🎉