The 1st official web tutorial! Here, I start off with the basic fundamentals, which are HTML and CSS. As a recap:
HTML is a markup language which defines the overall structure and basic static content of a webpage
CSS is a styling language which defines the aesthetic properties, and visual design, of both the different elements and the entire webpage
Opinion: If I am going part by part, it is probably obvious I will talk about HTML, then CSS. The reason why I am putting these 2 topics together, is because often times you will be using 1 in conjunction with the other. In addition, I feel it is more complete as practicing both of these languages, produce a bare minimum outcome which is much more substantial than learning standalone.
Basic Environment Setup
For any language you are coding, you will need an appropriate software to do so. It can be as simple as an editor like Notepad++, or an Integrated Development Environment (IDE), like Visual Studio Code (VSC). The software you choose to use depends if you just want a plain “dump and run”, or an editor loaded with features which allows you to code effectively. For a start, I highly recommend starting with VSC.
Opinion: In the SWE industry, it is a de facto for engineers to use an IDE. Some popular ones for web development out there include VSC (free, by Microsoft) and WebStorm (paid, by JetBrains). There isn’t exactly like the best IDE for web development, though some like WebStorm clearly is 1 of the top choices. But the specific choice you end up with, is ultimately up to your preference.
Once you have installed VSC, you will clearly need to know how to use it. Common questions include “how to code on it?”, and “how to see what it looks like after coding?”. This is where you should take some time to play around, or google for guides. The goal of this guide is not to teach you how to use an IDE, but the VSC website has plenty of useful resource for you to check out.
Reference:
VSC main page: https://code.visualstudio.com/
Documentation for usage: https://code.visualstudio.com/docs
WebStorm: https://www.jetbrains.com/webstorm/
Notepad++: https://notepad-plus-plus.org/
dam you a rebel
HTML Element
A webpage is a literal HTML document, which contains the HTML codes representing what we see in a browser. For each of the component we see, it is represented as a HTML element.
Reference: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomy_of_an_html_element
With regards to HTML elements, just some useful pointers:
Elements that do not need to be closed are called void tags. As such, it is a good practice to add a forward slash, right before the tag closure
e.g.
<input type="button" value="this is a button" />
Attributes are technically optional, but heavily recommended to have (i.e. id and class)
HTML Anatomy
You now have a basic understanding of the representation of a UI component, like a button, which is a HTML element. We now look at the general structure of what compromises a typical HTML document:
Details of the code is explained in the reference, though 1 thing to note is that the structure of the HTML codes are in a tree like manner. For example:
The body tag has a child element, which is a single img tag
The body tag is at the same level as the head tag, which the parent is the html tag.
Reference:
Paradigm of HTML
I have pretty much covered the necessary fundamentals of HTML in general, specifically on the basic code syntax, and the general structure. But I feel that it is also important that I touch upon some heuristics, when you are coding in HTML.
The thing is, as a literal web developer, you don’t just code in HTML only. Definitely, you will also be dealing with the other languages, like CSS and JS. But whether you are debugging, or implementing from scratch, some things to keep in mind:
Be able to differentiate at the code level on what is non-semantic, semantic, and aesthetic
HTML codes are layout as a tree structure. Thus, knowing the grouping relation between the components will help you navigate the project effectively
Static pages are straight forward. But for dynamic pages, it is beneficial to know what will change, and how it is being changed
This is where getting your hands dirty helps. Gaining experience allows you to increase your insight, resulting in not just being familiar, but also appreciating these details. Ultimately, these are what makes a good software engineer.
Opinion: This is where I throw out my strong opinion about tech interviews. Validating theoretical knowledge is a way to check an individual’s understanding, but not practical for actual competency. Practical assignments, depending on how it is conducted, may be a hit or miss of what is intended to be evaluated. My point is, to be able to validate an individual competency, the interviewer 1st needs to have a good grasp of both theoretical and practical understanding, and not just blindly dumping what others are doing. I will be writing in detailed about what makes a good tech interview, since it is clearly out of topic from this article.
Common Tags
The topics I have discussed before, were conceptual in nature. A small segment on the actual code, but covering only the surface. In software development, the end goal is always to have something substantial.
As such, it is advantageous to know the different ways information can be displayed. Knowing the variety of ways available, gives you an edge, in terms of knowing what is the best fit when churning out the product. Getting straight to the point, following are some of the common tags being used:
Paragraph
e.g.
<p>this is a paragraph</p>
Headings (h1 to h6, biggest to smallest respectively)
e.g.
<h2>this is the 2nd biggest heading</h2>
Anchor tags (hyperlink)
e.g.
<a href=”another_HTML_document.html”>This is a link</a>
Button
e.g.
<button>this is a button</button>
List (unordered or ordered)
Table
Form related inputs (e.g. radio buttons, checkbox, text field)
There are definitely a lot more than what I have listed, I just described a few just to give an idea. Take some time to learn the mentioned tags, and try coding out something to get the feels.
Reference:
Tags split by category: https://www.w3schools.com/tags/ref_byfunc.asp
More commonly used tags: https://www.geeksforgeeks.org/most-commonly-used-tags-in-html/
Opinion: The reference provided, has a more exhaustive list on the types of HTML tags available. You do not have to know everything by hard. Instead, know what is available and have a surface level understanding of it. The specifics can be figured out on the go, and when the time comes for its needs, then it can be deep dived accordingly.
Display Type
As mentioned, developing purely using HTML, is boring. Just imagine a world where all the web applications, is literally just HTML tags, no fancy aesthetic. The lack of visual taste, nothing attractive, and making your life difficult to even just going through the web pages. This simply emphasizes the importance of designers, and why CSS is important.
But before I dive into some of the specifics of CSS, I thought it is important to highlight 2 important tags. Specifically, <div> and <span>. Following is a quick detail about the tags:
<div>: a non-semantic HTML tag for grouping elements, as a block display<span>: a non-semantic HTML tag for grouping of elements, as an inline display
The reason I have specifically mentioned these 2 tags is because of the display type. HTML tags have their own default type of display, mainly either block or inline. In CSS, a tag’s display determines how an element is being shown. It is mainly described as follows:
Block: the element will take up the entire line itself, elements before or after will not be on the same line
Inline: the element content is displayed as it is, elements before or after will share the same line if they are of the appropriate display
There are many more other type of displays, but at the basic level I am only covering these 2.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
Elements Spacing
The display type is 1 of the core aspect of CSS, another is spacing. In CSS, there are 3 types of spacing we always talk about:
Margin: external spacing, determine the distance between elements
Border: not exactly a space, but the frame between the margin and padding
Padding: internal spacing, directly at the surface of the content
Opinion: The bold terms are not an official or standard technical term. I took reference from what I researched, as I felt it was a group description. For border, I gave it my own description which I deemed appropriate, which is also a literal border frame.
A picture speaks a thousand words, so here’s an image to illustrate what I meant:
Reference: https://webflow.com/blog/padding-vs-margin
Opinion: I tried searching for the general concept with regards to these 3 types of spacing on the MDN documentation. Unfortunately, doesn’t seem to be a thing. In my opinion, this is a key concept which must be know for anyone wanting to be a CSS expert. Maybe Mozilla should have a detailed guide explaining the concept revolving around spacing.
Specific to UI (User Interface)/UX (User Experience), spacing is an important aspect. An example is when multiple information are displayed without proper arrangement, it becomes difficult to dissect the information according to how it should be grouped. By introducing some indication of spacing between these groups of information, makes the text to be more legible. Generally, this results in better delivery of the intended message the user is supposed to receive. This concept is also known as White Space.
Reference: https://www.flux-academy.com/blog/the-importance-of-whitespace-in-design-with-examples
CSS Syntax & Selectors
Of course, I have yet to cover the literal CSS codes. Instead, only some of the fundamentals which are relevant, when using CSS. Similarly to HTML, or any type of coding language, CSS has it’s own syntax as well.
Reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS#css_syntax
An alternate way to understand the objective of CSS, is basically defining the rules (what are the styling properties), and which elements for the rules to be applied on (the target components).
As from the reference example, you can choose the target elements via HTML tags. But this is not ideal, as HTML tags are re-used very often, like <div> or <p>, and you are likely to apply different aesthetics, despite the HTML tag type is being used again. Thus, the best practice is to select the elements which you wish to apply the design, via ID or class selectors.
Reference:
Integrating CSS into HTML
You now know how to create CSS codes, but now you want the respective HTML tags for the design to take effect. This is where you need to know, how you can implement the CSS codes in a way which the HTML tags will be able to inherit the defined aesthetics.
Reference:
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured#inline_styles
Opinion: The reference links greatly explain about somewhat the pros and cons of the different type of application. There are actually other factors, which may be considered on which to use. But because I felt it’s out of the intent of this article, I will highlight those aspects separately. Of course, I will also include the other topics in CSS which are equally important. I just did not want to have too much things in this single article.
Conclusion
This is definitely 1 lengthy article, but I pretty much covered what is necessary to officially kickstart your web development journey. A reminder to pace yourself, and to take the time to understand the fundamental concept, before diving into the several specifics, like the other varieties of HTML tags. Till then, stay tuned for the next series of learning web development!