@yefreescoding
Uche Ofatu
@Macnelson9All comments
- @Macnelson9
Wow, this is so cool. Find it amazing that you had to implement a light mode for the design, well done.
- @Macnelson9What are you most proud of, and what would you do differently next time?
I am most proud of myself for completing this challenge.
What challenges did you encounter, and how did you overcome them?I encountered a challenge with arranging the image and the text side by side dynamically.
What specific areas of your project would you like help with?I'd like help with the UI.
@Macnelson9Thank you for your feedback. I'll improve the app using your feedback.
- P@Franciscoj91What are you most proud of, and what would you do differently next time?
Work in a more orderly way, compared to previous challenges.
I was able to quickly investigate and resolve the doubts I had.
What challenges did you encounter, and how did you overcome them?My first challenge was to consider the structure of the challenge, to avoid having to rethink halfway through whether it could work or not.
The list structure gave me some doubts, in order to use the icons, I investigated how to modify them with CSS, but I found restrictions when wanting to adjust the position. I finished by adjusting the position with flex, inside the
litag. I did not find any article that advised against solving this problem in this way.Email validation is done with REGEX.
What specific areas of your project would you like help with?Any suggestion will be well received.
I would appreciate any opportunity for improvement or any recommendations.
@Macnelson9This solution of yours is really good. Think you should review mine if you can. I'd appreciate your feedback.
- @tareqiin@Macnelson9
@tareqiin Very good job man. You did great, but your solution needs a little bit of help concerning the UI. You built the UI for the mobile screen alone without building for the desktop screen.
- @Alex-Archer-IWhat are you most proud of, and what would you do differently next time?
Well, I've fond an elegant solution for changing border color of the images in different color themes. To avoid creating additional classes for images I declared css variable on the theme classes. Not a big deal, but I'm glad to find this thing by myself.
What challenges did you encounter, and how did you overcome them?A have a challenge to figuring out how to render grid items without hardcoding their grid coordinates. I didn't overcame it. Shame on me.
What specific areas of your project would you like help with?If someone could give me a tip about dynamic generation layouts such this (especially without knowing a quantity of items at advance I would be more than happy =)
And, as always I open for every type of comments.
@Macnelson9You did very good my man. I don't know much yet to help you with your challenges, but I think I can recommend a series for you to check out and learn a thing or two about CSS grids. Interested??
- @Alex-Archer-IWhat are you most proud of, and what would you do differently next time?
I decided to practice the tailwind for this project. I'm proud that I practiced and learned something new. But I have a mixed feelings about tailwinds. But that's another story.
What challenges did you encounter, and how did you overcome them?Tailwind documentation is quite easy, so it was more a hitch than challenge, but nothing more fit in this category.
What specific areas of your project would you like help with?Open for any comments, as always.
@Macnelson9This is really cool man. I don't have much idea on tailwind CSS and all that but this looks really cool.
- @Alex-Archer-IWhat are you most proud of, and what would you do differently next time?
"What is done cannot be now amended."
William Shakespeare
What challenges did you encounter, and how did you overcome them?"In the middle of every difficulty lies opportunity."
Albert Einstein
What specific areas of your project would you like help with?"If you want happiness for a year, inherit a fortune. If you want happiness for a lifetime, help someone else."
Confucius
@Macnelson9I tested out your new app and it is so cool man!
- @GraceMCodes@Macnelson9
Hi there Grace! I see you've attempted the first challenge on frontend mentor and I'm super proud of you for attempting this challenge. I'm trying to look up your codes but It's returning a Page not found error, so I suggest you check on the repository. And finally, you should have attempted this challenge using the starter files provided which includes the QR code image and the color codes used in the project. You can always reach out for help, I'll be here. Thank you and Happy Coding!
- @Enedi-GodswillWhat are you most proud of, and what would you do differently next time?
I am most proud of the fact that i finally had the guts to make my first commit in Github and build my first website without assistance.
What challenges did you encounter, and how did you overcome them?The challenge I had was with committing my code to Github and also with being able to build the website using a desktop first approach, since that was how i learnt how to build websites.
What specific areas of your project would you like help with?At the moment, I am all right.
@Macnelson9Congratulations on completing your first challenge here on Frontend Mentor! Proud of you for that. I'm trying to preview your site but it isn't coming up, so I suggest you host the live site using GitHub pages as it is a bit straightforward and easy to upload the site there. Go to the repository for this solution on your github account, click on settings, on the left hand menu bar, select Pages from there, choose the pages source from none to main and give it a refresh, you should see the link to your new site. Thank you. You can ask me questions for clarification.
- @srivatsan-droidWhat are you most proud of, and what would you do differently next time?
Since its my first Project Learnt how to create a website according to the requirement given and also styling is difficult part which took most of my time so my plan is to improvise in styling next time
What challenges did you encounter, and how did you overcome them?First challenge is i was not able to get the box under which the image and the rest of the text goes into so used field set at first and then by styling itself i tried to come up with the solution Next Thing is alignment according to the design provided was tough so in this case tried adding padding at first with different outcome of number but then used margin property and justify content in css
What specific areas of your project would you like help with?i need help in the design part where i need to understand how can reduce the size of the box and come up with the exact match of the design and also how to add border at which place any clue to identify so it can be useful for me next time when i am trying something new
@Macnelson9Hey there! Congratulations on your completion of this challenge! I see your QR code image isn't displaying, I myself encountered this same issue too. What you need to do is to change the file path inside of your html that you are hosting the page from.
- @sayyedaaman2What are you most proud of, and what would you do differently next time?
Understand about font-face
What challenges did you encounter, and how did you overcome them?Custom Font-families
What specific areas of your project would you like help with?.
@Macnelson9Hey there! Congratulations on completing this challenge! I see that your text doesn't sit well with the original design and I believe that should be from the width of the right hand container, don't know how you wrote your html but reducing the width of the right hand card should work. And also, try to turn on flex wrap if you're using flexbox. Think that's all.
Marked as helpful - @RodrigoOsor1oWhat are you most proud of, and what would you do differently next time?
De haber encontrado soluciones al desarrollar esta tarjeta de presentación y la próxima vez creo que seria mas ordenado
What challenges did you encounter, and how did you overcome them?Uno de los desafíos que se me presentaron, fue acomodar los elementos y logre resolverlos realizando consultas en internet
What specific areas of your project would you like help with?En el maquetado y aplicación de clases
@Macnelson9Hey there! Congratulations on completing the challenge. I don't know if you can understand me but you can use display: flex to center the card in the middle of the page. Apply this to the body: body { display: flex flex-direction: column; justify-content: center; align-items: center; height: 100vh; }
And that should fix it. Happy Coding!
- @rvupmo33@Macnelson9
Beautiful solution. Only that your Simple Omelette Recipe header is black while the original design isn't. It's a color called dark charcoal with the hex code: #302d2c. I think you did really good. Keep going.
- @SaruMakesWhat are you most proud of, and what would you do differently next time?
I'm quite proud of how much I learned with this challenge. I took my time to research different concepts and topics, so that I felt that I knew what I was doing. I had to change and rewrite very few lines of code along the way.
I'm also proud of the work I put into the README file, which I filled out to the best of my ability (while also learning markdown/.md syntax). I'm very happy with how the hover transitions turned out as well as my custom CSS variables.
If you're curious to read more, there's a whole README in the Github repository with a lot more detail than I'm going to go into here.
What challenges did you encounter, and how did you overcome them?Honestly, there weren't many super difficult parts. I made sure to prepare for each thing I was about to work on, and when I wasn't quite sure about something, I simply studied some more.
The main challenge was implementing new concepts that I had never worked with before, like transitions and hover/active states, but I overcame that through research.
What specific areas of your project would you like help with?I'd love some feedback on my HTML structure, as I'm not entirely sure I got it set up in the most logical way.
Also, if there's anything in my HTML or CSS code that stands out to you as odd or some part that I can improve on, I'd love to know!
@Macnelson9Your solution is super cool! Wow! I'd love to connect with you. I like your animation, I don't know how to animate yet, but I'm looking to move into that next. I would like to be able to get some tips and tricks from you especially with the semantics part and the readme notes, if that's okay by you. thanks!
Marked as helpful - @J4NBIWhat specific areas of your project would you like help with?
I struggled with grid and the cards to fill the hole grid.
@Macnelson9Congratulations! you completed the challenge. That's what matters most. As for the other things, you can always go back to work on them, I am not too good with grids yet, but you can take a look at my code for better understanding.
- @BarrosLucasJavierWhat are you most proud of, and what would you do differently next time?
Nothing to comment on at the moment
What challenges did you encounter, and how did you overcome them?Nothing to comment on at the moment
What specific areas of your project would you like help with?Nothing to comment on at the moment
@Macnelson9Wow! You executed this to perfection. Congratulations. Can you guide me further on how to use CSS grid? Seems you know how to implement it very well.
- @BarrosLucasJavierWhat are you most proud of, and what would you do differently next time?
Nothing to comment on at the moment
What challenges did you encounter, and how did you overcome them?Nothing to comment on at the moment
What specific areas of your project would you like help with?Nothing to comment on at the moment
@Macnelson9Wow! Absolutely brilliant! You did really good. Please did you use CSS grid for this??
- @Alex-Archer-IWhat are you most proud of, and what would you do differently next time?
I added a simple pulsing animation for unread markers and event which marks notification as read when user hover mouse over them. Maybe it's a bit unnecessary. But still cool.
What challenges did you encounter, and how did you overcome them?I tried to implement dynamic render of the notifications. To do this, I made a class which contains render algorithm. But I couldn't figure out how to make it leaner. Guess I violated DRY rule a couple of times.
What specific areas of your project would you like help with?This project got me thinking how to make those notifications more accessible. How can I inform tools like screen readers about unread notifications? Should I add tag like "aria-label" to unread notification? Or, maybe to badge which display their number? I'm interested in any suggestions and opinions.
I didn't add aria tag for now cos as Aristotle said, "No ARIA is better than bad ARIA" (or it was Newton?).
Beside that any suggestions are welcomed.
@Macnelson9Great job Man!!
