Basic HTML Project

Creating A Basic Webpage

Let us dive right into making a basic html page.

I am brand new to the world of coding.

This post will be broad and basic.

Possibly wrong or not explained correctly.

Virtual Studio was used for the project.

Create Your Files In Virtual Studio

• Create an .html file (this is the bones of your page)
• Create a .js file (this will be where your code goes)
  • This file will change and update the html file
• Create a CSS file (this will change the appearance of your page)
• Create a .json file

Once your files are created, we can begin to build our page.

In your html file you will want to create something similar to the figure below:

Breaking down the html page. Starting from the top and going down.

• Line 2 - Define which language you would like to display your page in
• Line 4 - Link your page to your local CSS file
  • This way you can change the appearance of the html
• Line 6 - Allows you to change the name of your project as displayed in the browser tab
• Line 9 - You can put whatever you would like in between h1
  • This will display on the top of the webpage
  • I used it as the title of my project
• Line 14 - Links your local .js file to be the script of your html page

Styling Your Webpage And Subsequent Code

Above is an example of how you can style a webpage. Customizing a web page is all in the eyes of the designer.

The key to styling a webpage is making sure you are styling the correct portion of the html page. In the image above you target the portion of your code you want to customize. Once you have your target you can do so much. Colors, text style, where you want it to be displayed on the page, bold, or italic are just a few ways you can make your page pop.

Using Fetch

Fetch is a useful tool to gather information from a local database. My project is a simple database combining photos and titles. A user is able to choose which image/name combo they like the most. Once a user sees a combo they like, they are able to click the phrase "This One." Once clicked, the phrase turns blue. If you change your mind, you can click it again to return the text to black.

The fetch command allows the local database of images to be rendered on the html page as photos from their original sources. Once fetched, you are able to return that data into a .json format so it can be run by your local json server. The data once displayed can be formatted and changed through CSS to display how you would like. I am a bit of a nut and like everything to be centered. My CSS styling kept everything centered on the page and easily read.

Creating An Event Listener

Event listeners are necessary to make any project functional. No one wants to go on a webpage and simply look at it. Everyone wants to interact with a webpage. Event listeners allow a user to interact with the page.

For my project, I had a message pop up every time you hover over an image. Once, you move your mouse away from the image the message disappears.

Another event listener I used was "keydown." The image above is the code I used to allow the user to display a message when a certain "key" was hit on the keyboard.

Breaking down the code:

• First you need to link the eventListener to your html document which is the first line.
• Diving deeper into the second line.
  • We need an if statement which sets the "key" that when pressed on the keyboard shows the message.
  • "A" was the key chosen.
• The "key" press was linked to the Id "message" within the .html.
• Last the textContent was set to "Author: Maverick"

When a user goes on to my webpage. They can hit "a" on their keyboard and the message: "Author: Maverick" is displayed. The message can be changed to anything. Any text after textContent will be displayed when "a" is pressed on the keyboard.

I hope everything above makes sense. Coding has definitely been a rewarding challenge. A bit of a hard left from going to law school. This post was a simple surface breakdown of my first project. I am excited to continue down the rabbit hole and get lost in code.