HTML and CSS Basics
This lesson will be an introduction to HTML, CSS and pairing them together within React. We will do this by creating a navigation bar at the top of the page with some static data. I’ll walk you through the styles and classes that I use in mine, but I encourage you to make yours look and feel however you like.
HTML
HTML is the template language that allows us to put “HTML elements” onto the DOM. Think of HTML elements as the boxes, buttons, tables, links, etc that get displayed on a site. The DOM is where our JavaScript will interact with the elements and data being displayed on the page.
This article has a good overview of the DOM and how we can use it, with the overall idea being that JavaScript can access any HTML elements on the DOM and change them. This is essentially what React is doing under the hood.
CSS
CSS takes those HTML elements that we put on the DOM and brings them to life. Want to change the color of a section, change the size, positioning, or font, CSS is your guy.
Inline CSS: You can add styles directly on your HTML elements, although that is not best practice because your code can get ugly and unmanageable very quickly.
HTML → style={{'background-color': 'green'}}
External CSS: By importing a CSS style sheet, you can put a class on an HTML element through doing the following. You need to make sure that class is defined in your CSS file that you have imported. The way to define a class is by . then the <class-name> then in the body they style you want to add. That looks as follows. For this assignment and going forward, let's stick to external CSS styling.
HTML → class="green" CSS → .green { background-color: 'green'; }
This video will take you through the CSS essentials. Although you can definitely get by without it, I would recommend sifting through the video if you have no CSS experience. Also, Google will be your best friend when trying to style using CSS.
Putting it all together
Now let’s start using React to create our nav bar and add styles. As discussed earlier, this will involve a mix of HTML, CSS, and then some React to conditionally show styles.
The following should be added to App.js in the return statement where we were rendering the outputs of our JS functions last homework.
<div className="wrapper"></div>
Now let’s define a .wrapper CSS class. Add the following to your App.css file. (Make sure you are importing it).
.wrapper {
position: relative; /* position needs to be defined at the wrapper element of your page to be used below */
/*
flex-box is your bread and butter for positioning elements
set the display of your parent (wrapper element) to flex
give it a flex-direction and every child element will get displayed in that direction
*/
display: flex;
flex-direction: column;
/*
This is the wrapper element so it should take up the entire window.
width -> 100vw -> vertical width of the window
height -> 100vh -> vertical height of the window
*/
width: 100vw;
height: 100vh;
/* centers children along flex-direction of the element, which in this case is the vertical column */
align-items: center;
}This wrapper will take up your entire window and server as the parent element to your entire web application. Now let’s add a nav element. Your HTML should look as follows:
<div className="wrapper">
<div className="nav"></div>
</div>Now let’s define the .nav CSS class.
.nav {
/* create a nav bar that takes up 60% width and displays it's contents as a row */
position: relative;
top: 0;
width: 60%;
display: flex;
flex-direction: row;
/* centers children along the horizontal row */
align-items: center;
/*
justify content determines how the div will space the child elements along the row.
Space between will put gaps between each link which is what we want for our nav
*/
justify-content: space-between;
/* padding is white space on the edges of the element. Very useful for creating buttons and divs */
padding: 16px;
}You’ll notice your page still looks blank, although the elements are still on the DOM if you look at your element inspector. That’s cause we still need some visible elements to display in the nav we have just set up. Let’s add some links to our nav using a tags (https://www.w3schools.com/tags/tag_a.asp).
<div className="wrapper">
<div className="nav">
<a href="/a" className="nav-item">
Link A
</a>
<a href="/b" className="nav-item">
Link B
</a>
<a href="/c" className="nav-item">
Link C
</a>
</div>
</div>Now, you will see 3 clickable hyperlinks that will each navigate to their own URL. Let’s make them look less weird.
.nav-item {
/* style each link in our nav */
font-size: 24px;
/* use any font you like */
font-family: 'Open Sans', sans-serif;
/* boldness */
font-weight: 800;
color: black;
/*
a tags for links come with some styles like underlining.
Let's just turn that off for our nav items
*/
text-decoration: none;
}Cool, now we should have 3 well-positioned links at the top of our page, but now let’s take things one step further and show an active link based on your URL. We are going to leverage an NPM package to help us to this more easily. There are NPM packages for almost everything. Web developer motto: “Don’t reinvent the wheel”. We will use https://www.npmjs.com/package/classnames to conditionally add classes to our HTML elements.
Go to your terminal window and in your class folder, execute npm install classnames. This adds the package to your project dependencies in package.json. After installing, you will see it show up in your dependencies there.
Now let’s actually use it. Import it in your App.js file by adding import classNames from "classnames"; to the top of the file. Now update your HTML to use the package. I recommend reading the documentation to fully understand what the package is doing.
<div className="wrapper">
<div className="nav">
<a href="/a" className={classNames({
'nav-item': true,
active: true,
})}>
Link A
</a>
<a href="/b" className="nav-item">
Link B
</a>
<a href="/c" className="nav-item">
Link C
</a>
</div>
</div>Still looks the same. That is because we need to add an active class to our CSS.
.active {
/* conditionally set an active tab */
border-bottom: 1px solid blue;
}Now the first link should show up with a border on the bottom of the div. However, we only want to show that border it if it is the active link based on the URL. Now it is time to use our good friend JavaScript. Implement the following helper function in App.js above the return statement.
/*
Returns true if path is included in the current URL
*/
function isActive(path) {}
Use window.location to get the current URL. https://www.w3schools.com/jsref/obj_location.asp. I would recommend doing a console.log(window.location) to see what it looks like.
<a href="/a" className={classNames({
'nav-item': true,
active: isActive(a),
})}>
Link A
</a>Call it like above for each one of your links. Now we should be dynamically showing the active link as underlined.
Your site should look should look like the above when you are at localhost:3000/b.
UX Design:
Now that we have started some actual web development, you should all start thinking of what you want your site to look and feel like. Start thinking about the content you want to show and how you want to show it. You will be creating “wire frames” just drawings of what your site will look like. You can use online tools or draw them by hand. Check out this article for more of an explanation of how wire frames are used in the design process.
- Find 3 websites with good UI (user interface). Ask yourself why you like it. The colors? The layout? The component design? See a font you like? Inspect it with you chrome console and take a look at the styles.
- What do you want your pages to show? Do you want to add a little widget? Do you want to show some of your social media? Anything you want. Get creative with it.
- Create wire frame for each page of your website.
