@morski13
What are you most proud of, and what would you do differently next time?
I finally got a hand on the CSS Grid custom width and height desing.
Latest solutions
Resposive four card feature section using css grid
Submitted 5 months agoAny feedback on optimizing my approach would be appreciated.
product-preview-card-component
Submitted 5 months agoI would like help with improving my responsive design techniques. While I was able to switch images between mobile and desktop, I feel there might be more efficient ways to handle it.
I'm also looking for feedback on my class naming and HTML structure. I want to ensure that my code follows best practices for readability and maintainability.
If anyone has suggestions on how to better organize my CSS or optimize my layout, I’d love to hear them!nft-preview-card-component
Submitted 5 months agoI’d like feedback on:
- Optimizing pseudo-elements: Are there better ways to handle ::after effects without affecting layout?
- Performance: Does this approach impact rendering performance in larger projects?
- Scalability: How can I make this reusable for multiple images with minimal CSS?
Simple Omelette Recipe
Submitted 5 months agoi like to hear other way to style tables and i use media query i wanna se if there is to make it responsive and optimized
Resnposive Social links profile page
Submitted 5 months agoI want to get more comfortable with positioning elements efficiently. Specifically, I’d like to improve my understanding of different layout techniques like flexbox, grid, and positioning to handle alignment challenges more smoothly. Any tips or best practices for structuring CSS layouts would be really helpful!
Latest comments
- @chouiamohammed
looks great 375px is a bit to early for media query
- @thejas2246What specific areas of your project would you like help with?
Feel free to share your feedback!
@chouiamohammedlooks great just for more clear code and readable you could seperate css from html and for semetic html use one h1 tag
- @Abu-sid07@chouiamohammed
I really like how you styled the images directly in CSS! It keeps the HTML clean and makes it easier to manage styles globally.
You might also consider using the <picture> tag with max-width to handle responsive images. This approach can help reduce the amount of CSS needed and improve flexibility for different screen sizes.
- @QashtekWhat are you most proud of, and what would you do differently next time?
I honestly just want to get my hands dirty as quickly as possible. This particular project was no challenge at all for me because I have been building more complex UIs for a while but this time I want to immerse myself in Frontend mentor projects as part of my learning.
What challenges did you encounter, and how did you overcome them?Maybe a little challenge with the media query, maybe just a little
What specific areas of your project would you like help with?I would like a professional constructive criticism of my code and the overall project, with possible solutions or improvements.
@chouiamohammedseparate css from the html
for more clear code no need fro media query you can just use max width
for the card and you center the card by using display flex or grid on the card - @brownsonjoy1811What are you most proud of, and what would you do differently next time?
I am proud to have completed this project despite the challenges I faced, especially with GitHub and deployment.
Next time, I would focus on improving my workflow by properly structuring my commits and handling Git more efficiently to avoid unnecessary errors. I would also spend more time refining my CSS for better responsiveness and aesthetics.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was getting my project properly uploaded and deployed using GitHub. Initially, I had difficulty pushing my files and setting up the repository correctly. I also struggled with making direct changes to GitHub and figuring out how to delete files and repositories. Additionally, I had trouble generating the correct repository URL and setting up a live preview link.
To overcome these issues, I researched Git commands, watched tutorials, and explored GitHub's settings thoroughly. I also learned about GitHub Pages for deployment, which helped me successfully generate a live site URL for my project. This experience strengthened my understanding of version control and project hosting.
What specific areas of your project would you like help with?I would appreciate feedback on my project’s overall structure, responsiveness, and code efficiency.
@chouiamohammedfirst of all i like the personnel touch
for more readable code you can separate HTML from the CSS file into two different files
instead of h3 you can use h1 because its the main title and you can add main footer just for more semantic html and get comfortable with it
for responsive you can play with display flex or grid set min max width center and see what you like moreMarked as helpful - P@omoarunaWhat are you most proud of, and what would you do differently next time?
I'm proud of how quickly I did this, in comparison to the other practice projects I've done. The page is also somewhat responsive, and unfortunately I'm not entirely sure why but I think its a step forward and in the right direction. Next time I do want to do less "hard-coding". It shows some gaps in knowledge.
What challenges did you encounter, and how did you overcome them?Aligning the QR code's content was definitely not so easy for me, I got a little frustrated as I had already mapped out how I would go about the solution. I started over with just my base styles and decided to take things slow, I realized my mistake was adding a div container to cover the body of the page.
What specific areas of your project would you like help with?I find manipulating widths of a bunch of texts difficult; I want to learn how to override the default <p> behaviour from filling it's container width to having a width based in the content in it. Simply I want my text to be able to wrap down instead of spreading out as far as possible.
@chouiamohammedfirst of all design looks great for manipulating p elements u can style it directly with p or add inline class to it <p class ="*****">***<p> and style that class it will override the p styles because it has higher specificity i mostly do normal div for layout and for specific styling i do inline class
Marked as helpful
