Day 2: Grid in CSS

Off the Grid

Today I updated my basic webpage using a CSS grid format. Getting back into grid was not as bad as I would've imagined (perhaps I was thinking of its far scarier cousin flex-box) and I was able to create a simple layout I was happy with. I really like the look of webpages that use very simple colors and layout so that is exactly what I was going for. But there is still a lot that I want to expand on in the coming few days to make it much more visually appealing.

I also want to start to add some more content to the page. At the moment, it looks more like a powerpoint slide that a site and I am hoping that this is no longer the case after a few more days of contributions. My original thought was that I would spend my time relearning HTML and CSS making several smaller pages, but now I think I would rather expand upon a single site and make something larger that I am really proud of.

Today's Contribution

The HTML did not change much from yesterday. The biggest change was restructuring it a little to allow me to easily create the grid I wanted in the CSS.

<div id="grid-container">
      <div id="grid-header">
        <div class="grid-item">
          <h1>Day 2 of 100</h1>
        </div>
      </div>

        <div class="grid-item" id="upper">
          <p>
            Super excited to be starting my #100DaysOfCode Journey! I hope to
            get a good refresher on my knowledge of HTML and CSS and take a deep
            dive into JavaScript.
          </p>
        </div>
        <div class="grid-item" id="middle">
          <p class="list-header">New things I hope to Learn</p>
          <ul>
            <li>Base JavaScript</li>
            <li>NodeJS</li>
            <li>REST API</li>
            <li>VueJS</li>
          </ul>
        </div>
        <div class="grid-item" id="lower">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit ad consequuntur architecto, excepturi sequi maxime debitis, distinctio dolorem temporibus doloremque at similique. Illo voluptas odio exercitationem sint! Veritatis impedit cupiditate perspiciatis eum, iste ea nobis nulla enim modi temporibus vitae sapiente, harum saepe nemo pariatur. Eos aliquid enim repellendus perspiciatis!</p>
      </div>
    </div>

The biggest changes today were found in the CSS. I added a bit more styling in terms of color but spent most of my time working on the layout of the grid itself.

body {
  background-color: white;
  color: white;
  margin: 0;
  height:500px;
  padding: 0;

}

#grid-container {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    height: 300px;
    margin: 0;
    width: auto;
}

.grid-item {
    padding: 75px;
}


#grid-header {
    background-color: rgb(175, 207, 229);
    grid-column: 1/-1;
    text-align: center;
}

h1 {
    font-size: 64pt;
}

#middle {
    background-color: rgb(230, 117, 113);
    padding-top: 10px;
    font-size: 18pt;
    text-align: center;
}

.list-header {
    margin: 20px, 0;
    text-decoration: underline;
    font-size: 20pt;
}

ul {
    margin: 10px;
    list-style: none;
    text-align: left;
}

li {
    margin: 15px 0;

}

#upper {
    background-color: rgb(38, 50, 91);
    font-size: 24pt;
    padding: 7%;
}

#lower {
    background-color: rgb(231, 219, 147);
    font-size: 18pt;
    padding: 7%;
}

Next Steps

Tomorrow I need to first see if there is anyway to clean up the code a bit. I often found myself hastily changing the CSS so I'm sure there are plenty of repeated code or other things that could be removed. After that, I plan to add some more content to the page and continue with the style that I have been using so far.