Eu preciso estudar mais sobre layout flexível.
What challenges did you encounter, and how did you overcome them?Alinhamento do conteúdo e formatação da tabela. Consegui ajustar com a ajuda do chatGPT.
What specific areas of your project would you like help with?Design flexível, estrutura do conteúdo, tabela.
Here is my take on your project:
body element should never have a width as it should just take on the device width.Try following the learning path suggestions of completing challenges. The first on the list is the QR code. Having a good foundation on the smaller challenges will go a long way in assisting you to solve challenges like this one and even the bigger ones
figuring out the structuring was quite difficult, but I'm quite content with the result (other than the fact that it lacks semantic HTML5 code). I also think that my utilization of flexbox turned out pretty well at the end.
What challenges did you encounter, and how did you overcome them?Structuring was the main challenge, and organizing the elements so that they can be properly individually formatted.
What specific areas of your project would you like help with?The formatting of my code and if it's easy to read. I didn't really use semantic HTML5 code since it kept messing up my format so I'm not really sure how my readable my code actually is.
Hi Peepytoo
You have done well so far, here are some areas that you can have a look at:
main element which is responsible for the primary content of a webpage. The div with the id=div1 can be your main element and the other with the id=attribution can be the footer element <div id="publish">Published 21 Dec 2023</div> - this could have been a p element as well as the <div id="box2">Learning</div>alt="" but in all other cases the value should represent the message that is carried in the image.min-height: 100vh. I see that you used height: 100vh - which has its own limitation if you have a lot of content . The min-height: 100vh allows the content to scale up to exceed the 100vhclass for styles , using id is not what I would recommend as the id has a higher specificity.div1 . Instead of width: 384px which keeps the size fixed at 384px you can utilise max-width - that allows your container to grow up to a certain size (good for responsive design) and also using px is not the best option , use rem in most cases. The following article will explain some of the reasons Why you shouldn't use pixels for font-size. The height also should be ommited - the contents of the container should decide the height to avoid overflows as most of the time you won't know the size of the content or device that will be used.
classes in most of your styling.i will try to create a bigger website
What challenges did you encounter, and how did you overcome them?i use chat gpt
What specific areas of your project would you like help with?css
hi Iwuohacharles007
Please check the links for both your GitHub repository and the deployed site as they are both not accessible. Check the learning path if you are struggling with setting up your project or deploying . You can also use the Discord channel to ask for help.
I used HTML, CSS, and a bit of JavaScript to complete this challenge. 🔹 CSS Grid Layout was used to create a responsive and well-structured Bento Grid UI. 🔹 I also utilized Flexbox to properly align the content (text, buttons, and images) inside each box. 🔹 Images and styling were adjusted to match the original design preview as closely as possible.
What challenges did you encounter, and how did you overcome them?🔹 Adjusting image sizes and placement was the most challenging part because the original design had specific scaling and proportions for each image. 🔹 I had to experiment with grid-template-columns, flexbox, max-width, height, and object-fit to make the images look well-balanced. 🔹 Ensuring that the font sizes and button placements matched the original design was also tricky.
What specific areas of your project would you like help with?✅ I improved my CSS Grid skills, especially for responsive design. ✅ I learned how to scale and center images properly so that they match the reference design. ✅ In future projects, I will use CSS Variables and Utility Classes to make my code more reusable and maintainable. ✅ I will focus more on accessibility and ARIA attributes to make the UI more user-friendly and inclusive.
Hi nayyabaqib
I see that you are enjoying the challenges lately. Please take time to read the feedback that have been posted in the earlier challenges. They are basic things that you need to fix before moving on with other challenges. The same mistakes are being repeated in most if not all the challenges. To just name a few , here are some of them.
We are here to help you learn and have an awesome learning journey
I really proud on this project.. next time I will try my best.
What challenges did you encounter, and how did you overcome them?Responsive Design: Use Flexbox, Grid, and media queries for adaptability. State Management: Use React (Context API, Redux, or Zustand) for dynamic content. Performance: Optimize with lazy loading, compressed images, and caching. Accessibility: Follow WCAG, use semantic HTML, ARIA attributes. SEO: Implement meta tags, structured data, and SSR (Next.js). Cross-Browser Issues: Test with BrowserStack, use CSS resets. Security: Use OAuth, JWT, HTTPS, and validation for protection. API Handling: Manage errors with loading states, retries, and caching.
What specific areas of your project would you like help with?1️⃣ UI/UX Design – Improving layout, colors, typography, or user experience 2️⃣ Responsiveness – Fixing issues on different screen sizes 3️⃣ State Management – Handling user data, progress tracking, or authentication 4️⃣ Performance – Speed optimization, lazy loading, caching 5️⃣ API Integration – Fetching data, handling errors, authentication 6️⃣ SEO & Accessibility – Improving search rankings and usability
Hi saimasial-bit
Here are a few recommendation, some of them are more general
Here are some of the issues that I am talking about
separation of concerns. CSS should have it's own file as well as the HTML and JavaScript. At the moment all your code is just one file.HTML
main landmark elementfor attribute with value equal to the id of the input element associated with that label.CSS
width: 400px; . What this means is that the size of the container will remained fixed at 400px regardless of what device you use. That further means that on a device with a lesser screen size , some of the content will be cut off (not a good user experience). It it will be better to use max-width in cases as such and then setting a maximum value that should not be exceeded by the element but at the same time that allows the element to be smaller if need be.
