@MoodyJW
Posted
Hi Arnav, great job on your first challenge!
I'd suggest taking a look at your report as you have some HTML issues.
-
heading tags like
<h1>,<h2>, etc should always appear in order. The reason for this is that it allows people using screen readers to more easily navigate the page. If you need to adjust the size of the heading, just use CSS -
after your
<body>, you should wrap content in a<main>tag. This is also mostly for accessibility reasons. You could swap your<div class="container"> -
<img>tags can only have widths in pixels when done inline, you can generally solve this by using a CSS class -
on the page background image, you would probably have an easier time adding that image on the
bodyin your CSS. Something like below would do the trick, but you might need to adjust if your other CSS interacts
background: var(--pale-blue) url("../images/pattern-background-desktop.svg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
- another suggestion is to clean up your code a bit. Generally it's a good practice to avoid empty lines within your CSS class or randomly in your HTML. Clean, easily read code will help you get a job if you're trying to and it'll make people more likely to review your code here and elsewhere.
You can use a code formatter if you code in an IDE like VSCode. A lot of people use one called Prettier, but there are many others. I'd also suggest looking into learning Sass, it's a CSS extension that has a lot of neat features; it's also a "superset" of CSS, which means any valid CSS will work in a Sass file. Kevin Powell has a YouTube video on how to get started with Sass that I found helpful.
Anyway, that's probably enough for now. Good luck, hope some of this helps!
Marked as helpful
@arnavdoley
Posted
that's some great suggestions , I will look into making changes to the code and also to learn Sass.Thank you for helping me improve @MoodyJW
