Once again tried to mimic the original as close as possible. Visually good and functional. Used some more HTML semantic elements this time around.
I'm wondering though if I'm going around modifying the styling for mobile the right way, or is there some obviously better way that I'm missing out on?
Great job, @ZeroOk. Your webpage looks same to same as the design. Keep on coding...
Hello all, This is my first ever project outside of a tutorial. I would appreciate any pointers, advice or full blown constructive criticism you might have for a budding newbie web dev. Thank you and until we meet again. Best Regards Milen
Great job, @milen-nenkov. I would suggest to increase the font-size of the Heading "Order Summary" a bit to match the design. And use html5 semantic elements such as header, main, section, article, footer, etc. instead of usual divs to fix the html accessibility issues in your website. Keep on coding... Chetan.
Hi,
I had some trouble using the fonts assigned for the project.
Hi, Martin. Please make the container big enough to fit the texts. Use bolded text for heading. And give a purple tint to the image using CSS background-color property. Play with color transparency to make the image slightly purple. To Fix the Accessibility Issues use HTML semantic tags such as Header, Main, Footer etc. instead of regular divs. Happy coding...
Could you review this solution for me?
Great job, Jonas. Exact same as the design. Keep it up. Happy coding...
Did you like my design? Any layout editing required? Is there any room for code reduction?
Give some top margin to the main content. And in my opinion the width is little big. Reduce it a little bit to fit the design. And I see the horizontal scroll bar when I view it under 500px resolution. Please fix the breakpoint styles to make it more responsive. And lastly you need to change the color of the 'change' a tag. It should have the same blue color as the background-color of the below button. Other than that, the webpage looks good. Happy Coding...
Hi Everyone, I have completed this challenge but on the github-page, only the styles are being applied to the index page but it is not showing the images. I tried many solutions but still the issue is unresolved. the project is working perfectly on local machine.
Put a "." before /images to display the image correctly. <img src="./images/illustration-hero.svg" alt="" class="hero"> And better use semantic HTML5 tags such as header, main, section, article, footer etc. instead of the usual div tags. This will solve the accessibility error in your solution. Happy coding...
Hi all, This is my second challenge and I tried to make it entirely with CSS-Grid. Looking forward to your feedback.
Thank you,
Jithu
Great solution. Just give some top margin/padding to the Heading (Order Summary) to match the design. Also try to fix the accessibility issues by using semantic HTML elements.
Hi guys, this is my first challenge after learning HTML and CSS. My desktop version does not display properly, the image is abnormally enlarged, but displays well when I run it from the local repo. I'll be glad to receive any feedback to improve my visual design. Thanks.
For Accessibility Issues, use HTML5 semantic tags like main instead for div and footer instead of the last div which has .attribution class. Nest the div tags under semantic elements. Give the body "display: flex" property and "flex-direction: column" to avoid the attribution div overlapping the container block. And on desktop viewport, the container is too large. Limit the width of the container by using "max-width" CSS property. Other than that, your design is good. Keep it up.
