This past week has been a slow ascent up the mountain of CSS. I’ve taken my pace down a bit, but have kept it very steady and consistent. Pushing out small aesthetic changes to the Lainsite. Along with this, I’ve been carefully working through FreeCodeCamp’s webdev course. I got through the CSS course and am almost completed with FCC’s Intro to Applied Visual Design. In the course, I went over the basics of contrasting and tertiary colors, went over applying visual elements to text like emphasis or strong (italicized or bold), and I learned more deeply about applying color to elements such as gradients or using “Hue, Saturation, Lighting” (HSL).
Something I learned, but need to go back over is positioning elements. Now, the Lainsite’s home/index page has two block-level elements floated left & right. Unfortunately they aren’t floated on mobile. I did look up what’s wrong with this, but it apparently has to do with media queries, and I’m not fully read on how those function. I watched a couple Youtube videos that mentioned them, and I’m close to getting to the responsive design section on FreeCodeCamp. I plan to wait to fix this till then, so I can get the basics of media queries before jumping in.
Along with float there was the position CSS attribute. I need to study this attribute more and make a test page for it. Although, I recall it as easy and I wrote pretty comprehensive notes on how to use position, though this info presently escapes me. With positioning and manipulating elements there is a lot of depth. I assume I could spend a few days worth of study time in Mozilla Development Network and with test pages. I don’t think this would be very good use of my time. I recognize that I need to jump into Javascript soon, before mastering CSS.
After learning these juicy CSS toys and more, I turned and applied them to the Lainsite. Discovering the shade of blue that all the block-level elements are now. I discovered the shade with HSL, hsl(200, 25%, 40%), it’s a pretty color. From here I applied a gradient to the body of the pages, this gradient was originally two different shades of grey. The gradient looked off, so I found a low-saturation purple (#454666) to use instead. I just tweaked the hex a bit until I got a clean looking color. I’m wondering if it’s okay to define color in CSS in different ways. Is it something that I should be consistent with? I assume not, but it probably is best practice.
Other than these major aesthetic changes, I made minor tweaks to the margins and padding of my pages. I also began consolidating my CSS into singular classes or selecting all elements instead of making three different body ID’s. This lead to text in the copyright footer to being too bright and the blue that’s used for most text on the site. Similarly, it led to some of my blog pages to use this same blue. I fixed the footer, but I have yet to fix the blog because they’re still very readable. Though, I should have the blog’s text color fixed before I put this post up.
I also, finally got unlazy and styled the nav bar more. In my opinion, it looks really good. I would like to develop that into a drop-down or more stylish looking nav bar, but, for what it is, the current nav is pretty keen.
From here on my goals are to continue pushing forward my Neocities. The site is up to six followers and ~five-hundred views. I’m almost done with FCC’s Applied Visual Design course, and I’m onto the intermediate CSS portion of the Udemy Bootcamp. Goals are just to keep pushing forward, by next post I want to get to FCC’s CSS Flexbox section and through the Bootstrap 4 part of the Udemy course. FCC’s flexbox course is in two sections. Getting through Bootstrap 4 will be three parts of the Udemy course.
This next push is going to be big.