Latest solutions
Huddle Landing Page (HTML5, CSS, Flexbox, Ressponsive)
#accessibility#backbone#webflow#web-componentsSubmitted about 2 years agoSocial Proof Section (HTML5, CSS, Flexbox, Ressponsive)
#accessibility#backbone#webflow#web-componentsSubmitted about 2 years agoSingle Price Grid Component (HTML5, CSS, CSS Grid, Ressponsive)
#accessibility#webflow#backboneSubmitted about 2 years agoProfile Card Component (HTML, CSS, Flexbox, Ressponsive)
#accessibility#backbone#webflowSubmitted about 2 years ago3 Column Preview Card (HTML, CSS, Flexbox, CSS Grid, Media Queries)
#accessibility#backbone#web-components#webflow#styled-componentsSubmitted about 2 years ago
Latest comments
- @basheer-ahamed-008@SalahShadoud
Hey There! Congrats on finishing the challenge i have few notes to improve your design:
- use the padding on the text section of the design to mimic the space on the inline side of the design.
- use
display: flex;
andflex-direction: column;
on the container and space the elements inside of it with thegap
property to have a nice looking container with little nice space between the elements.
hope this gonna help you in your future challenges, Happy Coding.
- @PrathamS1@SalahShadoud
Hey There! Congrats on Finishing the Challenge. i have a few notes for you and may this help you in your future challenges and projects:
- You missed the summary resutls background colors, you can achive that by using the values they gave in the
style-guide
file in thehsla(Hue, Saturation, Lightness, Alpha)
function, this way u can benefit from the alpha value that is responsible for the transperancy of the color. - Grid Property is a time saver property especially when it comes to ressponsive desings, so i recommend you to learn using it and start applaying it in your challenges, and here is a good video that will help u learn it in the easy way, Link Here
- i recommend to follow the Mobile-first approach and it works by starting your work from small screens and gradually working up to larger screen sizes.
hope this will be helpful, Happy Coding
Marked as helpful - You missed the summary resutls background colors, you can achive that by using the values they gave in the
- @MAR2409@SalahShadoud
Hey There! Congrats on Finishing this Challenge. Writing HTML classes can save you alot of a time when you review your code or if your working with team on a project, i haev a few notes for you and maybe this will help you in your future challenges and projcts:
- Try to choose class or id names based on the content and not on its styles (Use descriptive names), for example: you gave the purple text inthe header a class of
purple
but it doesn't describe what the class is for (prurple text, purple background) so you can give it a class ofpurple-text
to clearify the purpose of the class when someone else read your code. - Use Comments for better structuring and understanding of the code (Avoid needless comments), for example comment your main sections of the code like the two sections (text or insights section, image section), and use comment on links and CDNs that you use on your project.
- Use utility classes for most used styles like: (flex, grids, font sizes, font weights, colors, background colors), for example create two utility classes (one for flex-row and one for flex-column) and create utility classes for font weights that you are using in your prject to prevent reapeating this styles in css and instead use this classes on the html side.
hope this can help you and give a well understanding of how to write a better and readable code, Happy Coding
- Try to choose class or id names based on the content and not on its styles (Use descriptive names), for example: you gave the purple text inthe header a class of
- @codederk@SalahShadoud
Hey Coder! i have few notes for better CSS and HTML coding:
- Avoid global and element selectors (use classes of ids intsead).
- Omit overly specific selectors.
- Use semantic class names.
- Combine Media Queries in one media query for better reading and editing.
- use comments for better code structuring. Happy Coding
- @cristinakellyt@SalahShadoud
Hi Cristina! Congrats on finishing the challenge! i have a note about the star icon container, which is stratching from top and bottom, so i think if u use
display: flex
on it will get rid of the extra spaces that it takes and center the star icon in the middle. Happy Coding - @LidiaS98@SalahShadoud
Hey There! Nice work ^_^ i have some ideas that may improve your design:
- for the summary elements, i recommend you to use
flex
nadjustify-content: space-between
to space the element so the first elemt wil stick to the beginning and the second elemnt will stick to the end of the container. - and for background color of each item, u can use the
background: hsla(x, y, z, a)
function so u can reduce the alpha number of the color so it will increase the transperancy of the item
Happy Coding <3
- for the summary elements, i recommend you to use