Why create a website? Well, a website is a unique way to connect with the world. It informs people of your business, helps sells products, or helps sell you.
With a website, tons of possibilities are available to you!
In this article, some of the steps we will follow to get you started in creating our very first website include.
- Requirements to be used,
- Code editors,
- HTML structures,
- Adding images and creating Divs,
- Application of CSS,
- Build a simple Landing page.
To create a website from scratch, you must have basic knowledge of the following programs which most times might be hard to grab as they are a bit complicated but this guide simplifies the process.
We will cover a lot of Frontend languages such as HTML (Hyper Text Markup Language), CSS (Cascading Style-sheet), Java-script, and as well some frameworks like bootstrap
Static websites/webpages are easier and quicker to create with just HTML, CSS & JS. It is cheap to host and secured. You can also read more on the best tools to create a website here.
To follow this tutorial, you will need the following.
REQUIREMENTS
- Laptop / Desktop / Phone
- Code Editor – Vscode, Notepad++, Sublime text
- Mobile Phone – Dcode, Quickedit, Acode, Koder Code Editor
- Internet connections
We will be using Visual Studio Code as it is easy to interact with.
BASIC STRUCTURE OF AN HTML DOCUMENT
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- <body>
- <! DOCTYPE html>
The Doctype element must be declared on the first line of each web document just as seen in the above image.
- <Html>
The HTML element informs the browser that the page will be configured in HTML and, optionally, specifies which language the page content or document is in. As shown below, the HTML language is set to English.
- <Head>
The head element encloses special “Behind the Curtain” elements. Most of these elements are not put on view directly on the web page
- <Title>
The title element simply shows what will be displayed in the browser’s title bar.
- <Body>
This is used to define the main content in the HTML document (text, images, links, videos, and tables…)
ADDING IMAGES AND CREATING DIVS
Adding images to the HTML document might not seem as hard as you think, to insert an image, use the image <img> tag and include a source attribute and optionally, an alternate attribute.
This element also accepts width & height as its attribute. Your image tag will be inside the body element of your HTML file. The syntax for this is simply;
<img src=“URL“ alt=“Describe your image“>
This img tag is an empty tag and thereby does not require a closing tag unlike some other HTML tags like p, li…e.g.
Divs are simply just elements/tags that define a division or a section in an HTML document. It allows you to group several elements to create sections or subsections of a page. It requires a closing tag.<div></div>
We also have ids and classes, these are used to differentiate elements of the same name and type, and the id & class can be called out in CSS and JavaScript to perform tasks.
BUILDING A LANDING PAGE
Next, let’s take all we have learned so far and build a landing page, follow the steps according, if you encounter any challenges during this process, you can access the complete code here.
Here is a preview of what we are going to build.
Open an editor of your choice, we will be working with Vscode, create a new file, and save it as an index with the .html extension index.html
Write out the HTML structure and set the HTML attribute, Lang, to English (en).
Well done! Now open the div tag <div></div> and give it an id of “container”, after you’ve done this, in between the opening & closing tag of the div, open a new tag of header <header></header>.
Next, In-between the header tag, open a navigation tag (<nav></nav>) also open up the list tag <ul></ul> and type in the list element <li></li> with anchor tags <a></a> in-between them, have at least three or four li tags.
After successfully doing that, including the href attribute to all the anchor tags and with a value of # (This means the link has not been connected to anything).
You can now include your preferred text for the navigation bar in the anchor tags, use mine if you choose to, OUR PRODUCTS, OUR COMPANY, and FARMERS. Your code should be looking more like this now.
Congratulations! We are done with the header; now let us move to the next step.
Now go below your header closing tag </header> and open a div tag <div></div> with a class name of “one” (optional to use this, but you can use your preferred class name but make sure it will be what we will use by the time we go into CSS).
Open a heading tag (pick between h1-h6) type in “FISHINGTASTIC!” move to the next line open a paragraph tag <p></p> and type in your preferred text (10-15words), towards the end of the text you’ve just written, open a button tag <button></button> (still inside the p tag) and type in EXPLORE MORE! Like this…
Now go below the div closing tag </div> and then open the form tag `<form></form> and set the attribute “action” to “#”, open the fieldset tag<fieldset></fieldset>, inside the fieldset open the legend <legend></legend> tag and type in your preferred text (recommended: “CONTACT US”). All are still enclosed in the form tag.
We are now 80% done writing our HTML codes, open two input tags <input></input>, type in the attribute of “required” for both tags then type in another attribute of “type” with values of “text” and “email”.
Then also input one more attribute for both tags with attribute “placeholder” and values of “ Enter your name” and “Enter your email” respectively. Just like the code above.
Below your last input tag, open a textarea tag <textarea></textarea> with an attribute of required and also an attribute of placeholder with the value “Enter your message…”
After completing step 9, below the textarea, open one more input tag with the attribute “type” having the value of “submit” and also the attribute of “role” and value set to “button”.
Congratulations you are done with phase one of this landing page. Now let us move on to styling our webpage. Your code should be more like this and this would be your result.
STYLING OUR WEBSITE WITH CSS
We have various ways of applying CSS styles to our HTML document which include inline, internal, and external styling.
Inline style is a style that is applied to a specific element within the body section of the webpage thus the style will be applied to that individual element alone.
The internal style is a style that holds CSS rules for the page in the head section of the HTML file.
The rules only apply to that page i.e the styles cannot be applied to multiple pages, these styles are enclosed in the style tag <style></style>
External style is a separate CSS file/document that can be accessed by creating a link within the head section of the HTML document this styling is the most recommended and this is what we will be using.
INLINE STYLING
INTERNAL STYLING
Create a new file document, save it as “styles.css”, go back to your HTML document and input this inside our head tag <link href=“styles.css rel=“ stylesheet“ type=“ text/css“>
EXTERNAL STYLING
Now go back to your CSS document, and use the universal selector to set all padding and margin to zero.
It’s time to add our background image, the method of adding images in an HTML document is quite different from that of CSS, in CSS we add background images with the background-image property and then we type in our image URL.
Now let us call out the div with its id of “container” and then add these styles to it.
NOTE: When adding images, make sure your image is in the same folder/location as that of your HTML and CSS document, otherwise your image won’t show up.
Create a folder and put all your files inside,
Use the image of your choice, if your image isn’t working, check if your image URL/image name is the same as the one on your folder.
Move over to the next line, we are to style our navigation bar, change the background color to rgba (0, 0, 0, 0.384); set box-shadow to 5px 5px 10px rgba (199, 199, 199, 0.199); set the height to auto and align text to center.
By now your work should be looking more like this.
Let us style our list tag li by simply aligning the list items horizontally with the display property to inline-block, and then add padding of 20px to the top and bottom then 30px to left and right.
We then style the anchor tag a, by changing color to white, setting text-decoration to none, increasing the font size to 22px, and changing the font family to Monospace (you can use your preferred font family). Add a transition effect of 0.5s.
To make this super cool, let us add a hover effect, if you don’t know about pseudo-classes you can read this article.
Next, we add the color of goldenrod to this hover selector.
The navigation bar is styled, this is how your code should look after applying the styles above.
We move to the next line, then we style the next div of class ”one”, give it a width of 40%, a margin-top of 30vh, and a margin-left of 10vh set the color to white, and then float the div to left.
Let us style the heading tag, set the font size to 70px, and change the font family. Also move to the next line to style the button, give it a margin-top of 10px background-color of goldenrod, set its border to 1px solid transparent, set padding to 10px, change the cursor to pointer and add transition effect of 0.5s(for the hover effect).
Let’s add a hover effect to this, this hover effect should have a background color of transparent and a border of 1px solid goldenrod, and then the text color should be set to white.
Congratulations! We have now completed styling this div.
Let us style our form tag, set its width to 30%, give it a margin of 30vh and 10vh to its top and right respectively, change its color to white and then float the div to right.
Now to style the legend element, let us set its color to goldenrod, font size to 25px, font family to IMPACT, and the set margin left to 10px.
Over to the next line, we should style the input by giving it a display of block, the height of 20px, the width of 70%, padding of 5px, and then margin set to 25px on top and bottom then auto for left and right.
Isn’t that textarea too small for a person to write in it?? Maybe yes, well let’s increase the height of the text area to 100px. Also, style the submit input with this format input[type=“ submit“] and give it a width of 50% and a height of 30px.
CONGRATULATIONS!!! Here is the result. You have now created your first landing page. Click here to get the full code on the HTML document and the code on the CSS document.
CONCLUSION:
In this tutorial we learned the basic structure of HTML, created a landing page, and styled it using CSS, to learn more about frontend development, check out the resource below.
Pingback: Optimizing CSS Transition Animations with Animate CSS Grid - LearnHub