Eleanor Worthington• 10
@Eleanor-hn
Submitted
Is there any way I could have made my code more concise or clear?
Tomas Scerbak
@TomasScerbak
All comments
- Tomas Scerbak• 720
@TomasScerbak
Posted
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/centerYou 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 class5 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
0 - Ruan Carlos• 30
@ruancs
Submitted
I would like some feedback on how there could be a way to make it responsive without using so many media queries
Tomas Scerbak• 720@TomasScerbak
Posted
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
0 - Habouche khaled• 10
@codewithabdou
Submitted
What do you think ?
Tomas Scerbak• 720@TomasScerbak
Posted
Hi,
if you want your card to be in the middle of the screen apply height: 100vh on .container class
1 - Vueko• 160
@Vueko1
Submitted
How do I make those lines at the top of each item ? Also is there any way to make line break after word "points" so that it isnt so long ?
Tomas Scerbak• 720@TomasScerbak
Posted
Hi Vueko, I used
inline-size - 50rem;
to shorten the line and make it break
0 - Christopher J Mendez• 50
@cmendez20
Submitted
This was a fun layout to build. My question is, how did you go about adding an overlay to the image?
Tomas Scerbak• 720@TomasScerbak
Posted
Hi @cmendez20,
my approach was to give my main card background color and used mix-blend-mode: overlay; for img.
sass --color-card-background: hsl(244, 38%, 16%);
.card background: var(--color-card-background);
.card-image { width: 100%; mix-blend-mode: overlay; object-fit: cover;
0 - Tomas Scerbak• 720
@TomasScerbak
Submitted
Tomas Scerbak• 720@TomasScerbak
Posted
Just finished "Huddle Landing Page", any suggestions for improvment would be appriecieted.
0 - Ahmed Saidi• 130
@AhmedSaidi99
Submitted
Hello developers, I appreciate for any advices and suggestions.
Tomas Scerbak• 720@TomasScerbak
Posted
Hi Ahmed, nice work. I'd like to ask, how did you change color of the picuture? I took this challange yesterday and I was unable to change the color with any css property. Thanks.
0
