For a video-based intro check out thisHTML/CSS/JS Crash Course on YouTube.
HTML(HyperTextMarkupLanguage) is amarkup languagethat is used tostructure contentfor presentation over the web.
The upside is that HTML is super easy to learn!
Youll have to learn HTML and CSS if you want to build anything on the web.
HTML codeis sent to the web web client which can understand it and render a web page accordingly.
Another essential technology in web development is calledCSS, which is used in combination withHTMLto style the resulting webpage.
It’s free, every week, in your inbox.
We have to learn HTML and CSS together to really build anything that users can actually navigate!
To illustrate the roles of HTML and CSS, lets take a look at a simple webpage.
We can specify which pieces of text are links and buttons.
Using CSS, we can add in styles to alter the appearance of the HTML elements we specified.
HTML
We write HTML in files that end with the .html extension (likehomepage.html).
To write HTML and CSS code, youll want to install acode editor.
Nowadays, one of the most popular free code editors isVisual Studio Code.
Before writing any code, see to it to download and install itfrom this link.
you’ve got the option to find more information about VS Code inthis video tutorial.
you’ve got the option to also use something likeSublime Text.
One of the most popular web browsers among developers isGoogle Chrome.
It comes with powerful debugging tools that make our lives easier.
you might download and install it on your system by followingthis link.
Syntax
HTML providestagsthat are used to createelementson a rendered webpage.
Remember, we are marking up a document so you can define structure.
AnHTML elementis an individual component of an HTML document that provides meaning for parts of a webpage.
Andesignates something as the most important heading on a page.
We also have further subheadings from h2 to h6.
Some elements consist ofself-closing tags, likebrin the example above.
As we have seen in the example above, tag names are surrounded byangle brackets.
Attributes
Many elements acceptHTML attributesthat allow of us to define additional properties for those elements.
We can add a clickable link to our page using thetag.
The next mandatory element is theelement.
It has a closingthat should enclose ALL the remaining content on our page.
It represents theroot elementof our document.
Inside thehtmlelement, we always want to place theheadandbodyelements.
The is also where we include references to external stylesheets, fonts, and scripts.
This is the rendered result you should see in the internet tool!
Note that we used thewidthandheightattributes to specify a size for the image element in this simple example.
Elements
In this section, we will cover some other important HTML elements and their tags.
ensure to check theMDN page about HTMLto read more.
The div element
The HTML elementrepresents a division or a section in a document.
Theelement should be used only when no othersemantic elementis appropriate.
you’re free to learn aboutsemantic elementsin HTMLon this link.
These elements should be used to define headings on our page and provide semantic meaning.
Paragraphs
The HTMLelement represents a paragraph of content.
Similarly to that, heading (h1h6) elements are also block-level.
On the other hand, we also haveinline-levelelements in HTML.
Try putting antag inside aand see what happens!
Readthis Stack Overflow answerto learn more about inline and block elements.
Lists
We can also write lists in HTML, which come in two main flavors: ordered and unordered.
To make an unordered list (with bullet points) we first write a parentelement.
We then add individual(list item) elements as children of the.
Here is an example structure of a HTML table:
2.3.6.
Forms
Theelement is used to create forms.
On its own, the form wont look like much until we add in different inputs.
Alternatively, we can use JavaScript to handle form submissions.
Either way, with just plain-old HTML our forms arent going to do anything for us except look pretty.
Theelementis the most common form element.
Its an extremely versatile element.
By simply varying thetypeattribute we can create many different kinds of inputs.
Here are some examples:
it’s possible for you to learn about the available input elementson this link.
A labelsforattribute and an inputsidattribute enable us to connect the label element with the corresponding input.
This is particularly important for people who rely on screen readers.
Labels will help screenreaders understand the purpose of a given input.
CSS
CSS(CascadingStyleSheets) is a style sheet language used for website layout and design.
Similarly to HTML, CSS is not considered aprogramming languagebecause it doesnt have common programming logic features.
Because of this, the basic syntax of CSS is super easy to learn.
Image: Example of an HTML page before and after using CSS:
3.1.
Introduction
In CSS, we write code to target and select specific HTML elements on our page.
We can then use a huge number of available CSS properties to style those elements.
The general syntax structure of CSS looks like this:
Here are some examples:
3.1.1.
This is considered bad practice because it makes our code messy and harder to read.
The conventional and recommended way of writing CSS is to use an external file.
Start by writing your CSS in a file ending in the.cssextension.
To include those styles in an HTML document.
A good place to start iscolor.
In CSS, we can use thecolorproperty to change the color of elements.
CSS recognizes many pre-defined color names like red, pink, violet, and even blanchedalmond.
To specify your own colors, you could use hexidecimal color codes.
(Hexadecimal is base-16, meaning that each digit has 16 possible values).
it’s possible for you to play more with HEX colors usingthis calculator.
Read more about RGB and other CSS colorson this link.
Some of the most commonly used text-related CSS properties include:
Google Fontsprovides a variety of free fonts.
Element selector
We use theelement selectorto target all the instances of a given predefined HTML element.
you could set your background tocolors,imagesor evengradientsin CSS.
Its important to note thatidattributes should be unique on a page.
We shouldnt use a singleidmore than once in an HTML document.
If we need to target multiple elements, we should use a singleclassto define and target them all.
When dealing with conflicting selectors, CSS has a way of calculating which style overrides the other styles.
To learn more about that, double-check tocheck out this video on CSS Specificity.
The Box Model
In a document, each element is represented as a rectangular box.
In CSS, each of these rectangular boxes are described using the standardbox model.
Each box has four edges: themarginedge, theborderedge, thepaddingedge, and thecontentedge.
Here are some examples of how to manipulate these properties using CSS:
4.
Conclusion
HTMLandCSSare two essential technologies in web development.
We use JavaScript to addinteractivityto our page its a way to add programming logic to our web pages.
