Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

My Qrcode

fetch
Bruna Felix•100
@brunafelix79
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


amei fazer esse desafio

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • KAREN X BARNES•20
    @dianthedainty
    Posted over 3 years ago

    Frontend Mentor - QR code component solution

    This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

    Table of contents

    -(#overview) (#screenshot) (#links) (#my-process) (#built-with) (#what-i-learned) (#continued-development) (#useful-resources) -(#author) (#acknowledgments)

    Overview

    Screenshot

    3ee710e441

    Links

    • Solution URL: (https://FrontendMentor-QR code component-url.com)

    • Live Site URL: (https://kadi-rot-ravel-agency-url.com)

    My process

    I had not before tooka picture of QR did not work had to screenshot QR code which got a screenshot. Now going to see how to built with the below titles and what I can't built.

    Built with

    • Semantic HTML5 markup: Elements such as <header>,<footer>,and <article> are all considered sematic because they accurately describe the purpose of the element and the type of content that is inside them. Elements of HTML5: This element can contain many other elements as well including below: <input> <output> <label> <select> <button> <option> <textarea> <optgroup> <fieldset>
    • CSS custom properties: Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.They are set using custom property notation(e.q.--main-color:)
    • Flex vs grid: To put a point on it! 1. Grid can do things flexbox can't do. 2.Flexbox can do things Grid can't do. 3. They can work together a grid item can be a flexbox container. A flex item can be a grid container. CSS Grid: Offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. A grid layout consists of a parent element, with one or more child elements. Flexbox: Use percentages to add a fixed width to the flex items(e.g. width:50%) Use media queries to override this width. When to use flexbox and when to use CSS grid? The main concepts here are this: Use display: grid on a div or section to specify that all content in that container must abide by CSS grid rules. you can then add grid-gap(think padding/margin berween individual grid elements). you can specify the dimensions (in relation to the overall grid) with grid-column-start and grid-column-end. Some goes for rows.

    What I learned

    Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. Learnt there is and difference between flexbox is percentages, padding for the header...Css Grid is the layout system for rows and column design of the webpage.. Semantic HTML5 has a short name HTML5 which include element for instance,<footer>,<input>,<output>....

    To see how you can add code snippets, see below:

    <h1>Contact Information</h1>
    ``<input type = "button" value="Submit"/>
      <footer-content>
      About KADIRO TRAVEL AGENCY LLC  Privacy Policies Affilitates
      <footer-content/>`
    ```css
    .header {
      width:100%;
      height:80px;
      display:block;
       background color: papayawhip;
    }
    
    const Event = (Function Contact Information) => {
      console.log(The event is the contact information)
    }
    

    If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn mo

    Continued development

    Still need to work on<label>,<select>,<textarea>,<output>,<optgtroup>. With CSS the container of the grid and flexbox non-container.

    Useful resources

    • [Example resource 1](https://www.wiki.com/Learn HTML) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
    • Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.

    Author

    • Website - Karen Barnes
    • Frontend Mentor - @comangea
    • Twitter - @mangeli
    Marked as helpful
  • Pedro Brito•380
    @PedroBritoDEV
    Posted over 3 years ago

    acho que o link do repositório está fora do ar e tá atrapalhando na visibilidade do conteúdo.

    Marked as helpful
  • Abdalla Rahmah•260
    @AbdallaRahmah
    Posted over 3 years ago

    Hi @brunafelix79, nice work but you can use semantic elements to improve your SEO.

    Marked as helpful
  • Cleyton Furtado•30
    @CleytonRR
    Posted over 3 years ago

    Olá, adorei sua resolução para o desafio, uma sugestão seria você utilizar um margin-bottom, em vez de um '<br />' para fazer a separação do título para o texto.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub