i'm proud of mastering responsive layout with flexbox and next time i'll write more clean scss code
What challenges did you encounter, and how did you overcome them?it was difficul to center the component on the center of the page . i overcame by using flexbox
What specific areas of your project would you like help with?i would like to know how can i improve my code
Great start!, my recommendation is to apply semantic html; Despite being an apparently simple exercise, it is an opportunity to apply all the techniques and knowledge of html and css, with semantic html you will have a more functional structure identifying important sections, which will also allow you to organize and get the most out of flexbox in addition to being the start to scale to responsive sites. Very good, keep going!!
I am proud to finish the challenge, I learned more about CSS specifically 'grid' and 'flex', I used these elements to section and position the content. I also learned how to use Chrome's "inspect" tool to improve the styling of elements. I would like to improve the structure of the styles and elements.
What specific areas of your project would you like help with?good practices for HTML and CSS
Good job! The exercise is well underway and the effort is noticeable. With an extra touch of animation or movement, I think you could improve it
I am particularly proud of the responsive layout of my project. By using Flexbox and relative units, I was able to create a design that adapts seamlessly to different screen sizes. Additionally, leveraging CSS variables for managing colors and fonts made the code much cleaner and easier to maintain.
I learned the importance of good accessibility, particularly by using descriptive alt attributes for images, which enhances the experience for users with screen readers. I also deepened my understanding of font management and content fluidity with CSS properties like box-sizing and overflow-wrap.
Next time, I would focus more on improving accessibility and optimizing performance, such as reducing image sizes and avoiding the use of experimental CSS properties. I would also explore advanced techniques for text rendering to ensure an optimal user experience across all devices.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was ensuring the responsive design worked seamlessly across various devices. Initially, certain elements were misaligned or did not scale properly, leading to an inconsistent user experience.
To overcome this, I implemented CSS Flexbox for the layout, allowing for a more adaptable arrangement of elements. I also utilized relative units like percentages and rem for sizing, which helped maintain proportions across different screen sizes. By testing the design on multiple devices, I was able to make necessary adjustments to ensure a smooth and responsive layout.
I am interested in learning more about advanced CSS techniques, specifically CSS Grid and animations. I would appreciate guidance on how to effectively integrate these techniques into my current layout to enhance the visual appeal and user experience. Any resources or examples of best practices would be greatly helpful.
good job!!, I suggest you take it to another level by using flexbox to center and margin the boxes, for example, instead of using:
main { position: absolute;
top: 50%;
left: 50%;
...
try to use in body
body { display:flex;
justify-content:center;
align-items:center;
...
this will center the main, I hope this is a useful tip to get more out of flexbox, keep going.
Congratulations there is a lot of potential here, good that you use css variables, I would just suggest that you consider adding a fallback font in the font-family property, such as Arial, sans-serif, to ensure that the text looks good in case Figtree does not be loaded and add box-sizing: border-box; to all elements (*) to prevent padding and border from changing the dimensions of the elements, especially useful in layout.
I am most proud of how close to the design the final product turned out. I would maybe try to find a better way to align the container to the center of the page next time.
What challenges did you encounter, and how did you overcome them?Aligning the container vertically center on the webpage. I overcame this by using absolute positioning and setting right: 0 left: 0 top: 0 bottom 0
What specific areas of your project would you like help with?What are the best practices for aligning a div to the center of a webpage?
Hello, consider using flexbox for this exercise, it will allow you to center both vertically and horizontally in an easier way; In addition, it will allow you to make responsive designs.
display: flex; justify-content: center ; align-items: center;
These properties inside container will be useful, omitting postion, top, bottom, left, rigth.
It would be advisable for the width and height of the main to be 100% of the screen size, so it would adapt to the different screens where your site is displayed.
Greetings
