Skilled E-Learning Landing Page

Hi Jen, well done completing this, and it's good to read about your learning process. I fully agree with what you said about being able to find the best way of working through these layouts through much experimentation, as this is something I'm continually working on as well.

There are 2 suggestions I can give you here that may be able to help you do things in an easier way:

First, you can try using a container for your three sections. In the design, the contents of the three sections have the same width, and it's very easy to use a container to do this. All you need is to add a div as the section's direct child element in the HTML, and then in the CSS, you only need to set the width of the container, no need to add padding or add a width property for the section's contents. It'll look a bit like this:

<header>
   <div class="container">
      // rest of your header's contents 
   </div>
</header>

<main>
   <div class="container">
      // rest of your main's contents 
   </div>
</main>

<footer>
   <div class="container">
      // rest of your footer's contents 
   </div>
</footer>

For the CSS, I'd use a responsive min() for the width. In the min(), I'd give the browser two options to choose from, which is either 100% of the width minus 4rem (as margin space), or the other option is 1100px wide. The browser's job is to choose the smaller width out of these two depending on the browser width. Once the same width is set, you can remove all the side padding that got added. The CSS will look like this:

.container {
   width: min(100% - 4rem, 1100px);
   margin-inline: auto; // this keeps the contents centered
}

The second suggestion is, I notice you got some white space margin/padding, and this is because you don't currently have any normalize/reset rules in your CSS. For me, there isn't a project I build where I don't use reset rules because every browser has their own default styles, and to ensure our designs can be consistent across most browsers, we'd need to "normalize" the browser styles first. Here are some basic ones you can use at the top of your stylesheet, and they're mostly taken from Andy Bell's CSS reset rules:

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font: inherit;
}
html, body {
  height: 100%;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

Hope some of this info can help you out, and keep going! 😊