Brian Muniz Silveira

@BrianMunizSilveira

All comments

Andrea-gli•10

@Andrea-gliSubmitted about 12 hours ago

QR code

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 7 hours ago

Code Review and Suggestions

Positive Highlights:

Clean and Simple Design: The code effectively uses flexbox for layout and keeps the styles minimalistic yet functional.
Font Import: Correct use of Google Fonts ensures a polished typography style.
Responsive Approach: The centering of the main content ensures a good base for responsiveness.

Suggested Improvements:

1. HTML Structure

Heading Tag Mismatch: The <h3> tag should close with </h3>, not </h1>. This mismatch could cause rendering or SEO issues.

  <h3>Improve your front-end skills by building projects</h3>

Alt Text Description: Improve the alt text to be more descriptive for accessibility.

<img src="./images/image-qr-code.png" alt="QR code linking to Frontend Mentor website">

2. CSS Adjustments

Font Family Declaration: Update the font-family declaration to include fallbacks and match the imported font name.

body {
    font-family: "Outfit", sans-serif;
}

Use Variables for Colors: Define colors in CSS variables to ensure consistency and ease of updates.

:root {
    --bg-color: hsl(212, 45%, 89%);
    --text-color: hsl(216, 15%, 48%);
    --heading-color: hsl(218, 44%, 22%);
    --container-bg: #fff;
}
body {
    background-color: var(--bg-color);
}
h3 {
    color: var(--heading-color);
}
p {
    color: var(--text-color);
}

3. Accessibility

Semantic Improvements: Wrap the <section> in an <article> tag for better semantics since it represents standalone content.

<article>
    <section class="container">
        <img src="./images/image-qr-code.png" alt="QR code linking to Frontend Mentor website">
        <div class="text">
            <h3>Improve your front-end skills by building projects</h3>
            <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level.</p>
        </div>
    </section>
</article>

4. Performance Enhancements

Preload Key Assets: Preload critical resources like fonts and images to improve loading speed.

<link rel="preload" href="./images/image-qr-code.png" as="image">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" as="style">

Optimize Image Size: Ensure the QR code image is optimized for its displayed dimensions (288px × 288px) to reduce loading time.

5. Responsiveness

Add media queries for smaller screen sizes to ensure the container adjusts appropriately.

@media screen and (max-width: 480px) {
    .container {
        width: 90%;
        padding: 20px;
    }
    img {
        width: 100%;
        height: auto;
    }
}

6. Consistency and Maintainability

Remove Unnecessary Properties: The margin-top: auto; and margin-left: auto; in the body styles are redundant since flexbox centering handles alignment.

