Learning Log: Sunday February 18 and Monday February 19, 2018
As mentioned in the previous post, I wanted to return to my writing workflow of taking daily notes on active learning pursuits in my live notebook and then refining into somewhat longer articles. This practice of daily writing about what I’m learning is useful as it causes me to engage in a level of reflection on new topics, during which I can observe trends in my learning processes as well as examine the ebbs and flows of my productivity and discovery.
Updates on Pursuits
After writing a lengthy article yesterday trying to recall all the learning I did for all of last week I vowed to return to my previous workflow of quick, (hopefully) daily, notes.
With that said, I want to take this time to document what I did over the last two days. I’ve been working on our wedding homepage, which is a static site with a form that uses formspree.io to provide that dynamic element. After researching lots of layouts, Tracy and I found that many of the existing wedding site templates and formats, especially for WordPress, contain far too many features and what I would consider to be bloat.
We went over what we actually need for our site and realized that we really just need a simple single-page static site with basic information, with the exception of an RSVP form.
Start With What’s Necessary
After some initial difficulty on my part, I found a basic HTML5 template that we both liked and I started tweaking it. I realized that I still have a good bit to learn as far as CSS layout, but this has been an excellent learning experience over the last day!
As I worked on modifying the existing template and adding lots of customization (and removing unnecessary elements/styles) I decided to do two things:
- Continue to make changes to the template as is and work within the existing .css file as I made changes. While doing this I practice my styling skills and reinforced my understanding of layouts.
Build out an alternate version from scratch, utilizing Sass and a lightweight layout framework such as Skeleton CSS.
This has been a great learning experience so far and I look forward to practicing my HTML/CSS skills. Additionally, this led me to work through the following courses:
Pluralsight: Building Websites with Skeleton CSS – Gary Simon
Pluralsight: Hands on Responsive Design Using a CSS Preprocessor – Paul Cheney
Pluralsight: Hands-on Responsive Web Design 1: Media Queries – Paul Cheney
I’m also practicing Bulma, Flexbox, and CSS Grid. The best way to pick something up is to dive in and try it! I’m finding that I enjoy front-end design quite a bit and that the more that I practice foundation skills the faster I get at realizing my vision!
Updates on Active Practice
Motivated by my progress on Sunday, I continued to work on our wedding website throughout Monday. This was an excellent opportunity to practice my layout and design skills using HTML and CSS. We came up with a layout and I had a great time creating a color palette and putting our site together.
This experience inspired me to finally do some active practice with CSS Grid. I jumped around a bit last night through various learning guides, but eventually landed on Morten Rand-Hendriksen’s Lynda course on CSS Grid. Before going too far into the course, I started applying my basic knowledge of Grid and worked to rebuild our wedding page, since that was the most recent project I’ve been working on. I quickly realized I needed a few more tools, so I continued to work through the course.
Active Practice and Thoughts on CSS Grid
CSS Grid is amazing. I’ll be the first to admit that I’ve struggled to connect the designs and layouts I visualize/wireframe with how to actualize them with traditional CSS layout systems such as floats. I understood enough to be able to use frameworks such as Bootstrap, but I didn’t like relying on something like that. This has led me to refresh myself on core CSS skills several times over the years, but I found that the various layout methods didn’t quite click. I also thought that frameworks were often fairly bloated for the often simple designs I wanted to create.
Grid and Flexbox Make Sense!
Grid (and Flexbox) make sense to me. I’m a fairly visual person, and both Grid and Flexbox enable me to clearly and logically connect what I visualize with what I’m able to create with CSS. Once I grasped basic concepts such as grid-area and the basic grid column and row templates, I was able to intuitively explore the tool. When I naturally discovered a need to make my footer stretch the entire length of a page, I immediately came across that there are two highly logical ways to do this.
I’m actually excited to begin crafting some layouts! I still want to work on recreating our wedding layout using Grid and Flexbox because I think it’s good practice. I plan to continue working on building some simple layouts that can eventually be static site themes for Hugo or something else.
I’m very glad that I finally jumped in and tried out both Grid and Flexbox. Much like everything else, it makes more sense once you jump in and try it. If you haven’t experimented with it yet I recommend giving it a shot on a project or a simple layout. Especially if you’ve previously been frustrated by building CSS layouts without the assistance of a framework!
I’m excited to continue working on this and to see where it takes me!
Learning Radar
Other things that have been on my radar leading into this week are frontend frameworks, such as React and Vue. I started working through some practice apps in both frameworks, and I really enjoy Vue. I read a few articles about which to library to start with to produce the the deepest learning experience. I’ve decided to dive in to React and build a foundation before jumping into Vue. The reason for this is that Vue has an easier learning curve and provides an easier user experience. For these reasons, it’s been said to be beneficial to dive into React first. The goal is to build fundamental understanding of how these frontend UI frameworks take data and construct UI components.
Additionally, I’ve been reading lots about UI/UX design and emerging trends in 2018. I have some thoughts on these trends and practices, and will post about them once I formulate them.