Introduction of HTML5 and CSS3 using freeCodeCamp

HTML5 and CSS3 are the backbone for any website and I didn't know the basics at all. This is one of the reasons I chose to use Pelican and Markdown to write this blog. For some reason, I thought HTML5 would be somewhat hard to learn (with all the different tags) and Markdown looked easy enough as it converted what I wrote into HTML5.
However, the personal Django website I'm trying to make needs some front-end work, therefore, I went on to learn it from freeCodeCamp's Responsive Web Design Certification course. Doing this course, I found that HTML5 wasn't as difficult as I thought (this blog post is written with basic tags with HTML5), but the formatting with CSS was the actual difficult work.

My Thoughts on the Responsive Web Design Course

Thoughts on learning on the content

I had no idea what "responsive web design" really meant and only clicked on the course because it was an intro on HTML and CSS. This course is divided into a couple of different modules covering different parts of HTML, CSS, and finally about being a "responsive web page." The HTML tags and CSS elements modules were straightforward and a good intro into the subject. Information was fed in manageable bite size pieces to create a foundation. The later lessons built on the basics and became more complex. Initially, I didn't like freeCodeCamp's way of presenting new information since I thought the information was sparse, but I did like the step-by-step instructions on building a example HTML page. The concept of the lesson would be on the left section of the page, the middle section was example HTML code that I would manipulate that outputted the view on the right section. It clearly showed how each HTML tag was used or how a CSS element changed the webpage.

The main problem with this learning format of bite size information was that you could go through a module very quickly. I knew if I went through this course too quickly, I wouldn't retain most of the information. Therefore, I forced myself to slow down by taking notes with pen and paper. The physical notes were a good way to review what I previously learned and easy to look back to rather than clicking through the course and rereading the lesson again.

Due to the bite size information format, I had problems with parts of the lesson that didn't explain the concept well or I didn't understand. The first time that happened, I read and went ahead to the next lesson with plans to come back to it later and that worked for some. For instance, I didn't understand media query the first time it was introduced and understood it later when it was reintroduced in another lesson. I went back to the previous lesson and understood it better than the first time around.

Since these modules served as a introduction into the subject, it wasn't very detailed (and that's the point for "HTML5 and CSS3 for Dummies"). After getting a introduction, I was curious about other tags in HTML5 and again, Mozilla came through. MDN Web Docs on HTML provided detailed information each tag with possible attributes. The CSS documents were also helpful and a lot more detailed. HTML5 doesn't have too much compared to CSS and there are a lot more stuff in CSS that hadn't been covered in freeCodeCamp, which I saw in MDN Web Docs. Plenty more to learn.

Current place in the course

I've finished all the lesson modules and on the projects portion of the course. My regret is that I should've done some of the projects in between modules. The first project of building a tribute page is simple enough with basic HTML and CSS that they introduced in the first two modules. I am currently working on the second project of building a survey page since I couldn't figure out a subject to make a tribute page for. The biggest obstacle I have with these projects is to think of my own project idea and content.

I'm also still struggling with CSS and making a good responsive web page. They really hammered down the point that a responsive

freeCodeCamp encourages using Codepen to submit your own projects to get certification for the course. Codepen is a place to code front-end and save your work on the cloud. It also has a social aspect where you can share the webpages you create. I think Codepen is awesome for one page front-end work. Pycharm is my current go to IDE, but it doesn't display in realtime what the webpage looks like Codepen does. You do need a large screen to simultaneously display HTML, CSS, and Javascript along with the realtime display. You probably can't create a complex website with many pages with Codepen, but to style individual pages and see what it looks like immediately is what it does best.

Summary

freeCodeCamp's Responsive Web Design is a good introduction to the HTML5 and CSS if the audience's learning style fits the teaching style. I also recommend looking at additional resources after learning the basics at freeCodeCamp since they don't go into detail.