body {
    background-color: var(--bg-color);
    font-family: "Outfit", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Summary

This is a solid implementation with good design principles. The suggested changes will improve accessibility, maintainability, and responsiveness while optimizing performance. Keep up the great work!

mamman-naf•70

@mamman-nafSubmitted about 8 hours ago

What are you most proud of, and what would you do differently next time?

i am confident that i did justice regarding this project. please review it and let me know of what i shoud do differently next time.

What challenges did you encounter, and how did you overcome them?

the plan section was a bit of a challenge but its a thing of the past now.

What specific areas of your project would you like help with?

Please review my code and let me know. because without a mentors guidance I would fool myself into thinking I did it PERFECTLY, so please help me improve. I am eager to learn. Thanks

Responsive Order Summary Page using HTML & CSS

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 8 hours ago

Code Review and Suggestions

Positive Highlights:

Consistent Design System: The use of CSS variables (:root) centralizes theme colors and makes maintenance easier.
Semantic HTML: The structure is logical and aids readability with appropriate use of tags like <div> and <a>.
Responsiveness: Grid layout with place-items: center ensures a visually centered design on all screen sizes.
Clean CSS: Organized selectors and well-separated styles enhance readability.

Suggested Improvements:

1. Accessibility Enhancements

Alt Text: Provide descriptive alt attributes for images to ensure screen reader compatibility.

  <img class="hero" src="illustration-hero.svg" alt="Illustration of a music service banner">
  <img class="icon" src="icon-music.svg" alt="Music note icon">

Button Semantics: Use <button> elements for interactive actions like "Proceed to Payment" instead of <a> to improve semantics and usability.

<button class="payment">Proceed to Payment</button>
<button class="cancel">Cancel Order</button>

2. Responsive Design

Address the typo in the media query for screen widths less than 40px (likely meant for mobile). Update it to target realistic device sizes:

@media screen and (max-width: 480px) {
    body {
        background-image: url(pattern-background-mobile.svg);
    }
    .container {
        width: 90%;
    }
    h1 {
        font-size: 1.5em;
    }
}

3. CSS Improvements

Overly Specific Selectors: Simplify and avoid redundancy. For example:

a.payment:hover {
    background-color: var(--plan-payment-Hover-Color);
}

Instead, use a shared hover style for buttons:

.btn {
    text-decoration: none;
    display: block;
    border-radius: 10px;
    text-align: center;
}
.btn:hover {
    background-color: var(--plan-payment-Hover-Color);
}

4. Performance Optimization

Preload Critical Assets: Use rel="preload" for critical fonts to improve loading speed.

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" as="style">

Reduce Font Overhead: Include only required font weights and styles instead of multiple families.

5. Content Alignment

Ensure spacing consistency by using padding instead of margin-left and margin-right in .txt-body:

.txt-body {
    padding: 0 20px;
    margin-top: 30px;
}

Summary

Your solution is well-structured and adheres to modern CSS practices. By addressing these suggestions, you’ll enhance accessibility, responsiveness, and maintainability, making your project even more polished. Keep up the great work!

Morrango•40

@MoranggooSubmitted about 9 hours ago

QR CODE card

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 8 hours ago

Sugestões para o Desafio: Component de QR Code

Seu código está muito bem estruturado e funcional! Aqui estão algumas sugestões para melhorar ainda mais o projeto e torná-lo mais profissional:

1. Responsividade

Embora o layout funcione bem em telas menores, é uma boa prática adicionar media queries para melhorar a aparência em dispositivos de diferentes tamanhos. Por exemplo:

@media (max-width: 320px) {
  main {
    max-width: 90%;
    padding: 15px;
  }

  img {
    width: 100%;
  }

  h1 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.9rem;
  }
}

2. Acessibilidade

Melhore a acessibilidade do seu site para garantir que todos os usuários possam aproveitá-lo:
Adicione uma descrição mais detalhada ao atributo alt da imagem:

<img src="imagens/image-qr-code.png" alt="QR Code para acessar o site Frontend Mentor">

Utilize tags semânticas como <section> ou <header> para descrever melhor as áreas do conteúdo.

3. Centralização Melhorada

A centralização atual funciona bem, mas pode ser otimizada usando flexbox no lugar do position: absolute; e transform. Isso também ajuda na responsividade. Exemplo:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

main {
  background-color: white;
  max-width: 260px;
  padding: 20px;
  border-radius: 20px;
}

4. Melhorias Tipográficas

Pequenas melhorias podem tornar o texto mais legível e visualmente agradável:
Ajuste o espaçamento das letras e o line-height:

h1 {
  margin: 20px 0;
  text-align: center;
  color: hsl(218, 44%, 22%);
  font-size: 1.5rem;
  line-height: 1.4;
}

p {
  color: hsl(216, 15%, 48%);
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
}

5. Sombras e Interatividade

Adicione sombras sutis e efeitos de hover para melhorar a aparência e a interatividade:

