@MahmoodHashem
What specific areas of your project would you like help with?
Any feedback is appreciated
why-not-phoenix
@why-not-phoenixAll comments
- @why-not-phoenix
Love your solution and all the extra features you added blew my mind Well done!
- P@brunagoncalvesWhat are you most proud of, and what would you do differently next time?
Having completed the challenge is a great victory.
What challenges did you encounter, and how did you overcome them?I still have some difficulties with HTML and JavaScript semantics. So to focus more in correct structuring and javascript, I chose to use TailwindCSS.
What specific areas of your project would you like help with?Any feedback that is constructive is welcome.
@why-not-phoenixHi Bruna. I really like your solution. It looks pixel perfect. How did you do that? Did you use the figma? I notice a key difference was that your picture was on the left side while the Design's picture is on the right. You can easily solve this with :
.section-newsletter { display: flex; flex-direction: row-reverse; }Also use a
:hoveron the btn to change the cursor to pointer and to change the color of the buttons when hovered on. There are different things that could've been done differently but I am really impressed with how you handled the challenge generally. Here's a link to my solution if you're interested: https://www.frontendmentor.io/solutions/mobile-first-responsive-newsletter-signup-page-REmgL-P-mwIt's not great but its something.
I also wanted to ask if there's a special app you used for your screenshot. Looks nice
Marked as helpful - P@welpmozWhat are you most proud of, and what would you do differently next time?
I feel confident making responsive layouts using CSS grid and media queries.
What challenges did you encounter, and how did you overcome them?Trying to modified the initial structure that I made is painful for me! I faced this hard coding and investing much effort adding additional CSS.
What specific areas of your project would you like help with?I need someone who help me with the transition from the success page to the form page.
Interactive Newsletter SignUp Responsive Page with Vanilla JS and CSS
#accessibility#pure-css#web-components#animation@why-not-phoenixYour solutions looks really good. I checked the preview site and I was surprised by how well you did. Well done!!!
- P@nikolasladicWhat are you most proud of, and what would you do differently next time?
Next time I will plan my HTML structure differently, as it is the foundation of making your like easier later on. JavaScript is my pain point but I think I've handled it well for first challange
@why-not-phoenixHi Great Job. Everything looks fine but the hover active states. Clicking on the icon on desktop gives a weird pop up you should look at. I know it's quite challenging getting the popovers to work. You could check out different resources like stackoverflow. Or you could make the click active state work for both small and large screens
- @klnrox001What are you most proud of, and what would you do differently next time?
I tried my best to recreate the design and using the basic knowledge I have of coding and CSS. I am a total beginner, so it took a while, but I hope I can get better at it with more practice.
What challenges did you encounter, and how did you overcome them?I learned more about utilizing 'flexbox' when trying to recreate the QR component design. I struggled to get the 'paragraph' font to a suitable size within the container. I found that with percentage, I could get to the closest 'font-size' as seen in the design. What really helped me was using Live Server. I would use Inspect and change things on there and once I was happy with what I saw, I added the changes to my code.
What specific areas of your project would you like help with?I think my code may be lengthy in CSS, so any feedback on what to do differently I would greatly appreciate.
@why-not-phoenixNah, looks good. Maybe reduce your font-sizes especially for your h1
- @Ad7905itya@why-not-phoenix
HI, great job with the design. Your background quote image seems to be rounded and when I clicked on the preview site on my pc it doesn't display correctly. Maybe that's just for me. Also on Mobile display, kira comes first which isn't right. Personal I made 2 divs, one with the first 4 cards and the last with kira. That way I was able to make a grid with both divs. FOr better understanding checkout my solution:
https://www.frontendmentor.io/solutions/mobile-first-testimonials-grid-section-with-flexbox-8-UsZahda1
- @adambeckercodesWhat are you most proud of, and what would you do differently next time?
I’m most proud of creating a clean and responsive recipe page with accessible features like semantic HTML, and focus-visible styles. The use of CSS variables made the styling consistent and easy to maintain, and the design adapts well to mobile and tablet devices.
What challenges did you encounter, and how did you overcome them?Responsiveness: Adjusting the layout for various screen sizes was tricky, especially balancing spacing and font scaling for mobile and tablet devices. I overcame this by using a mobile-first approach and testing with multiple media queries. Still there are some things which don't work as intended.
What specific areas of your project would you like help with?Feedback on adding animations or JavaScript for a more engaging experience would be great. Are there any specific features I could implement to make the page stand out?
Is there a more efficient way to build this kind of layout?
@why-not-phoenixHi dias!! Once again another near perfect solution. I have a few questions:
- In line 36 to 47, why did you have to specify
box-sizing: border-box;for the html? wouldn't it have same effect if it were* {box-sizing: border-box;}instead of inherit?
/* GENERAL */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }- What is the function of
body { height: 100vh; }? Wouldn't the content just overfow?
I probably have other questions but I am sure you're too busy for them. Great solution, looking forward to more of your solutions.
- In line 36 to 47, why did you have to specify
- @YOUSEF-ysfxjoWhat are you most proud of, and what would you do differently next time?
I’m most proud of successfully completing two web development projects, where I applied responsive design principles using HTML, CSS, and Tailwind CSS. I’m also proud of how I shared my progress on social media, receiving positive feedback that motivated me to keep pushing forward. Additionally, completing a KAUST course module this week shows that I am staying consistent with my learning goals, balancing both practical and theoretical aspects of my growth.
What would you do differently next time? Next time, I would focus more on refining the code after completing a project. I might spend additional time optimizing the performance of the website, such as:
Reducing load times Improving accessibility I also want to experiment more with JavaScript or other interactive elements to enhance the user experience. Lastly, I would allocate more time for in-depth exploration of advanced features in web development, like:
Animations Advanced grid layouts
@why-not-phoenixHi, Yousef, I just went through your site and it tested ok for responsiveness. I think you should be proud of yourself Going through your code I noticed there were some repetition e.g:
body{ margin: 0; padding:0; background-color: hsl(30, 38%, 92%); }Is that just a mistake or did you do that on purpose?
I also personally think your
@media (min-width: 1440px)could start at a lower min-width e.g for iPads etc with medium screen width.Thanks for sharing and goodluck
Marked as helpful - @Eya-ben-azizaWhat are you most proud of, and what would you do differently next time?
I am proud of delivering a result that is almost identical to the given design and that it is a smooth and responsive website.
What challenges did you encounter, and how did you overcome them?changing the layout as the screen size changes was a little bit challenging but with giving attention to details I managed to respect the given design
What specific areas of your project would you like help with?I would like some help with the responsive image, I failed in changing the image source when shifting from desktop to mobile. plus I couldn't find the right font-family for the price
@why-not-phoenixApart from a few dimension issues, this looks really good
- @TrEv0rRrRr@why-not-phoenix
Looks great. I guess only premium can get it looking exact based on dimensions.
- @LizunYuri@why-not-phoenix
Did you use Bootstrap? Still don't understand @font-face lol
- @TrEv0rRrRrWhat are you most proud of, and what would you do differently next time?
I know this is a simple exercise, but in my life I thought I would be able to use flex without getting stressed. I used it to position the profile picture and the username in the correct place, and also to center the card on the page. This is a big progress for me, and I hope I can continue like this.
What challenges did you encounter, and how did you overcome them?Unlike the exercise before, this was much easier and I didn't have a big problem while the realizing.
What specific areas of your project would you like help with?The way I centered the card in the page is correct? In this case it worked, because it was a simply card, but in a more complex scenary like a complete page, what are others forms to center elements in a page?
@why-not-phoenixYour code link is showing a 404
- @nazimansarii@why-not-phoenix
The font do not seem to match the one given in the challenge
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">``` You can use the code above to link. - @adambeckercodesWhat are you most proud of, and what would you do differently next time? What I'm Most Proud Of
I’m proud of creating clean, semantic, and accessible HTML, especially with elements like
What I Would Do Differently,, and ARIA labels. The skip link and responsive design make the project user-friendly, and I love how the pulse animation adds a modern touch. Organizing CSS with variables also made my styles reusable and professional.Next time, I’d focus more on optimizing the design for larger screens and testing accessibility with screen readers. I’d also experiment with more interactivity, like hover effects or JavaScript, and simplify my CSS for even better maintainability.
What challenges did you encounter, and how did you overcome them? Challenges I EncounteredOne of the challenges I faced was positioning the card in the exact center of the screen.
I solved this by using Flexbox on the `` element, setting
display: flex,justify-content: center, andalign-items: center. This allowed me to align the card both vertically and horizontally with minimal code. Additionally, I addedmin-height: 100vhto ensure the body always covered the full viewport height, making the centering consistent across different devices.This approach was simple and effective, and I’ll definitely use it again in future projects!
What specific areas of your project would you like help with? Areas I’d Like Help WithI’d really appreciate more feedback on accessibility, especially regarding how I can improve the user experience for those using screen readers or navigating with a keyboard. I’ve added ARIA labels, focus styles, and a skip link, but I’d like to know if there’s anything else I could refine or add.
Additionally, I’d love advice on my code structuring. While I tried to keep my CSS organized with variables and meaningful class names, I’m open to suggestions on how to make the code cleaner, more reusable, or easier to maintain.
Any insights would be super helpful—thank you! 😊
@why-not-phoenixLooks almost perfect!!! How'd you do it?
