@ShubhamDRajSubmitted 3 months ago
What are you most proud of, and what would you do differently next time?
Finishing the project within 1.5hrs. Not bragging but I'm really proud of this. Took a lot of effort to reach here. :)
uzainmalik123
@uzainmalik123All comments
- @uzainmalik123Posted 3 months ago
its pretty flipping good its exactly the same but you wrote i finished it under 1.5hrs so i think you did it in 1.5hrs i could be wrong but that's not something you can brag about you know this is the simplest thing here should have taken you not more than 10 minutes.
No offence.
0 - @methane-jsSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am basically proud because I have successfully used the CSS Flex to make this project
What challenges did you encounter, and how did you overcome them?I encountered the challenge to make the 5 social medias separated from the main area.
But when I applied a padding in the area, it was solved.
What specific areas of your project would you like help with?Please tell me if there is any better way to make the 5 social media names separated from the main area.
@uzainmalik123Posted 3 months agoyou just have one container and all the stuff in it you can separate the social media link and the upper content and just flex box to make it simpler and it would suggest use gap with flex box it really helps leave margin as a last option where no flex properties can be used.
0 - @haleemahpopoolaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
What I’m proud of: I’m really proud of how I implemented responsive design to ensure the webpage looks great on all devices. My use of CSS Flexbox also turned out more organized and intuitive than I expected!
What I’d do differently next time: Next time, I’d plan my structure more carefully before jumping into the code to avoid rewriting parts later. I’d also like to experiment with adding more animations or transitions to enhance interactivity.
What challenges did you encounter, and how did you overcome them?Challenges I faced:
Responsive Design: Making the layout work seamlessly on smaller screens was harder than I expected. I struggled with handling overlapping elements and ensuring proper spacing. Styling Consistency: Managing a consistent look and feel across the webpage became tricky as the styles grew. I realized I was repeating code unnecessarily.
What specific areas of your project would you like help with?I’d like help improving the responsiveness of my design. While I managed to make the layout work on most screen sizes, there are a few odd issues, like elements not aligning properly on smaller devices.
- @arthur-scheveySubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
This was a tougher one and things are starting to get more complicated, overall I think it is more accurate than I had hoped.
What challenges did you encounter, and how did you overcome them?I got to learn about a few new properties for elements I don't use much. Notably the table and (un)ordered lists and list items. For example
What specific areas of your project would you like help with?table-layoutandborder-collapse.I'm really struggling with the recipe image for the mobile layout. I'm not sure how to make it take up the full width because the padding is in the way, but I can't reasonably get rid of the padding without restructuring the HTML, so I suspect I didn't structure the HTML adequately. I would appreciate advice on this.
@uzainmalik123Posted 3 months agoi mean you could just split it into two containers the image and the content use flex-direction column and set the image container width and height and just put the image as a background don't use a image tag.
0 - @vardhanfSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
i find it difficult to deploy this React project using vite and githubpages, and resolving the image not showing case but finally i did by myself by taking more time. but finally i completed my first challenge using react
What challenges did you encounter, and how did you overcome them?i find it difficult to deploy this React project using vite and githubpages, and resolving the image not showing case but finally i did by myself by taking more time , using chatgpt i ovecomed by installing
To deploy react project using vite: npm install gh-pages --save-dev; adding base in vite, scripts in package.json; npm run build, npm run deploy.
after deploying i cant see images changed some url sources and ten finally resolved
What specific areas of your project would you like help with?i would like to prefer any best are good practices in styling for now mostly, i added styles in index.css u can see once.
And i am feeling difficulty while adding colors unable too choose correctly.
if u care and help me thank u for it.
@uzainmalik123Posted 3 months agoits pretty good just adjust the padding and idk why you have set a margin of 20px and auto to the card you didn't need to do that its already centered and i would say that use margin as a last option first try something else and the color are given to you in the style guide file use those you have messed up the grey color its too light.
0 - @ophintherainSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
After I have basically done the style, I also did some size scaling, and as I keep scaling, the elements inside will also scale. I also made some semantic tags to better structure the HTML, and I hope I used them correctly.
What challenges did you encounter, and how did you overcome them?The overall situation is relatively smooth, or maybe it is because I don't have many ideas and don't develop them well.
What specific areas of your project would you like help with?When it shrinks, the text in the middle part of social media will shift upward. At the beginning, I used padding and height to adjust its position, but after it shrinks, it seems that I can't adjust it through padding (there is no change). What should I do?
@uzainmalik123Posted 3 months agoResponsiveness is a big piece of problem and you need to write perfect CSS to get the perfect results you are looking for as for the text going upwards problem i would suggest to never give the card any width just set it to max-content or just don't set it what i most do is set it to max-content and give it the appropriate padding and then give widths to the stuff inside the card what this does is it does not shrink or displace anything inside the card and if you use something like clamp with padding your CSS will look better with a lot less code and a lot more results.
0 - @mlopezlSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of the progress I’ve made. A year ago, I couldn’t have completed a page like this. While I understand it’s a simple project, being able to finish it shows just how much I’ve improved in the past year. There’s still a long way to go, but I’m committed to continuing my journey and improving step by step.
What challenges did you encounter, and how did you overcome them?It was my first time using BEM, and although I started without a clear structure, adopting it midway greatly improved the organization, readability, and maintainability of my code.
What specific areas of your project would you like help with?Honestly, I’m not too sure. I think the page looks pretty close to the design, but I know there’s probably a better way to do it. I’m totally open to feedback and ready to keep learning!
@uzainmalik123Posted 3 months agoThe page looks pretty close but it was not supposed to be a full page it should have been inside a box but still it looks good just need to improve on your layout. Look at what you need to make and just imagine them as boxes i am sure you know about flex boxes if you just do a little more tinkering you could figure out the right layout for the right stuff.
0 - P@DeuziSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
i made use of the the source tag and that helped the images switch when the screen increase for the desktop and mobile screen image, so happy i learnt this
What challenges did you encounter, and how did you overcome them?switching the two images in the file cause there are two images for desktop and mobile, but then i searched and read about source tag and it help me switch between the different images in different screen sizes and also have a fallback image incase non of the screen sizes are met , it was a great learning experience
What specific areas of your project would you like help with?probably grid (aligning stuff properly)
@uzainmalik123Posted 3 months agouse grid on some complex stuff you have used flex that is fine i would say that use gap with flex that would be perfect for aligning stuff.
and btw my name is short for also uzi i use it in games.
Marked as helpful0
