My Intellectual Growth on HTML5 and CSS3


“Intellectual growth should commence at birth and cease only at death.” Albert Einstein is attributed with this quote, and it is one that really rings home with me, as it is the basic premise for how I have tried to live my life so far. As you may have read in my previous post, I have embarked on a journey to re-educate myself on front end development knowledge. Right now I am specifically focused on the knowledge that will allow me start a custom web development business for local, small to medium businesses. This will be a “side hustle”, as my younger brother likes to refer to it, but depending on the amount of business I can generate, it could evolve into a more permanent profession.

From the previous post, you may have taken notice that I am currently taking the course titled, “React JS - A Complete Guide for Frontend Web Development”. So far, this course has been a great refresher on things I regularly used in my previous life. It has also provided plenty of information on capabilities that did not existent when I regularly wrote code, or took a lot more effort to accomplish than it does now. For example, the CSS3 concept of Flexbox did not exist when I was turning out web pages. Using this concept makes creating responsive web designs very easy to do, and allows web pages to adapt to desktop and mobile screen resolutions.

If you want to learn basic HTML coding, the first section of the course will definitely provide you with the requisite knowledge. It is roughly 3.5 hours long, not counting the time you could spend on the practice exercises and the final project, which I will get to in a moment. The content is ideally broken into segments, averaging anywhere from 2 minutes to 15 minutes. This makes it very easy to consume, and will probably help if you have frequent distractions (this is the case for me, as my kids are currently in a remote learning environment). While I recommend taking the entire course, you can take the HTML5 section of the course independently.

The final project of the HTML5 section will have you create a very basic “travel diary” website. While it is basic, it is a good exercise of almost all the HTML5 knowledge you have gained throughout the course material. I have uploaded this project to CodePen, for the benefit of those who might be interested to know what some output of the course is. For the rest of you, here is a quick screenshot for your viewing pleasure:


The next section of the course is focused on CSS3. This section is roughly 4.5 hours long, if you again exclude the time spent on the practice exercise and final project, and is also broken into segments of mostly 15 minutes or fewer. I received a lot of benefit from this section of the course, because as I noted above, there have been several really beneficial things added to CSS since I regularly created web pages. Again, the CSS3 section can be taken independently for those of you who are just looking for CSS specific content.

The final project of the CSS3 section took me a little longer than the HTML5 final project. This is mostly because I really focused my time on fully understanding concepts new to me, like Flexbox. I also spent a considerable amount of time testing and refining the transition between desktop and mobile device resolutions. This is something I want to make sure I get right, as it is a constant factor in our world today. The result is the creation of an example template, based on the concept of a vegan focused, nutrition website. For those of you who are interested in exploring the output of this project, I have also uploaded it to CodePen. For the rest, here is a screenshot for your continued viewing pleasure:


The next section I will embark on is focused on JavaScript. This is another section I am very much looking forward to, mostly because I am curious if there is anything new I will learn, or if it is just a refresher course like the HTML5 section. Once I complete the JavaScript section, I will post a brief review of it, like I did with the previous two sections, and any project output that I think you may find interesting. Until then, thanks for joining me on this journey.

Comments

  1. Wondering where your JS journey took you in this past year.. :)

    ReplyDelete

Post a Comment