main {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

6. Separação de Estilos

Considere mover o CSS para um arquivo separado (ex.: style.css) para melhorar a organização. Exemplo de estrutura de arquivos:

/
|-- index.html
|-- style.css
|-- imagens/
    |-- image-qr-code.png

O <head> no HTML ficaria assim:

<link rel="stylesheet" href="style.css">

Resumo

Pontos Fortes: Estrutura limpa, design funcional e foco na simplicidade.
Melhorias Sugeridas: Responsividade, acessibilidade, centralização com flexbox e interatividade.

Essas sugestões vão ajudar você a criar um projeto mais refinado e profissional. Continue praticando e evoluindo! 🚀😊

Brian.

Taofeek Kassim•80

@TaophyccSubmitted about 11 hours ago

What are you most proud of, and what would you do differently next time?

I've just completed another challenge

What challenges did you encounter, and how did you overcome them?

I had problem creating the payment container

What specific areas of your project would you like help with?

I opened the live url website on chrome and safari, then I discovered that some elements of the design on safari were not styled properly but it was fine on chrome. I need help with this.

A responsive Order summary component card built with HTML and CSS

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 10 hours ago

Solution Retrospective: Order Summary Component Challenge

What Are You Most Proud Of, and What Would You Do Differently Next Time?

Great job completing another challenge! Your implementation demonstrates good use of CSS Flexbox and media queries to create a responsive design. It’s also commendable that you’ve styled the component effectively to align with the provided design.

Next time, you might want to focus on cross-browser compatibility earlier in the development process to identify and address inconsistencies between browsers like Chrome and Safari.

What Challenges Did You Encounter, and How Did You Overcome Them?

You mentioned facing an issue with the payment container. Your current approach shows progress in styling it effectively, but it could benefit from some fine-tuning, especially with spacing and alignment. It’s great that you managed to style the element as intended after some adjustments.

Additionally, the styling differences between Chrome and Safari are a common challenge. Addressing these requires understanding how different browsers interpret CSS properties and testing on multiple platforms during development.

Suggestions for Improvement

Here are some recommendations to enhance your project:

1. Fixing Cross-Browser Styling Issues

Safari and Chrome sometimes interpret CSS differently, especially with flexbox and spacing. Here are a few strategies:

Check flex Property Behavior: Safari might require explicit settings for align-items and justify-content to render elements properly.

Vendor Prefixes: Use a CSS autoprefixer tool to ensure compatibility with older browser versions. For example:

display: -webkit-flex; /* Safari fallback */
display: flex;

Test Specific Properties: Padding, margin, and overflow properties may behave differently. Test by setting consistent box models using box-sizing and inspecting layout differences in developer tools.

2. Refine the Payment Container

Your current payment container layout works, but you can enhance alignment and responsiveness:

Align Text and Icon Properly: Ensure the text and icon stay aligned vertically and adjust spacing for cleaner visuals. Example update:

   .payment-container {
    display: flex;
    align-items: center; /* Aligns items vertically */
    justify-content: space-between; /* Creates proper spacing */
    padding: 1rem; /* Adds internal spacing */
}

.music-icon {
    width: 3em;
    height: 3em;
    margin: 0; /* Reset unnecessary margins */
}

.payment-container p {
    margin: 0; /* Removes excess margins */
}

a {
    text-decoration: underline; /* Ensures consistent link style */
    font-weight: bold;
}

3. Enhance Mobile Responsiveness

Your mobile styles are well-implemented, but consider tweaking button sizes and spacing for smaller screens:

@media screen and (max-width: 450px) {
    .btn {
        padding: 1em 4em; /* Adjust padding for smaller screens */
    }

    .payment-container {
        width: 100%; /* Make the container full-width */
    }

    section > p {
        font-size: 0.875rem; /* Improve text readability on smaller screens */
    }
}

4. Add Hover and Focus Effects

Enhancing interactivity with hover and focus effects can improve the user experience:

.btn:hover {
    filter: brightness(90%);
}

a:hover {
    color: hsl(245, 75%, 52%);
    text-decoration: none;
}

5. Comment Your CSS for Clarity

Adding comments to your CSS improves readability and helps with collaboration. For example:

/* Main container for the card */
.parent-container {
    background: url(pattern-background-desktop.svg);
    background-color: hsl(225, 100%, 94%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
}

Summary

Your implementation is strong, with a responsive layout and well-structured HTML and CSS. By addressing cross-browser issues, refining responsiveness, and adding interactive details, you can elevate your project even further.

Keep testing and improving! The more challenges you take on, the stronger your skills will become. 🚀😊

Brian.

Marked as helpful

salilphadnis•10

@salilphadnisSubmitted about 11 hours ago

What are you most proud of, and what would you do differently next time?

Just quick solution with flexbox.

plain CSS

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 10 hours ago

Solution Retrospective: QR Code Component Challenge

What Are You Most Proud Of, and What Would You Do Differently Next Time?

You mentioned creating a quick solution with Flexbox, and that’s great! Flexbox is a powerful tool for creating aligned and centered layouts. This approach showcases efficiency and skill in applying essential CSS techniques to solve design challenges.

Next time, you might want to explore adding responsive design techniques to ensure the component works well on devices with different screen sizes. This would be an excellent next step to continue improving your front-end skills.

Suggestions for Improvement

Here are some suggestions to enhance the quality of your solution and broaden your learning:

1. Make the Component Responsive

Your layout works well with a fixed size, but adding responsiveness can improve the experience across devices. Consider adjusting the width and height of the component to adapt to various screen sizes:

@media (max-width: 480px) {
    .img-container {
        width: 90%; /* Adjusts width on smaller screens */
        padding: 20px; /* Adds more padding */
    }

    .qr-image {
        width: 100%; /* Makes the image flexible */
        margin-top: 10px; /* Adjusts margin */
    }

    .qr-image-title {
        font-size: 18px; /* Reduces title size */
    }

    .qr-image-description {
        font-size: 14px; /* Reduces description size */
    }
}

2. Improve HTML Semantics

Using semantic tags in your HTML makes the code more accessible and descriptive. For example:

Instead of using <div class="img-container">, consider using a <section> with a descriptive class.
Add an alt attribute to the <img> tag to improve accessibility.

Updated example:

<section class="qr-card">
  <img class="qr-image" src="images/image-qr-code.png" alt="QR Code to visit Frontend Mentor">
  <h2 class="qr-image-title">Improve your front-end skills by building projects</h2>
  <p class="qr-image-description">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</section>

3. Add Interactive Details

Small interactions can make the design more engaging. For example, a hover effect on the card or the image:

.img-container:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-in-out;
}

.qr-image:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}

