I would like help on how to centralize the entire container
Latest solutions
- Submitted 2 months ago
Social links profile
- HTML
- CSS
Responsiveness: How can I optimize the layout to work better on smaller screens, such as smartphones or tablets? Any tips for implementing a mobile-first design?
Button Styling: Are there better ways to style buttons to achieve a more modern, accessible design? For example, ensuring hover and focus states are intuitive and visually distinct.
Code Optimization: Are there ways to improve my CSS class naming conventions (e.g., BEM) or the structure of my code for scalability and reusability?
Accessibility: What additional steps can I take to make the project more accessible, such as for screen readers or users navigating via keyboard?
- Submitted 2 months ago
Blog preview card
- HTML
- CSS
responsive pls check it
and what is the best tags i can use
and font type and size also
Latest comments
- @carolsoutinhoSubmitted 2 months agoWhat specific areas of your project would you like help with?@Ashmawy21Posted 2 months ago
edit your code with this
body { font-family: 'Barlow Semi Condensed', sans-serif; background-color: var(--Light-grayish-blue); color: white; display: flex; /* Use Flexbox */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ min-height: 100vh; /* Ensure the body takes up full viewport height */ padding: 0; /* Remove padding to prevent any offset */ }
and tell me what is happen & if you don't understand tell me to explain it to you more
0 - @LEO-Bloody-SweetSubmitted 7 months ago@Ashmawy21Posted 2 months ago
Overall Thoughts: Nice job! I can tell you've put a lot of effort into this. The design is clean, simple, and looks good overall. There are a few things you could tweak to make it even better, especially for responsiveness and accessibility.
1. HTML Structure:
- Everything looks great in terms of structure! The alt text is a nice touch for accessibility, but it could be more descriptive. For example, instead of just saying
"Profile picture"
, try something like:<img src="./assets/images/avatar-jessica.jpeg" alt="Profile photo of Jessica Randall, Front-end Developer from London">
2. CSS and Layout:
-
The flexbox layout works well, but the
.content
container'swidth: 120%
might stretch it out too much. Maybe try100%
ormax-width
instead so it doesn't break the layout on different screen sizes. -
For the image, instead of
width: 50%
, try a fixed pixel value like150px
. It’ll help keep the image size consistent no matter the screen size.
3. Responsiveness:
- Right now, the layout looks great on desktop, but for mobile, it feels a little cramped. A quick fix would be using media queries to adjust the layout:
@media (max-width: 768px) { .content { padding: 5%; width: 100%; } }
- For the text, it’s a bit small on mobile, so maybe bump up the font size a little to make it easier to read on small screens.
4. Typography:
-
The font choices are great, but the paragraph text might be a little too light with
font-weight: 300
. Try switching it tofont-weight: 400
to make it easier to read:p { font-weight: 400; }
-
For the headings (
h2
andh4
), adding a little more space between them would make it feel more balanced. Maybe something likemargin-top: 1rem;
would help.
5. Button Styling:
- I love the hover effects! It would be awesome to add focus states for keyboard users as well. Here’s a quick way to do that:
.github:focus, .frontend:focus, .linkedin:focus, .twitter:focus, .instagram:focus { outline: 2px solid hsl(75, 94%, 57%); }
6. Spacing & Alignment:
- The layout is looking good, but you could make it even better by adding consistent spacing between the social media buttons. You can use the
gap
property in the.bottom
container to space them evenly:.bottom { display: flex; flex-direction: column; gap: 10px; }
7. Accessibility:
- Great job on adding the alt tag! To make things even more accessible, you could add
aria-labels
to the buttons. That way, screen readers will be able to read out what each button is for. For example:<div class="github" aria-label="GitHub Profile">GitHub</div>
8. A Few Other Tweaks:
- The contrast between the text and background is good, but you might want to double-check that it’s accessible for people with visual impairments. Making sure the colors meet WCAG guidelines would be a good move.
- Test the layout on smaller screens and various resolutions to make sure nothing gets cut off or looks weird.
You’re on the right track! The design is simple, stylish, and looks great. With just a few tweaks for mobile responsiveness, text readability, and accessibility, it’ll be even better. Keep up the awesome work!
0 - Everything looks great in terms of structure! The alt text is a nice touch for accessibility, but it could be more descriptive. For example, instead of just saying
- @juliabushSubmitted 2 months ago@Ashmawy21Posted 2 months ago
Great work! Here's some feedback to help refine your design ;)
and ensure it aligns with the provided style guide:
1. Layout & Responsiveness:
- Current Design: The layout works well for the mobile view with a centered
main
container. - Improvement: While the design is centered, make sure to test the layout on various screen sizes (320px–1440px) to ensure it's fully responsive. Use media queries to adjust styles for different screen widths, especially for larger screens (desktop). For example:
@media (min-width: 768px) { /* Adjust layout for tablets and larger screens */ } @media (min-width: 1440px) { /* Adjust layout for desktop */ }
2. Colors:
- Current Design: The use of yellow for accents and black text is on the right track.
- Improvement: Ensure you use the exact colors from the style guide:
- Yellow:
hsl(47, 88%, 63%)
- White:
hsl(0, 0%, 100%)
- Grey 500:
hsl(0, 0%, 42%)
- Grey 950:
hsl(0, 0%, 7%)
- Yellow:
This consistency will ensure the design matches the provided style guide.
3. Typography:
- Current Design: The
Figtree
font is correctly imported, and font sizes are consistent for the most part. - Improvement:
- Adjust the body text size to
16px
for readability, as per the style guide. - For font weights, ensure the following:
- For normal text:
500
(light) - For headings and important text:
800
(bold)
- For normal text:
- Example:
body { font-size: 16px; /* Set the font size to 16px for body text */ } h1, h2, h3 { font-weight: 800; /* Use bold for headings */ }
- Adjust the body text size to
4. Spacing & Alignment:
- Current Design: The spacing is clear, but some areas could use more attention for visual balance.
- Improvement: Review the spacing around elements like the button, image, and avatar to ensure they are proportionate and aligned with the style guide. You can use the
gap
property within flex containers for better spacing control.
5. Button Styling:
- Current Design: The button is functional, but its hover state could be more prominent.
- Improvement: Consider adding a hover effect for the button to make it more interactive and engaging:
.card__button:hover { background-color: darken(var(--clr-yellow), 10%); /* Make the button darker on hover */ }
6. Images & Alt Text:
- Current Design: The images are clear, but the alt text for both the main image and avatar is missing.
- Improvement: Add descriptive
alt
attributes to the images to improve accessibility:<img src="assets/images/illustration-article.svg" alt="Illustration of a blog article" class="card__main-image"> <img src="assets/images/image-avatar.webp" alt="Avatar of Greg Hooper" class="card__avatar">
7. Content Accessibility:
- Current Design: The content is clear, but ensure that it's fully accessible for users with disabilities.
- Improvement: Double-check that the contrast ratio between text and background colors meets WCAG requirements (at least 4.5:1 for body text). You might need to adjust the grey tones or background color for better readability.
8. Additional Suggestions:
- Avatar & Attribution: The avatar and attribution section is working well. Consider adding more spacing around the elements to improve visual clarity and ensure the text is not too close to the image.
- Text Clarity: Ensure that the card description (
card__main-description
) remains legible by tweaking opacity if needed, especially when viewed on different backgrounds.
Overall: You’ve done a great job following the structure and creating a visually appealing layout. With a few tweaks to color accuracy, typography, spacing, and responsiveness, it will align perfectly with the style guide. Keep up the great work!
0 - Current Design: The layout works well for the mobile view with a centered
- @maisatsujSubmitted 2 months ago@Ashmawy21Posted 2 months ago
great job sis :)
let me give you some advises
Review of QR Code Component
-
Semantic HTML
- Good use of the
<main>
tag for content structure, but replacing the<div class="container">
with a<section>
would improve semantics. Thealt
text for the QR code image is descriptive, which is excellent for accessibility.
- Good use of the
-
Accessibility
- The text contrast is sufficient, but ensure the fonts used (like "Outfit Thin") have enough weight for readability. Using
em
orrem
units for font sizes could enhance accessibility across devices.
- The text contrast is sufficient, but ensure the fonts used (like "Outfit Thin") have enough weight for readability. Using
-
Responsive Layout
- The layout centers well and scales effectively. However, testing on smaller screen sizes (e.g., below 320px) might reveal if text wrapping needs adjustments.
-
Code Structure
- The CSS is clean, but the font family
Outfit Thin
is undefined. Consider using a Google Fonts import for accuracy. Comments in the CSS could make the structure easier to follow.
- The CSS is clean, but the font family
-
Design Consistency
- The solution closely matches the design. Adding a hover effect on the QR code or tweaking the
box-shadow
for better interactivity could enhance the user experience.
- The solution closely matches the design. Adding a hover effect on the QR code or tweaking the
Keep going
Marked as helpful1 -
- @mstitovgitSubmitted 2 months ago@Ashmawy21Posted 2 months ago
great job brother ;)
let me give you some tips and greets
-
Semantic HTML
- The structure is good, but replacing the
<div>
around the content with<main>
could enhance semantics. Adding a more descriptivealt
for the QR code image would also improve accessibility.
- The structure is good, but replacing the
-
Accessibility
- While the design is visually appealing, adding meaningful
alt
text and ensuring sufficient contrast for text would enhance accessibility further.
- While the design is visually appealing, adding meaningful
-
Responsive Layout
- The layout looks great on various screen sizes, thanks to
flexbox
. The card remains centered and scales well.
- The layout looks great on various screen sizes, thanks to
-
Code Structure
- The CSS is clean and well-structured. However, adding comments for sections like
.card
or.text
would improve readability and maintainability.
- The CSS is clean and well-structured. However, adding comments for sections like
0 -
- P@rainbowsurfer137Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I’m proud of how the card looks great on all screen sizes, especially mobile, and how I made it accessible with proper alt text and a focus state.
What challenges did you encounter, and how did you overcome them?Next time, I would focus on optimizing my code further. This includes reducing repetition in CSS by using more reusable classes and variables.
What specific areas of your project would you like help with?- I’m trying to use the right HTML tags for accessibility and SEO. Are there any places where I could use more semantic HTML elements?
- I want to make my code more efficient. Are there any areas where I could simplify or optimize my HTML, CSS, or overall structure?