I am signed up for an online course on Pirple. The course is called “Frontend Fundamentals” and covers HTML5 and CSS. It’s sort of back to the basic for me, I am taking it while waiting to get back into the workforce. I have worked on many websites, but never formally learned HTML or CSS. Often times, if I needed something, I would Google for the solution, customize it, paste it and move on. Copy-paste programming. Also, I only knew HTML4. Surprised to see so many elements in HTML5 and recently I saw the magic CSS can do. This time, I am determined to learn the basics, so I can do a better job on the front end as well and become a truly fullstack developer.
I am currently working on a project using HTML5 to create a web page that has several HTML elements including the new HTML5 elements and showcase a story/book I read. I chose to do a story and resorted to a storyteller site called telltale.eu.
I decided to use header and footer elements. Though, these may be just syntax sugar of DIV, they offer the possibility of better division and styling of content. These are called semantic elements as they offer a attached meaning to the content unlike the DIV. I also used other semantic elements such as form, article, aside, section etc. Here is a nice website that describes HTML5 in detail. I have included the short story in text as well as a Video element to point to the narration by Richard Martin. It’s a Vimeo video.
To embed the video, I was not able to just include Video Tag pointing to the video url. I had to go to Vimeo Video and click on Share to get the embed code. This contains an IFrame. See W3schools about iFrame – the site calls it an external document embedded within the HTML document. I probably needed to use iFrame, as I was embedding a web page and not a video (like .mp4) directly.
After this, I included a form to add user comments. I made use of Label…for and also “placeholder” attribute for input fields to clearly mark what the user needs to enter. I have included a Select field as well.
To top it all off, I included the new DL/DT/DD (Description List and items) elements to include a Glossary for the terms and names that may not be universally known.
The web page is plain and simple – it doesn’t have any style nor does it have any Javascript to add dynamic capabilities. But, I have generously used DIV, SECTION and ARTICLE elements and also id for the elements in hopes of styling them better when the CSS class is done.
In the project description, they asked us to use 5 elements that they didn’t cover yet. I think, I have used more than that – aside, article, section, ds, dt, dd as well as video, form, input and Select elements.
If you are interested in web building and you want to start from scratch, this course on Pirple is definitely a winner. For tools, you can use variour editors on the desktop, but I prefer to do it in jsbin.com, where you can actually create HTML, CSS and Javascript based web pages and share it with others. Here is a snapshot of my html file on JSBin.
Power to Build 