4. Centralize and Reuse Styles with CSS Variables

Adding variables for colors and spacing will make the code cleaner and easier to update. Example:

:root {
    --background-color: rgb(213, 225, 239);
    --card-background: #fff;
    --border-radius: 10px;
    --font-size-title: 20px;
    --font-size-description: 15px;
}

body {
    background-color: var(--background-color);
}

.img-container {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
}

.qr-image-title {
    font-size: var(--font-size-title);
}

.qr-image-description {
    font-size: var(--font-size-description);
}

5. Comment and Document Your Code

Adding comments helps with collaboration and code maintenance:

/* Main body styling */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Container for the QR card */
.img-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--card-background);
    border-radius: var(--border-radius);
}

Summary Your quick solution with Flexbox is functional and well-structured! By focusing on responsiveness, semantics, interactivity, and code organization, you can create even more complete and polished components that are ready for larger projects.

Keep exploring new techniques and challenges! 🚀😊

Brian.

Marked as helpful

PatLatting•10
@PatLattingSubmitted about 15 hours ago
What are you most proud of, and what would you do differently next time?
I'm most proud of the use of CSS Grid and flebox to create the centering and card component for the project. I would change my knowledge of Figma in order to understand better the design system and how to relates to the project.
What challenges did you encounter, and how did you overcome them?
Overall, I did not encounter very many challenges for this project, I would however like to overcome any areas in my code that could be made more readable or improve its performance.
What specific areas of your project would you like help with?
As I mentioned in question number two I would appreciate help in reviewing my code to ensure it meets current standards for clean and readable code. I am new in web development and want to learn to create good code.
Responsive QR Code Component using CSS grid and flexbox
2
Brian Muniz Silveira•120
@BrianMunizSilveiraPosted about 11 hours ago
Solution Retrospective: QR Code Component Challenge

What Are You Most Proud Of, and What Would You Do Differently Next Time?

Great job using CSS Grid and Flexbox to structure and center the card component! These are powerful tools for layout creation. It's also impressive to see your interest in Figma and its design systems. Understanding Figma can indeed enhance your ability to interpret and implement designs accurately.

For next time, consider exploring responsive design techniques, even if this challenge does not explicitly require them. Learning how to adapt layouts for different screen sizes will elevate your skills as a front-end developer.

What Challenges Did You Encounter, and How Did You Overcome Them?

You mentioned not facing many challenges, which is excellent! However, striving for code readability and performance optimization is a fantastic goal. By focusing on writing clean, well-organized CSS and semantic HTML, you'll align your code with industry standards and improve its maintainability.

Suggestions for Improvement

Here are some suggestions to refine your solution and further enhance your skills:

1. Make the Component Fully Responsive

Although the layout is fixed for this challenge, it's a good practice to use responsive techniques. For example, adding media queries will ensure the card adjusts gracefully on smaller or larger screens:

