Brian Muniz Silveira

@BrianMunizSilveiraGuarulhos, São Paulo, Brazil200 points

19 years old, passionate about reading and Speedcubing. Determined to grow in the world of programming.

Latest solutions

Qr Code Component
Brian Muniz Silveira•200
Submitted 10 months ago
I would like help with alignment because I still feel a certain difficulty in getting the alignments right. However, I believe that with a little more practice, this will become easier. I still feel lost with display: flex and its properties, but I will be practicing. I believe this was my biggest challenge; the rest was a smooth process.
1 comment
Desafio do Order Summary concluído
Brian Muniz Silveira•200
Submitted 10 months ago
1 comment

Latest comments

Andrea-gli•10

@Andrea-gliSubmitted 5 months ago

QR code

Brian Muniz Silveira•200

@BrianMunizSilveiraPosted 5 months 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•130

@mamman-nafSubmitted 5 months 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•200

@BrianMunizSilveiraPosted 5 months 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!

Marked as helpful

Morrango•80

@MoranggooSubmitted 5 months ago

QR CODE card

Brian Muniz Silveira•200

@BrianMunizSilveiraPosted 5 months 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.

Marked as helpful

Taophyc•350

@TaophyccSubmitted 5 months 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•200

@BrianMunizSilveiraPosted 5 months 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•200

@salilphadnisSubmitted 5 months 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•200

@BrianMunizSilveiraPosted 5 months 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•70
@PatLattingSubmitted 5 months 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•200
@BrianMunizSilveiraPosted 5 months 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

View more comments

Brian Muniz Silveira

Latest solutions

Qr Code Component

Desafio do Order Summary concluído

Latest 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