Frontend Mentor | Tomas Scerbak's profile

Eleanor Worthington•10

@Eleanor-hn

Submitted about 3 years ago

QR code component challenge

2

Tomas Scerbak•720

@TomasScerbak

Posted about 3 years ago

Hi @Eleanor-hn,

let's start with HTML issues:

1

<center></center> tag is depracated HTML tag You can read more about this here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

You can use <div></div> tag instead

2 Your HTML should always be structured with semantic tags so that browser can better read structure of your webpage:

<header></header> <nav></nav> <main></main> <section></section> <footer></footer> In this particular case you only need <main></main> tag for main content which is card and you can also use <footer></footer> tag and move there your attribution <footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Eleanor Worthington</a>. </div> </footer>

you can find more info here: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

3 your webpage should contain heading tags. You can replace p tag with h1 tag for "Improve your front-end skills by building projects" sentence and give the h1 element specific font -size.

4

<figcaption> tag should be used on images with description. You can replace this with div as well and give it class

5 never use inline styles to style your website. It's very bad practice. You should only apply styles in your css files.

From the CSS

your card is not visible on mobile devices. You should use mobile first approach. Try to avoid using specific widths and heights.

you should be able to fix your card position by:

#bodywrapper { height: 100vh; display: flex; justify-content: center; align-items: center background-color: hsl(212, 45%, 89%); }

if FLEX is something new to you, I highly recommend learning it as well as GRID as these two properties are most crucial when it comes to webpage layout.

Keep up the good work and have fun! :)

Marked as helpful

Ruan Carlos•30

@ruancs

Submitted about 3 years ago

Pagina responsiva utilizando display flex

1

Tomas Scerbak•720

@TomasScerbak

Posted about 3 years ago

Hi Ruan,

you have missed semicolon on line 19 in your CSS file. Also line 54 has z-index property with no value.

Regarding attribution: if you want your attribution to be displayed move this code to CSS file.

<footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">RuanCs</a>. </div> </footer>

Marked as helpful