At its core, React is a library for manipulating what HTML elements get rendered and when. We can use it to make amazing, interactive user interfaces, but first we’ll need to understand how to build static user interfaces without any interactivity using HTML tags and CSS styling.
This article will review static web page creation with basic HTML and CSS.
1. Review of Basic HTML and CSS
As a refresher, every web page comes in the form of an HTML file containing a bunch of HTML tags, each of which tell the browser to render a specific HTML element. Here’s a barebones HTML file:
<div>
Hello world! This is a basic HTML page.
<b>
This is bold text because it’s inside of a bold element.
</b>
</div>
You can copy the above code into a file called example.html and double-click on it to open it up using your favorite web browser. The result should look something like this:
Everything inside the <div> tag rendered as text, and everything inside of the <b> tag was bolded. The actual tags themselves(the“<div>”,“</div>”, …) aren’t rendered.
This is a little bit boring, so let’s spice it up by adding some basic styling. Add a stylesheet file called main.css in the same directory as example.html, and put the following CSS code in it:
Now modify example.html to import the stylesheet and use the card class we defined above:
<link rel="stylesheet" href="./main.css" />
<div class="card">
Hello world! This is a basic HTML page.
<b>
This is bold text because it's inside of a bold element.
</b>
</div>
Now try refreshing example.html in your browser, and you should see something like this:
What did we just do? We defined a style class called card and modified our div element to use the card class by adding class=”card” to the opening tag. We also added some style rules to the card class, including:
A background color corresponding to the color code #fff, or white. Try changing this to #00ffed for a nice turquoise color.
A 1px-wide border with color code #e3e3e3, or a medium gray.
Four rounded corners with a 5px rounded radius.
A subtle drop-shadow. This rule has a lot of parameters, and you don’t need to know how they all work - I like to store complex rules like this somewhere and then just copy-paste them when I need to use them.
Finally, we imported the stylesheet into our HTML file by adding a <link> tag to the top of it.
1.1 HTML Element Types - Block and Inline
HTML elements are either block-level elements or inline-level elements. A block-level element always starts on a new line and takes up the full width available(stretches out to the left and right as far as it can). Try adding the card class to the bold element(<b> tag) in example.html. What happens? You should see something like this:
The effect is fairly subtle, so look closely - the bolded text is inside of its own card now, with its own borders and shadow! But the card is only as big as the text inside of it, whereas the outside card stretches across the full width of the page.
Now contrast that to what happens if we add another div, with the card class enabled so we can see its borders. In example.html:
Introduction
1. Review of Basic HTML and CSS
1.1 HTML Element Types - Block and Inline