Basic Responsive HTML5 and CSS Tutorial
Traversy Media’s YouTube HTML5 tutorial for Beginners
If anyone has ever wanted to learn HTML5 and CSS3 to start with, there are a number of YouTube tutorials to get you started. One of the best one’s we have easily found on YouTube is Traversy Media’s “Build An HTML5 Website With A Responsive Layout” tutorial. They seem very comprehensive in their beginners course for learning HTML5 and CSS3. We have screened these videos for you and found that -while the site file links are broken in the description of the video, we have gone through the video and made the files available to you via our GitHub repository located here:
https://github.com/AdamRj-765/Traversey-Media-HTML-04
Our goal was to go through the tutorial and see if there were any alternative ways to how we code websites that we could pick up from the team over at Traversy Media. And we did get a few semantic HTML5 alternative ideas. It also gave us the idea that a simple site layout can be made to look fairly good for a very low custom website design cost and we want to also offer it as a borrowed template and as a design that (while Traversy Media deserves credit), we can offer as a template for anyone who wants this simple design for their site. We give full credit to the designers at Traversy Media for their original idea.
So, we want run through the tutorial and give some commentary on the coding process, it’s values, and our criticism on what could be stronger.
Essentially our first criticism of the video is that it is slightly dated. The video was posted late 2016 and a lot of things have changed in five years. On the other hand, it serves as a good basis for responsive site layouts that don’t use the meta tag that became more velavent just after this video was published that is more commonly used today which is this:
<meta name="viewport" content="width=device-width, initial-scale=1">
We find this interesting, but we won’t delve too deeply into the slightly aged aspect of this tutorial. One thing we picked up from them is that both Sublime and Atom text editors both have by default the semantic tag and boilerplate function that operates similarly in each editor. When your starting a new index.html page, you can simply type:
html + TAB
and the editor creates a very basic html boilerplate starting code for you. This comes out to look something like this in Atom:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./css/style.css"> </head> <body> </body> </html>
Which is a very simple beginning for an HTML5 document. While we don’t want to go too deep into all the steps for this nice tutorial, we will just mention that this video has many attributes that we found to be very useful for beginners. This was one of the things we found to be helpful to the beginner coder.
Another good point this tutorial made was that the semantic elements are very important to the WWW Consortium (W3C), and thus we feel it is very good for SEO. Google (to name one of the biggest search engines), will actually doc you on points for using too many <div> tags. It is better if you are going to name an element that has semantic value and is part of the HTML5 structure, you should always use them in the place of the div class.
For now, we will stop here and continue on a later tutorial post.