@media (max-width: 480px) { #card { width: 90%; /* Shrinks the card on smaller devices */ padding: 12px; /* Adjusts padding */ } .title { font-size: 20px; /* Reduces title size */ } .description { font-size: 14px; /* Reduces description size */ } }

2. Semantic HTML

Your structure is clean, but we can enhance semantic HTML by using appropriate tags:

Instead of <div class="content">, you could use a <section> to indicate a meaningful division of the content.

Ensure the <img> tag includes an accessible alt text that describes the QR Code, such as:

<img src="./images/image-qr-code.png" alt="QR Code linking to Frontend Mentor website">

3. Improve Typography Readability

You’ve done a good job with the font sizes and line-heights. For better readability:

Use a slightly larger line-height for the title to make the text feel more open:

.title { line-height: 1.5; }

Consider using a text-shadow for the title to make it stand out subtly:

.title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

4. Add Subtle Interactivity

A small hover effect can add a polished, interactive feel to the component. For example:

#card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease-in-out; }

5. Code Comments for Maintainability

Adding comments in your CSS can help clarify your intentions for future reference or collaboration. For example:

/* Container for the QR code and content */ #card { display: flex; flex-direction: column; width: 320px; background: var(--white); /* Additional styles omitted for brevity */ }

6. Consider Using Utility Classes

Instead of repeating styles in different contexts, you could explore utility classes to streamline your code. For instance:

.text-center { text-align: center; } .mt-24 { margin-top: 24px; }

This approach can simplify your HTML:

<h2 class="title text-center mt-24">Improve your front-end skills by building projects</h2>

What Specific Areas of Your Project Would You Like Help With?

It's wonderful to see that you’re eager to learn about writing clean and readable code. Here are some general tips:

Follow a consistent naming convention for classes. For example, use either camelCase, snake_case, or kebab-case consistently throughout.

Organize your CSS logically by grouping related styles and using comments to separate sections.

Use CSS variables effectively to avoid hardcoding values like padding or font sizes in multiple places. For example:

:root { --padding-small: 16px; --font-size-title: 22px; }

Summary

Your solution is already strong and shows great use of CSS Grid and Flexbox for layout and centering. By focusing on responsiveness, semantic HTML, and adding small touches like interactivity, you can make your component even more polished and professional.

Keep up the excellent work, and don’t hesitate to ask for help or feedback from the community as you continue learning! 😊

Brian.
0

Cihan•10

@ahmetcihankSubmitted about 13 hours ago

What specific areas of your project would you like help with?

i am a backend developer if you can help me with layouts i would be greatful thanks.

qr code challange

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 12 hours ago

Feedback for Your QR Code Component

Hello! It's great to see you working on layouts, especially as a backend developer. Building layouts with HTML and CSS is such a valuable skill, and it's always useful in full-stack projects.

Your code is well-organized! Here are a few suggestions that might help you improve further:

1. Remove Duplicate `background-color` Declaration:

In your code, you declared background-color twice for body, html. The #f0f0f0 value is already applied correctly, so you can remove the line with background-color: azure to avoid redundancy.

2. Responsive Images:

You're using width: 100% for your images, which is great! This ensures that the layout adapts to smaller screens. However, you should also consider adding max-width: 100% to ensure the image doesn't exceed its container size. Here's how you can adjust it:

.card img {
    width: 100%;  /* Ensures the image fills the container */
    max-width: 100%; /* Prevents the image from exceeding container width */
    height: auto;  /* Maintains the aspect ratio */
}

3. Typography Improvements:

You might want to make the h3 title slightly larger or bold to enhance the visual hierarchy. Consider using:

.card h3 {
    font-size: 20px;  /* Makes the title a bit larger */
    font-weight: bold;  /* Makes the title stand out more */
}

4. A11y (Accessibility) Improvement:

Always add an alt attribute for images to improve accessibility. For example, the QR code image could be more descriptive like this:

<img src="./images/image-qr-code.png" alt="QR Code leading to Frontend Mentor website">

5. Remember Responsiveness:

Ensure that your layout works on all screen sizes, not just desktop. Consider using media queries to adjust font sizes, padding, and the layout for smaller screens. For example:

@media (max-width: 600px) {
    .card {
        width: 90%;  /* Makes the card more flexible on small screens */
    }

    .card h3 {
        font-size: 18px;  /* Smaller font for mobile */
    }
}

These small improvements can make your project even more polished and responsive. Overall, great job, and keep practicing! If you need more help with front-end work, feel free to reach out. 😊

massaki-msfk•10
@massaki-msfkSubmitted about 19 hours ago
What are you most proud of, and what would you do differently next time?
I didn't knew much about HTML and CSS and never did a project from zero, this helped me in creating it for the first time.

Didn't knew much about git too, how to create repositories and git commands lessons helped me on learning how to work on an IT enviroment. I hope to develop my knowledge further.
First solution of a QR Code component with HTML and CSS
1
Brian Muniz Silveira•120
@BrianMunizSilveiraPosted about 16 hours ago
Feedback for QR Code Challenge by "massiro"

Your solution to the QR Code challenge looks clean and functional. Below are some recommendations to help refine your project and improve both functionality and aesthetics. Great work so far!

Strengths

Clean Layout

The structure is straightforward and the use of a centered .wrapper ensures focus on the content.

Semantic Use of HTML

The usage of h2 for the heading and p for the description is semantically correct.

Consistent Styling

The white card with a shadow effect and rounded corners creates a modern, clean look.

Suggestions for Improvement

1. Accessibility Improvements

Add a descriptive alt attribute to the QR Code image. This is important for screen readers and users who rely on assistive technologies:

<img src="images/image-qr-code.png" alt="QR Code linking to the Frontend Mentor website">

2. Typography Adjustments

Use line-height to improve text readability, especially for longer paragraphs:

.wrapper p { line-height: 1.5; /* Improves readability */ }

Add consistent spacing around the heading (h2) and ensure text-align consistency:

.wrapper h2 { text-align: center; /* Center aligns the heading */ line-height: 1.3; /* Enhances readability */ }

3. Responsiveness Enhancements

The fixed height (height: 499px) on .wrapper may cause layout issues on smaller screens. Consider using min-height instead:

.attribution { margin-top: 20px; font-size: 11px; }

4. Footer Positioning

The footer (.attribution) appears far from the main content. You can use position: relative or padding adjustments to make it more visually connected:

.attribution { margin-top: 20px; font-size: 11px; }

5. Additional Aesthetic Enhancements

Add hover effects to make your card more interactive, like a subtle shadow on hover:

.wrapper:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease-in-out; }

