@manuel-smSubmitted almost 4 years ago
Hi, this is my first challenge. I wanna know if there's anything I can change to improve my code. Any feedback would be appreciated.
Mansoor Roeen
@mansoor-roeen-glitchAll comments
- @mansoor-roeen-glitchPosted almost 4 years ago
Hi Manuel Santiago 👋, congratulations on your first submission!! Your solution look very nice.
I suggest.
- adding the background patterns, you could either add them as images to your html file and then give them a position of absolute or you could use the background property of css on your .body class element.
background: url(bg-pattern-left) no-repeat url(bg-pattern-right) no-repeat. background-position: top-left, bottom-right.
hopefully this was helpful!!! happy coding 🎉🎉
2 - @EnjegheOSubmitted almost 4 years ago
I would appreciate if I'm given suggestions on better ways to set the background images for the body and how I can use percentages instead of pixels to set the sizes and positions of the background images. Also, general feedback would be appreciated.
@mansoor-roeen-glitchPosted almost 4 years agohey Sharon 👋👋, welcome to the community and congratulations on your first submission.
I suggest.
- adding a max-width of 333px on your .card container.
Happy coding, 🎉🎉 keep it up!!!!
0 - @SaiAruneshSubmitted almost 4 years ago
How do I make the card responsive? I am a newbie any feedback is appreciated Thanks
@mansoor-roeen-glitchPosted almost 4 years agoHey Sai Arunesh, congratulation on your first submission. Great job on the challenge it looks pretty good.
I suggest, *referring to the styles guide before starting your challenge it will be provided to you inside the starters file.
Keep coding !!
1 - @0hyodorie0Submitted almost 4 years ago
Background images can't be load in Chrome but only in Firefox. Also I tried to use pseudo but it couldn't show images. So I copied and pasted background solution.
Any recommendation plz!
@mansoor-roeen-glitchPosted almost 4 years agohello Sondra Sohn, great job on the challenge !!! Your solution looks very nice!! Just take a look on the HTML issues from the report section and try fixing them. happy coding !!
0 - @Mohanad-HafizSubmitted almost 4 years ago
This is my first project I would really appreciate your feedback
@mansoor-roeen-glitchPosted almost 4 years agohey Mohanad, 👋👋 nice work with the challenge,
I suggest, *adding a max-width of 1200px to the .container class and giving it a width of 90%; *positioning the .container class to centre ; *Adding a few media queries to make it more responsive;
You can join the slack community by scrolling down!! it could be very helpful !! here is my solution for this challenge https://www.frontendmentor.io/solutions/html5-css-l0SNygaJJ
1 - @reks4Submitted almost 4 years ago
I did not figure it out very well but it works, if someone can tell me an easier method i would be grateful to you.
@mansoor-roeen-glitchPosted almost 4 years agohey Luca, 👋👋 good job!! hope you enjoyed the challenge!!
I suggest, -going through the styles-guide file before starting any challenge -using media queries and flex-box to make your solution more responsive
I highly recommend joining the slack community if you haven't yet scroll down to join the slack community !
link to my solution - https://www.frontendmentor.io/solutions/html5-css-l0SNygaJJ If you are completely new to front-end and web development in general best resource in my opinion could be www.freecodecamp.org -
happy coding and happy new year !! keep it up !! 👍👍🎉
0 - @HikmahxSubmitted almost 4 years ago
Unlike the other projects I've done, this one I feel like I add to individually style each of them for every media query. But I had fun doing so! Any feedback is welcome. Thank you!
@mansoor-roeen-glitchPosted almost 4 years agoI am not much familiar with this challenge but it looks and feels great!! nice job!
0 - @muchammadindra97Submitted almost 4 years ago
Hi guys, any feedback is appreciated!
Thanks!
@mansoor-roeen-glitchPosted almost 4 years agoHello Muhammad, nicely done it feels and looks good but there are some things that you could change to make it better .
#. Instead of changing layout of everything once the max-width reaches 1196px you should make everything smaller like font-size, images and icons and then you could change the layout with another media query when max-width is around 750px.
#. Inside the media query that you have made for mobile size devices you can set .container's width to 95% and max-width to 580px, this way your sections will not extend too much since max-width is set to 580px and they will be responsive if the size is less than 580px because width is set to 95%. this is a very nice trick that I always use give it a try
great job!! keep it up !
3 - @ksyksy815Submitted almost 4 years ago@mansoor-roeen-glitchPosted almost 4 years ago
Hello, nice page design ! but there are some problems with! you need to first of all try to hide all other answers when a link is clicked and just show the one that is clicked that way your page's height will not be affected if someone clicks on many question! then you should try to make it responsive for mobile and you can do that by completely changing the structure of your page or the container with some media queries! if you needed some help with that feel free to check our my solution! and good job keep it up!! my solution - https://www.frontendmentor.io/solutions/html-css-FCWUoauGV
0 - @Huy-jpgSubmitted almost 4 years ago@mansoor-roeen-glitchPosted almost 4 years ago
Ok good design and everything but there is problem with mobile design you may need to work on that and you should make all the other items hide their solution when one is clicked so that it doesn't affect the height of it. Feel free to check our my page and just apply some changes to your solution ! link to my solution - https://mansoor-roeen-glitch.github.io/basic-projects/faq-accordion-card
0
