RyotoX• 30
@RyotoX
Submitted
What challenges did you encounter, and how did you overcome them?
had difficulty styling the svg so i converted it to png
Salva
@salva-it
All comments
- Salva• 250
@salva-it
Posted
Congratulations! I have some suggestions for improvement:
To ensure the design displays correctly on different platforms, make it responsive and start from the mobile version.
To remove default values margin , padding, border, box-sizing, ...., use a CSS reset.
Use CSS variables (root) to manage colors effectively.
For font sizes, it is more efficient to use clamp() units to ensure responsiveness.
Good luck!
1 - Grimm-N• 150
@Grimm-N
Submitted
What are you most proud of, and what would you do differently next time?
Overall, I'm quite happy with the result. It was an interesting challenge, and I think I managed to achieve what I set out to do. I’m really eager to get feedback on this work—any comments or suggestions would be greatly appreciated!
What challenges did you encounter, and how did you overcome them?
What was challenging? Well, adapting the mobile design turned into quite the adventure! It felt like playing a game where I was the character trying different strategies to find the ultimate solution. Imagine a game where every level is just tweaking image alignments and padding—except with fewer dragons and more CSS. It was both a fun challenge and a rewarding puzzle!
What specific areas of your project would you like help with?
I'm looking for guidance on how to align images within a restricted visible area. Specifically, I need to know how to crop images in a specific part of the image, not just centered or aligned with the top or bottom edge. Any tips or techniques for this would be greatly appreciated!
Salva• 250@salva-it
Posted
Congratulations! I have a few suggestions for improvement:
It's better to start the design from the mobile version.
Use CSS variables (root) for color management.
To display images more optimally, use the <picture> tag in HTML.
For font sizes, using clamp() units is more efficient for responsiveness regarding font size.
You can use $ instead of the direct $ symbol to ensure that all browsers display it correctly.
good luck
Marked as helpful
1 - Miguel Alvarez• 70
@Ghosthard117
Submitted
Salva• 250@salva-it
Posted
Very well done! Congratulations. Your code is well-structured, and just a few small changes can improve its performance.
Instead of using @import in the CSS file, you can use the Google Fonts link in the HTML file.
Using <picture> and relative units can help improve performance and responsiveness.
To display images on different devices, use the <source> tag in the <picture> file. This allows you to load different images based on the user device's characteristics (such as screen width). The browser decides which image to load and display based on conditions (e.g., screen size). Using this tag ensures that only the appropriate image is downloaded, which helps improve loading speed and user experience.
You can use $ instead of the direct $ symbol to ensure that all browsers display it correctly.
Consider adding a transition for the mouse hover to allow the color change to happen smoothly.
good luck
0 @fernandatollotti
Submitted
What are you most proud of, and what would you do differently next time?
The project was interesting because I focused on writing concise CSS code and avoiding redundancies, aiming to make future maintenance easier.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was finding ways to make the code cleaner. I applied programming principles to simplify the code, creating unique classes and tags for recurring elements.
What specific areas of your project would you like help with?
I am very satisfied with the outcome of the project and invite anyone to contribute with constructive feedback. I believe that knowledge exchange is essential for continuous improvement.
Salva• 250@salva-it
Posted
Congratulations!
Your HTML code is well-structured and the use of semantic tags is excellent. Additionally, your CSS code is well-organized, and the use of variables for colors and typography is outstanding. Overall, the layout and design are excellent and the project is displayed correctly in a responsive manner.
good luck
Marked as helpful
0- AureLiee1004• 10
@AureLiee1004
Submitted
Salva• 250@salva-it
Posted
Congratulations
-
The code is generally good but could be improved with a few small changes
-
First, I suggest you put the <meta> in the top part of the <head>, this will make the browser process the viewport and charset tags first.
-
Alternative text Alt is empty for QR-code It is better to consider a text that will use this alternative text if the image is not loaded.
-
you use semantic code insted <div>
-
it is better you use google font google in html file insted css code
-
Head tags <h1> <h2> <h3> ... <h6> are very important in SEO, make sure you use these tags hierarchically In this project, you can put the main title in the <h1> instead of <h2>
-
your project isn't responsive it is better design responsive To display correctly on different platforms
good luck
0 -
- Ramon-Alvez• 130
@Ramon-Alvez
Submitted
What challenges did you encounter, and how did you overcome them?
When I thought about the structure of the nav bar I used lists with links, and styled the hover on the list, it worked, but the link only worked when I clicked exactly where it was written, it wasn't what I wanted.
After trying to solve it using this structure, I thought about changing things and replaced the main structure with buttons, in fact it was the same thing, it just had a button inside the link, the styling ended up flowing much easier than before and I was happy with the result
So I looked on YouTube at someone's solution to see how similar it was to mine, it turned out that in the video the person had done it the same way I did it the first time, so I decided to try again, I removed the buttons and tried to style it by list again, after trying a lot I really couldn't get the link to work together with the hover in the list, so I decided to go back to the buttons and it ended up looking like this.
Basically, that's why it took me longer than I thought.
What specific areas of your project would you like help with?
Well, the nav buttons.
Personally, I really liked how it turned out, I believe there may be a more professional way of doing this but as I said in the README, this was my solution and I'm grateful to receive feedback on what I could do differently.
Salva• 250@salva-it
Posted
Congratulations Your code is very well written and the structure is clean. I have a few small tips that could help improve further
Using the buttons: The buttons inside the links don't seem necessary. Because the links themselves are clickable on their own. You can skip the buttons and apply the buttons' CSS classes to the links.
Suggest to use rem instead of px
It is better to design the project in a responsive manner so that it can be displayed correctly on all platforms.
good luck
Marked as helpful
1 @Vaibhav-Kumar-K-R
Submitted
Salva• 250@salva-it
Posted
Congratulations on completing this challenge
I suggest placing your CSS code in a separate file like style.css.
In your code, you can use semantic code. Instead of using generic div tags, use semantic tags like <main>, <section>,<header>, and <figure> to improve accessibility and SEO.
It’s better to use the rem unit instead of px for sizing.
It is crucial to design the project to be responsive so that it displays correctly across different platforms. It’s recommended to design the project with responsiveness in mind.
good luck
0- Mario Kreitz• 200
@mariokreitz
Submitted
Salva• 250@salva-it
Posted
congratulations on completing this challenge
Great use of css variable to manage and organize colors as well as css rest
Some suggestions for improvement
It is better to use the semantic code <header><main><section><article><footer>
It is better to use the Google font link in the html file
The project is not designed for responsive. It is important that the project is displayed correctly on different platforms. To check the project in a responsive way, you can use the inspect tools in the browser.
To solve the problem of text is not in the center. Design comparison There is a button create new screenshot. Click on it to display a new screenshot of the project.
good luck
Marked as helpful
1 - Rivacust• 10
@Rivacust
Submitted
What are you most proud of, and what would you do differently next time?
"I’m most proud of the clean and minimalistic design I was able to achieve with this project. The layout effectively highlights the QR code, which is the focal point, and the text complements it well without being overwhelming."If I were to do this project again, I would focus on enhancing accessibility and improving performance. For instance, I would add more descriptive alt text to the QR code image to make it more accessible to screen readers.
What challenges did you encounter, and how did you overcome them?
"One of the challenges I encountered was ensuring that the design remained responsive and visually appealing across various screen sizes. Initially, the layout looked great on smaller screens, but it appeared too narrow and awkward on larger displays.To overcome this, I experimented with different width percentages and media queries. By adjusting the container's width and font sizes based on the screen size, I was able to create a layout that looks good on both small and large screens.
What specific areas of your project would you like help with?
Responsiveness: Although I implemented media queries to adjust the layout for different screen sizes, I’m still not entirely confident that the design is fully optimized for all devices, especially very large screens or tablets in landscape mode. I would appreciate feedback on how to further improve responsiveness and make the layout more adaptable.
Accessibility: I’ve included basic alt text for images and ensured color contrast, but I’m aware that accessibility involves much more. I’d like advice on additional best practices for making the component more accessible to users with disabilities, such as keyboard navigation or screen reader compatibility.
Salva• 250@salva-it
Posted
Congratulations on your effort to complete this challenge
Feedback on any progress
For better organization it is better to move the css files to an external style sheet
You used the family font in the style, but you forgot to call the Google font link in the <head> of the site
There is a typo in the <h4> style changeheight:6pc; to px Of course, it is suggested to use rem variable unit to improve acceptability and responsive design
Use semantic HTML tags such as <header>, <main> and <footer> to improve SEO and code organization.
By using the Inspect tool for responsive design, you can identify issues that exist on different devices and do better.
good luck
0 @Cosaldi
Submitted
Salva• 250@salva-it
Posted
Congratulations to you for completing this challenge
I suggest using the height: 100vh; property to create full-page designs
body { height: 100vh; Screen: flexible; justify-content: center; align-items: center; background color: #333; Color: #fff; }
To use Google font, it is recommended to put the Google font link in the html file
good luck
0- P
@gustavo2023
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud to say that I managed to build this project fairly quickly in comparison to the previous two challenges, especially considering that this time I didn't use the Figma design. From the structure of the HTML to the styling using CSS, everything went quite smoothly.
What challenges did you encounter, and how did you overcome them?
There wasn't any particular challenge, except making the
elements clickable. I had to make theelements occupy the same space as the list items to solve that problem.What specific areas of your project would you like help with?
Feedback on any improvements I can make whether is in the HTML structure or the way I styled the elements is more than welcome. Any feedback on accessibility improvements or things I am missing currently would be useful as well.
Salva• 250@salva-it
Posted
Your code is well written and well structured. I suggested that the <footer> tag should be placed inside the <main> tag in your code. The closing <footer> and <main> tags seem to be misplaced In general, your codes are very good, congratulations
Marked as helpful
0 - ShahddElsayed• 80
@ShahddElsayed
Submitted
Salva• 250@salva-it
Posted
Congratulations my dear friend for participating in the challenge Your project needs to be modified
First, upload the image file to git so that the images can be displayed in the browser
We don't have a tag called <p2>, change <p>
I suggest you use css reset
In your code, you can use semantic code instead of using generic div tags
Marked as helpful
0
