HTML, CSS, and JavaScript are the 3 cornerstones of web development. This lesson provides an overview of what they are through a series of short videos with the goal of letting beginners learn the tools in a step-by-step manner. As JavaScript is more suitable for mastery at a later stage, it will be covered in future lessons after more fundamental programming concepts have been mastered.
Visual Studio, Chrome Inspector, Git, and GitHub will also be introduced here as the main tools for creating, debugging, and sharing the HTML and CSS codes.
Deconstruct the DOM (Document Object Model) architecture and the Box Model of HTML elements using the browser inspector (e.g. the Developer Tools under the View menu in Chrome).
Make use of HTML5 elements (e.g. header, nav, aside, section, article, and footer) and the “div” tag for composing the web page.
Placing elements within the page layout using static, relative, absolute, fixed, and sticky positions.
Styling and combining HTML elements with selectors and properties.
Understand where to place the styling rules (in-line, internal, or external) to provide instructions to the browser for correctly displaying the web pages.
Visual Studio Code is the most popular code editor used by developers to edit HTML, CSS, and Javascript codes. It is free with extensive extension supports. The Chrome DevTools including the browser inspector will allow coders to debug their codes effectively.
Git is an indispensable tool for version control. Github is an online platform for developers to store and share their codes. GitHub Desktop provides a friendly interface to new coders in using Git and GitHub.