Great job! Sematic HTML looks okay, might want to look more into it so you can feel more confident when using it. The layout is great, great touch with the 3 media queries. The mobile version at least in my opinion could use a max-width set to something lower. Very good separation of logic with the SASS. Even for a small project as this it very nice to see order in good shape. There aren't any considerable differences. Your purple testimonial's quote should have a different opacity and the box shadow seems a little bit more than needed. All minor stuff.
Keep going!
I'm proud of my ability to effectively use HTML and CSS to create a clean and responsive layout for the QR code component. The final product meets the design specifications and is visually appealing.
What challenges did you encounter, and how did you overcome them?Initially, I struggled with aligning the QR code image, title, and description to create a visually appealing layout. Ensuring everything was centered and looked good on different screen sizes was tricky.
The QR code image did not display properly on various devices, either being too large or too small, which affected the overall look of the component.
I initially encountered issues with linking my CSS file to the HTML document, which resulted in styles not being applied as expected.
Great solution! Congrats on your first submission!
I couldn't check the code on github. Just in case make sure to add alt to your image, use a sematic HTML tag and look into dynamic size units such as em and rem instead of px.
Keep at it!
At first, because of the weird positioning of the background and the calculator, I was going to use absolute positioning on the calculator section. But it got too cumbersome and annoying to manage for each screen size, I ended up making the background absolute instead of the calculator, probably the better way.
The last section looked pretty intimidating. Using a grid with 12 columns may not be the optimal answer, but it worked out... well enough?
Very impressive! Everything looks great!
Here are my suggestions for improvements:
I think the 12 column grid looks awesome, don't touch it :) Size wise things are great and the code is readable.
Great job overall, keep going!
My java skills improved, learned more about clamp and don't using height
Great job!
I barely have anything to say. Here is what I came up with:
Great job overall! Very impressive scss and solution, keep going!
Instead of just directly using htm, css and js. I tried writing thr code in typescript and scss and compiling them into Js and css using webpack. Doing so improved my knowledge in not only webpack but also in dynamic creation and querying of languages using typescript.
What challenges did you encounter, and how did you overcome them?I faced some issues due to the relative path of the image and mobile view.
What specific areas of your project would you like help with?Like I mentioned above, I faced some issues eth mobile view. So kindly provide suggestions and tips if any on not only mobile view but also overall. Also, is the way I applied mobile styles correct?
Great Job!
Here are some ideas for improvements:
I am sorry if I didn't give you a better direction. Glad to hear that you learned a lot from this experiment. I am not sure if it is a common practice to write everything through code but since you had fun I guess everything is alright :)
Best regards, keep up the good work!
Well just proud i did went harder than the last time, and probably would go even harder next time
What challenges did you encounter, and how did you overcome them?the toggle part was one of the hardest part for me because i am still new but somehow i did went pass it, follow by managing the useState, i know i need to improve more on this aspect just a very slow process for me.
What specific areas of your project would you like help with?managing useState and creating toggles to pop out a content
Great work! Very impressive work with the Javascript
Here are some ideas to look into
Great work over all!
Learning how to setup a bento grid with tailwind.
What challenges did you encounter, and how did you overcome them?the desktop layout and particularly the positioning of some of the images.
What specific areas of your project would you like help with?any feedback is appreciated.
Great job overall!
Here are some small improvements:
Awesome job, I haven't touched react and still was able to navigate and find what I needed to look into. Size wise things are great, sematic HTML is on point. I myself am trying to move away from tailwind and switch to scss in order to not have to have too much lines in the html.
Keep going!
Great Job!
Here is just a small thing to look into:
Everything else is as good as it gets. Size, fonts. Keep going!
Great solution!
Here are some tips:
Keep going! Best regards!
I am really proud of completing this challenge and achieving a design that closely matches the original. Next time, I will focus on avoiding unnecessary classes and organizing my code in a more structured and efficient way.
What challenges did you encounter, and how did you overcome them?One challenge I faced was ensuring that the page looked consistent across different devices and screen sizes. I overcame this by using Media Queries and Bootstrap's grid system to create a responsive layout.
What specific areas of your project would you like help with?Are there any improvements I can make to the overall structure of my HTML and CSS? How can I make my code cleaner and more maintainable?
Are there any better practices I should follow to ensure the page is fully responsive on all devices? Is there anything I can improve with my use of media queries?
Is it beneficial to use frameworks for small-scale projects, or should I focus on building everything from scratch?
Great work overall! I could not see sematic HTML tags being used. The code is readable from what I can see, haven't used bootstrap for the challenges but things look good.
Here as some suggestions:
Great Job overall. Keep going!
The main challenge I encountered was figuring out how to distribute the display blocks as the screen size decreased. Initially, I used Flexbox as the foundation, but I found it difficult to manage the layout effectively when the screen size shrank. After considering various options, I ultimately transitioned to using CSS Grid. This allowed me to stack the elements in a single column in a more efficient way, simplifying the layout management as the screen size adjusted.
The Desktop Version is perfect! The mobile one though can use some work as it's not quite like the design. Still great work. The solution uses sematic html, code and folders are well structured and looks reusable.
Yes. It is accessible, some minor padding improvements can be made as well as text sizing. The layout if perfect in terms of size. The code is readable even for someone who hasn't touched vite and React. It is very close to the design with minor flows, well done!
I am so happy that I finished this challenge. I have learned Tailwind CSS Grid, something that was completely new to me.
Yes. Yes, there is a small problem with space between the price and the discount price in the mobile view and it could use a little more padding in general. Size wise everything is okay. The Code is readable, I am just still kind of new to css in general and it's hard to for me get why there are so many overwrites in the css style sheet. It is very much like the Design, well done!
The Solution does not contain sematic html. The site is accessible but the color palette is way off from the design. In terms of size it's close to the design but only for the desktop version, for mobile and other resolutions the layout is not in order. It's easy to read, can be reused and is structured. Yes.
The hardest part was the responsiveness of the website. I did my best although the current solution is not optimized for responsiveness.
What challenges did you encounter, and how did you overcome them?THE RESPONSIVE WEB DESIGN
What specific areas of your project would you like help with?Please give me some recommendations on how to improve my responsive design thinking.
1 Yes. 2 It is, the colors, fonts are a bit off. Hovering on the button doesn't do do anything, but if the user didn't have the design this is fine. 3 Size is somewhat okay. The fonts are a bit larger than the design 4 Probably hard to be reused, it's a bit hard for me read all that is going on there 5 around 30% of a difference
Perfect styling. Sematic HTML. Minimal size differences. Exactly as the design! Solution is as close it gets to the design.
Does the solution include semantic HTML? -Yes. Is it accessible, and what improvements could be made? -Its smaller than the design. Does the layout look good on a range of screen sizes? -Yes. Is the code well-structured, readable, and reusable? -Yes. Does the solution differ considerably from the design? -30% diference.