Summary

Your project is already in great shape! With small improvements like responsive image adjustments, better typographic hierarchy, and accessibility refinements, it can look even more polished.

Keep practicing and experimenting with new ideas. You’re doing amazing! 🚀
1

Iamberny•10

@IambernySubmitted about 17 hours ago

berny's solution

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 16 hours ago

Feedback for QR Code Component Challenge

Your project looks great! The layout is well-presented and functional. Here are some suggestions to make your solution even better:

Strengths

Good Centering
- The use of display: flex, justify-content: center, and align-items: center in the body ensures consistent horizontal and vertical alignment.
Organized Code
- The HTML structure is clean and semantic, with clear separation of main content and attribution details.
Simple and Effective Responsiveness
- Using min-height: 100vh in the body ensures that the content fills the screen properly.

Suggestions for Improvement

1. Accessibility

The QR code image has an alt attribute, which is great! However, the text can be more descriptive to assist screen readers:

<img src="./images/image-qr-code.png" alt="QR Code leading to Frontend Mentor website">

2. Improve Typography Hierarchy

The <h2> title can be slightly larger to emphasize the main text:

.card h2 {
    font-size: 18px;
    font-weight: 700; /* Makes the title stand out more */
    color: hsl(218, 44%, 22%);

3. Enhance Responsiveness

The fixed image size (width: 300px) may cause issues on smaller screens. Use a flexible width instead:

.card img {
    max-width: 100%; /* Automatically adjusts to container size */
    height: auto; /* Maintains image proportions */
}

4. Add Padding for Smaller Screens

Consider adding padding to the body or .container to prevent content from sticking to the edges on smaller devices:

body {
    padding: 10px;
    box-sizing: border-box; /* Ensures padding is included in the layout */
}

5. Enhance Text Readability

Add line spacing to paragraphs to improve readability:

.card p {
    line-height: 1.5; /* Improves text clarity */
}

6. Add Sibtle Animation

You can add a professional touch by including a shadow animation when hovering over the card:

.card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease-in-out;
}

