DEV Community

armstrca
armstrca

Posted on

Unearthing ancient HTML memories

For the hello world & link-in-bio projects, I was kinda pleasantly surprised how much HTML I still remembered from the oooold days of customizing my Myspace page & stuff. The CSS was completely new to me, though. I appreciated how much more easy it is to make formatting uniform with CSS as opposed to just HTML.

Looking back at my link-in-bio code, I feel pretty solid on understanding the HTML parts of it, as well as most of the CSS. I'm less solid on some of the "bonus" modifications I made to the visual aspects of the site after having completed the core of the assignment. I understand what the code is doing and saying, but I don't feel like I've learned it because I just copied & pasted from the supplemental sites at the bottom of the assignment. For example:

    body {
      background-color: #e5e5f7;
      opacity: 0.8;
      background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #e5e5f7 75px), repeating-linear-gradient( #ccffff55, #ccffff );
      background-origin: content-box;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      display: flex;
      justify-content: center;
      font-family: Tahoma, sans-serif;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
Enter fullscreen mode Exit fullscreen mode

I understand all of that, but I had no idea "repeating-radial-gradient" was a possible object in CSS. Additionally, the 100vh height aspect was, as I recall, another bonus aspect from when I later tried to tailor the site so that it would display well on both desktop and mobile, as seen here:

    @media only screen and (max-width: 1200px) {
      body {
        overflow: hidden;
      }

      .items {
        max-width: 55%;
        max-height: fit-content;
        transform: scale(1.5);
        transform-origin: top; 
        overflow: hidden;
        padding-left: 20px;
        padding-right: 20px;
      }
Enter fullscreen mode Exit fullscreen mode

In these instances I'm not worried about my ability to understand what's going on, it's just that they're using tools that I haven't learned yet, and as such I wouldn't feel confident in a subsequent circumstance coming up with the same kind of solution myself.

Top comments (0)