Structure and design is crucial for anything from console applications and websites. To achieve this, HTML5 and CSS3 are the weapons of choice and being the entry point for most new starters into web development.
This post explains key takeaways that I have learnt over the last week, as well as, a review of the resource of choice, and a retrospective that can be applied going into the next week of learning.
- Main Resource: Responsive Web Design Certification
- Supplementary Resource: Mozilla MDN - HTML Basic
What Was Learnt
Structure, structure, structure and more structure. HTML is the language of structure, one of the key improvements that I can see from the HTML of the past are more structure tags, such as:
<main></main>
<section></section>
<header></header>
<footer></footer>
With the inclusion of these tags, the construction of a HTML document has much greater levels of granularity. Compared to the classic way of using <div> tags to do the same thing. This simple design choice makes reviewing HTML document structure much easier.
The major takeaway that took a little bit to get into is the difference between the <body> and <main> tags in the Document Object Hierarchy (DOM). The following is an example of a HTML5 document with the new tags:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
A simple explanation of the difference is, body is for everything in the DOM, while, main is for unique content to that page.
CSS3 has some interesting additions that I have never used. The psuedo-class and the increase in attaching design to almost anything within the DOM object through the regex selectors.
While this has been a brief re-introduction to HTML and CSS, I feel as if these skills will improve over time in conjunction to learning JavaScript.
Resource Review
FreeCodeCamp is a great area to begin with any campaign to learn programming. The bite-sized snippets of explanation and hands on experience provides a suitable initial entry for any level of learner and the exercises provide a suitable incline in difficulty.
However, for me, the snippet structure approach only goes so far. The need for a single flowing document is useful to ensure that my concentration is maximised to grasp the full structure of the topic.
To support the FreeCodeCamps resource, the Mozilla MDN resource - HTML Basic provided a great way of getting concise discussion of HTML5 material to link with the snippet approach outlined by FreeCodeCamps.
Retrospective
- Supplement the main resource with a secondary (lighter) resources
Sign Off
The next week will be looking at the main topic of the journey, JavaScript. By having a grasp on HTML5 and CSS3, this knowledge will be extremely helpful when using JavaScript to its fullest.
See you in the following week!
~ Jack/eXit
Top comments (0)