Summary

Your project is already in great shape! With small improvements like responsive image adjustments, better typographic hierarchy, and accessibility refinements, it can look even more polished.

Keep practicing and experimenting with new ideas. You’re doing amazing! 🚀

Marked as helpful

Uyoyo Whiskey•20
@Uyoyo-WSubmitted about 18 hours ago
QR code component
2
Brian Muniz Silveira•120
@BrianMunizSilveiraPosted about 17 hours ago
Feedback for Your QR Code Component Solution

Great work on starting your coding journey and completing Day 1! Your project is well-structured and functional. Here’s some constructive feedback to help you improve:

Strengths

Well-Structured HTML:

The HTML is semantic, with clear use of elements like h4, p, and div.

Basic CSS Applied Well:

Effective use of flexbox for centering content.

Good choice of colors and spacing.

Accessibility Consideration:

Including meta viewport is great for mobile responsiveness.

Suggestions for Improvement

Add Alt Text to the Image:

To improve accessibility, include an alt attribute for the QR code image. Example:
<img src="./images/image-qr-code.png" alt="QR Code to access the Frontend Mentor website">

Better Centering with CSS:

Instead of using margin: 60px 100px; in .main, use height: 100vh in body for precise vertical alignment:
body { height: 100vh; padding: 16px; /* Prevents content from being cut off on smaller screens */ box-sizing: border-box; }

Responsive Design Enhancements:

Add media queries to improve the layout on smaller screens. For example:
@media (max-width: 375px) { img { width: 200px; /* Adjust image size for smaller screens */ } .main { margin: 20px; /* Adjust spacing for smaller screens */ } }

Font Optimization:

It seems you’re loading two font families (Inter and Outfit), but only Outfit is used. Remove the unused font to improve performance.

Next Steps

Test your project on various screen sizes to ensure it looks great everywhere.

Keep experimenting with media queries and accessibility improvements as you progress.

You’re off to a great start—keep up the consistency and learning! 😊
Marked as helpful
0
Brian Meinert•170
@bmeinert8Submitted about 19 hours ago
What challenges did you encounter, and how did you overcome them?
Still having trouble figuring out the image in the background of how to get it laid out properly. Any suggestions on how to get this set up and working properly would be greatly appreciated.
What specific areas of your project would you like help with?
The background image layout, as well as any other input on the project and code
Responsive Summary Component
1
Brian Muniz Silveira•120
@BrianMunizSilveiraPosted about 17 hours ago
How to Set Up a Background Image for Your Project

Hi there! I noticed you’re having trouble setting up the background image properly. Let me walk you through a solution to ensure the image displays correctly on both desktop and mobile versions.

Step 1: Organize Your Files

Make sure the images for the background are located in your images folder, and you know their filenames (e.g., background-desktop.jpg and background-mobile.jpg).

Step 2: Update Your HTML

You don’t need to add the background image directly to the HTML. Instead, it’s better to use CSS to handle the layout. This keeps your code cleaner and more flexible.

Step 3: Write Your CSS

Here’s how you can add the background image and make it responsive:

/* General styles for the background */ body { margin: 0; /* Remove default margin to prevent gaps */ background-size: cover; /* Ensure the image covers the entire viewport */ background-repeat: no-repeat; /* Prevent the image from repeating */ background-position: center; /* Center the image in the viewport */ } /* Desktop version */ @media (min-width: 768px) { body { background-image: url('./images/background-desktop.jpg'); /* Desktop background */ } } /* Mobile version */ @media (max-width: 767px) { body { background-image: url('./images/background-mobile.jpg'); /* Mobile background */ } }

Step 4: Explanation of the Code

background-image: Specifies the image file for the background. Use url('./path/to/image') to point to the file location.

background-size: cover: Makes sure the image covers the entire viewport without distortion.

background-repeat: no-repeat: Ensures the image is displayed only once.

background-position: center: Aligns the image to the center of the viewport.

Media Queries: These allow you to use different background images depending on the screen size.

Step 5: Test Your Design

Open your project in the browser and resize the window to see how the background image adapts.

