By: Jesca KhembroWard
According to a blog at Skillcrush.com:
"Both HTML and CSS are fundamental tech skills you can start using to work on real projects within weeks of diving in. And they are the place to start if you want to work in tech, whether you end up going into front end development, back end development, web design, visual design, or even digital marketing."
With all my googling, HTML and CSS is where I am going to start and the best way for me to learn is to do a project. Something I can add to my resume. My CCNA course has a section to where I teach you how to revamp your resume with projects like these.
My first project will be to Create a webpage with HTML/CSS.
According to ZipRecruiter
"As of Jan 22, 2022, the average annual pay for a HTML CSS Developer in the United States is $87,605 a year."
Let's start with some terms.
Coding = computer programming (you will see the industry use these terms interchangeably)
Code tells the computer what actions to take
Writing code is like creating a set of instructions
By learning to write code, you can tell computers what to do or how to behave in a much faster way. You can use this skill to make websites and apps, process data, and do lots of other cool things.
Next terms are HTML and CSS
HTML stands for Hyper Text Markup Language (the structure of a web page)
It is the standard markup language for creating web pages. (Basically, you type of some text known as syntax, save the document then once you display that document the text/syntax does not show, just want you intended. – that’s a markup language.)
To make our HTML webpage more presentable, we can add CSS which stands for Cascading Style Sheets. It is simply used to style our HTML web page.
Let's look at this example 👇🏾
*side note: JavaScript works alongside HTML and CSS to add even more depth to websites.
Lastly, the terms: webpage and website
web page
A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages."
website
A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or a "site."
Now we can start writing some code …
Step 1: Write Some HTML and CSS in your Text Editor
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
*If any of this confuses you, I suggest you take a few FREE LESSONS at w3school.com. Get familiar with the basics. I have a cheat sheet that gives me a quick reference of common HTML code.
HTML tags are element names surrounded by angle brackets👇🏾
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
Note: Only the content inside the <body> section (the white area above) is displayed in a browser.
Again, I used w3school.com as a reference for specific syntax like, changing the background color or adding an image. Here's my code.
Step 2: Save the HTML file
Save the file to your desktop.
Select File > Save as in the text editor's menu.
Name the file "test.html" and save as Hyper Text Markup Language file type
Step 3: View the HTML page in a browser
Open the saved HTML file in a browser (double click on the file, or right-click)
Below is a snapshot of my code rendered in a web browser 👇🏾
As you can see in the example above, I have used both HTML and CSS. I structured my web page and added some styles like a light grey background, a red border, emoji's, an image and even a tool tip.
Play around with different syntax and different styles and make cool web pages. The possibilities are endless.
Before we end this thing, let's connect our newly created web page to the internet.
Go to your choice of website hosting provider (I like Go Daddy)
You will have to buy a domain name first then select Hosting
From the hub page on Godaddy.com, select add a hosting site (economy web hosting with cpanel plan)
Select setup or settings
Click File Manager
Select public_html
Delete the current files
Upload your HTML file
Now we can open a new tab in our browser and go to our domain (www.goodazzfoodllc.com)
Our HTML/CSS files will be rendered into a beautiful web page.
This is meant to be as simple as possible. Of course you can add more styles and code and even links to other pages to make an even more user friendly, aesthetically pleasing website. I just want to share my knowledge on the topic and my journey as I become a blockchain engineer.