@donttouchtomiSubmitted 4 months ago
Latest solutions
Blog preview card made with Flexbox and CSS variables
#accessibilitySubmitted 7 months agoNo help needed at this point
Flexbox and CSS Box Model
Submitted 8 months agoHow to properly push projects from Visual Studio Code to GitHub.
Latest comments
- @PropowershellPosted 4 months ago
The page looks great! You might just have to retake the screenshot since the fonts look different.
Great Work.
0 - @AlanSteindorffSubmitted 4 months ago@PropowershellPosted 4 months ago
HTML:
<main> <div> <img> <h2></h2> <p></p> </div> </main>Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>. Besides for the card, you don't need any divs in this challenge, so I would simplify your HTML structure to this:The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website." Headings should always be in order, so you never start with a <h3>. I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.CSS:
Use the style guide to find the correct background-color. Remember to specify a fallback font:font-family: 'Outfit', sans-serif;. I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens. Remove the margin on the card. To center the card vertically, add min-height: 100svh and justify-content: center on the body. Remove all widths in px. Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens. line-height and letter-spacing should not be in px. Use % for the line height and em for the letter spacing, where 1em equals the font size of the element. Paragraphs have a default value of font-weight: 400, so there is no need to declare it. On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.0 - @bwire40Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am making good progress
What challenges did you encounter, and how did you overcome them?This was a good challenge, no problems encountered
What specific areas of your project would you like help with?Writing good media screens and animations
@PropowershellPosted 4 months agoIt's looking nice and responsive. Here are a couple of things to keep in mind on media queries and animation:
Responsive Design: Use mobile-first media queries and test on multiple devices. Flexibility is key to making sure your site looks great everywhere. Performance: For smooth animations, stick to transform and opacity over width/height. This will improve performance, especially on mobile devices. User Experience: Animations should feel intuitive and not too distracting. Keep them subtle and functional—like hover effects or loading feedback. Accessibility: Consider users with motion sensitivity and add an option to disable animations if needed (via prefers-reduced-motion).Marked as helpful1 - @demon2316slayerSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Well i enjoyed making this as a revision project and helped me clear more concepts.
What challenges did you encounter, and how did you overcome them?it was easy to make as i have pracitced several layouts just responsive is something i need to focus on more.
What specific areas of your project would you like help with?well mostly how to approach and think about responsiveness before making the whole project.
@PropowershellPosted 4 months agoHello, nice looking component but it could be better. A way to think about responsiveness is to begin with a mobile-first approach:
Start by writing your CSS for mobile devices and then use media queries to add in styling for larger screen sizes.
Test the design on mobile devices to ensure it works well.
You could also minimize your browser window to about 25% of your computer screen while coding.
To fix the current state of your qr component follow these instructions:
HTML:
Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.
Besides for the card, you don't need any divs in this challenge, so I would simplify your HTML structure to this:
<main> <div> <img> <h2></h2> <p></p> </div> </main> The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."Headings should always be in order, so you never start with a <h3>. I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.
CSS:
Use the style guide to find the correct background-color.
Remember to specify a fallback font:font-family: 'Outfit', sans-serif;.
I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.
Remove the margin on the card.
To center the card vertically, add min-height: 100svh and justify-content: center on the body.
Remove all widths in px.
Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.
line-height and letter-spacing should not be in px. Use % for the line height and em for the letter spacing, where 1em equals the font size of the element.
Paragraphs have a default value of font-weight: 400, so there is no need to declare it.
On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.
Marked as helpful1 - @Manuel7070Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I’m proud of the clean, responsive design that adapts well to different screen sizes and devices, ensuring a smooth user experience. Implementing hover effects and smooth transitions also adds an interactive touch to the social buttons, improving overall user engagement.
Next time, I would focus on further optimizing the page's accessibility by implementing more comprehensive ARIA labels and conducting in-depth testing for screen readers. Additionally, I’d explore integrating a more scalable CSS framework to streamline the styling and improve maintainability as the project grows.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was aligning the footer at the bottom of the page, especially when dealing with smaller content heights.
To solve the footer issue, I implemented a flexbox layout with min-height: 100vh to ensure the footer stayed at the bottom of the viewport.
What specific areas of your project would you like help with?While I’ve ensured the layout is responsive, I would appreciate guidance on making the profile more accessible, especially regarding ARIA labels and screen reader compatibility.
@PropowershellPosted 6 months agoThe project looks perfect, if you want to learn about accessibility check out this article -https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/
Marked as helpful0 - @lab1210Submitted 7 months agoWhat challenges did you encounter, and how did you overcome them?
i had challenges with centralizing on the page which I overcame by consulting stack overflow.
@PropowershellPosted 7 months agoHi, nice looking component, this should help you improve it:
Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.
Besides for the card, you don't need any divs in this challenge, so I would simplify your HTML structure to this:
<main> <div> <img> <h2></h2> <p></p> </div> </main> The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."Headings should always be in order, so you never start with a <h3>. I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.
CSS:
Use the style guide to find the correct background-color.
Remember to specify a fallback font:font-family: 'Outfit', sans-serif;.
I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.
Remove the margin on the card.
To center the card vertically, add min-height: 100svh and justify-content: center on the body.
Remove all widths in px.
Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.
line-height and letter-spacing should not be in px. Use % for the line height and em for the letter spacing, where 1em equals the font size of the element.
Paragraphs have a default value of font-weight: 400, so there is no need to declare it.
On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.
0