Check both desktop and mobile views to confirm that the correct image is being displayed.

Let me know if you need further help or feedback on other parts of your project. I hope I've helped you! 😊😊
0
Wanderson Aguiar da Silva•10
@wanderson3043Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
Por ser meu primeiro desafio conseguir conclui-lo é motivo de muito orgulho para mim. Estudaria o passo a passo, fiquei meio perdido do que fazer.
What challenges did you encounter, and how did you overcome them?
A imagen não estava se ajustando ao tamanho do container.
What specific areas of your project would you like help with?
Gostaria de ajuda para corrigir se eu fiz certo o projeto, por exemplo no css.
Qr-code
1
Brian Muniz Silveira•120
@BrianMunizSilveiraPosted 5 months ago
Olá, tudo certo contigo? Espero que sim!

Em primeiro lugar gostaria de te parabenizar por ter conseguido realizar este desafio, partindo para o CSS agora; realizei este desafio recentemente (não esta perfeito, mas feito melhor que perfeito😅😅), acessando o meu perfil aqui no Frontend Mentor ou até mesmo la no Github, assim você consegue analisar e comparar os códigos e possíveis melhorias.

Sobre o 'Passo-a-passo' de um projeto isto você consegue vendo vídeos de desenvolvimento de outros Dev's, como Este video que é o desenvolvimento do zero passo a passo de um desafio e existe muito outros que você pode encontrar por ai.

Sobre a correção é mais uma questão de pratica em si e com o tempo se vai entender o que precisa ser melhorado no código.

Boa sorte!
Marked as helpful
2

Brian Muniz Silveira

All comments

QR code

Code Review and Suggestions

Positive Highlights:

Suggested Improvements:

1. HTML Structure

2. CSS Adjustments

3. Accessibility

4. Performance Enhancements

5. Responsiveness

6. Consistency and Maintainability

Summary

Responsive Order Summary Page using HTML & CSS

Code Review and Suggestions

Positive Highlights:

Suggested Improvements:

1. Accessibility Enhancements

2. Responsive Design

3. CSS Improvements

4. Performance Optimization

5. Content Alignment

Summary

QR CODE card

Sugestões para o Desafio: Component de QR Code

1. Responsividade

2. Acessibilidade

3. Centralização Melhorada

4. Melhorias Tipográficas

5. Sombras e Interatividade

6. Separação de Estilos

Resumo

A responsive Order summary component card built with HTML and CSS

Solution Retrospective: Order Summary Component Challenge

What Are You Most Proud Of, and What Would You Do Differently Next Time?

What Challenges Did You Encounter, and How Did You Overcome Them?

Suggestions for Improvement

1. Fixing Cross-Browser Styling Issues

2. Refine the Payment Container

3. Enhance Mobile Responsiveness

4. Add Hover and Focus Effects

5. Comment Your CSS for Clarity

Summary

plain CSS

Solution Retrospective: QR Code Component Challenge

What Are You Most Proud Of, and What Would You Do Differently Next Time?

Suggestions for Improvement

1. Make the Component Responsive

2. Improve HTML Semantics

3. Add Interactive Details

4. Centralize and Reuse Styles with CSS Variables

5. Comment and Document Your Code

Responsive QR Code Component using CSS grid and flexbox

Solution Retrospective: QR Code Component Challenge

What Are You Most Proud Of, and What Would You Do Differently Next Time?

What Challenges Did You Encounter, and How Did You Overcome Them?

Suggestions for Improvement

1. Make the Component Fully Responsive

2. Semantic HTML

3. Improve Typography Readability

4. Add Subtle Interactivity

5. Code Comments for Maintainability

6. Consider Using Utility Classes

What Specific Areas of Your Project Would You Like Help With?

Summary

qr code challange

Feedback for Your QR Code Component

1. Remove Duplicate background-color Declaration:

2. Responsive Images:

3. Typography Improvements:

4. A11y (Accessibility) Improvement:

5. Remember Responsiveness:

First solution of a QR Code component with HTML and CSS

Feedback for QR Code Challenge by "massiro"

Strengths

Suggestions for Improvement

1. Accessibility Improvements

2. Typography Adjustments

3. Responsiveness Enhancements

4. Footer Positioning

1. Remove Duplicate `background-color` Declaration: