Adding a navigation bar and contact form to our HTML Webpage (pt. 4)

Hello everyone and welcome back to another blog post! Today I will be adding to my last couple of posts where I lay out how you can create your own HTML website quickly and easily. If you haven’t checked out my previous posts make sure to look at those first as they will explain everything you need to know. Each post is labeled with its corresponding part so you can progress in the same order I did. With that out of the way let’s get started on today’s lesson!

Step 1: Add a navigation bar A navigation bar is a menu that allows users to quickly navigate to different pages or sections of a website. Add the following code to the top of your HTML file:

phpCopy code<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

This code creates a navigation bar at the top of your HTML page. The <nav> element is used to define a section of the page that contains navigation links. The <ul> element is an unordered list of links, and the <li> elements define each individual link.

Step 2: Add a contact form A contact form is a great way to allow users to send you feedback or inquiries directly from your website. Add the following code after the closing </section> tag:

phpCopy code<section id="contact">
	<h2>Contact Us</h2>
	<form>
		<label for="name">Name</label>
		<input type="text" id="name" name="name" required>
		<label for="email">Email</label>
		<input type="email" id="email" name="email" required>
		<label for="message">Message</label>
		<textarea id="message" name="message" required></textarea>
		<input type="submit" value="Send">
	</form>
</section>

This code creates a new section on your HTML page with a heading and a contact form. The <form> element is used to define a section of the page that contains form elements. The <label> elements are used to provide labels for each form field, and <input> and <textarea> elements define each individual form field. The required attribute on each form field ensures that users must fill out that field before submitting the form.

Step 3: Add a responsive design A responsive design ensures that your website looks great on all devices, from desktops to smartphones. Add the following code to the <head> section of your HTML file:

phpCopy code<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">

This code includes a meta tag that sets the viewport width to the width of the device and a link to your CSS stylesheet. Add the following code to your CSS file:

cssCopy code@media screen and (max-width: 600px) {
	nav ul {
		flex-direction: column;
		text-align: center;
	}

	nav li {
		margin: 10px 0;
	}

	section {
		padding: 10px;
	}
}

This code creates a media query that targets screens with a maximum width of 600 pixels, such as smartphones. It changes the navigation bar to display vertically, centers the navigation links, and reduces the padding on the sections to fit the smaller screen.

I hope you all enjoyed this blog post and feel free to reach out if you have any questions either by my contact page or through the comments on this post. Have a good day and I will see you all again next time.

3 thoughts on “Adding a navigation bar and contact form to our HTML Webpage (pt. 4)”

  1. Hi

    I am an online freelancer specialising in reputation management and public relations. I would be delighted to assist kidskodingacademy.com with its online publicity and site traffic. I have prepared a couple of services that are available off-the-shelf: https://www.fiverr.com/lizbeth105

    I look forward to working with kidskodingacademy.com

    Warm Regards

    Tina

  2. Hello guys

    By way of introduction, my name is Carey and I offer very cheap link building services from as low as $5.

    I strongly believe that I can help kidskodingacademy.com to increase its Google rankings, traffic and sales.

    You can learn more and order my services at https://www.fiverr.com/ram1508

    I personally recommend this package: https://bit.ly/3uE4zUv

    For anyone with a higher budget and a more competitive niche, this one: https://bit.ly/3mlRmMn

    Thank you for your time and I look forward to working with you and kidskodingacademy.com

    Kind regards
    Carey Sain
    Switzerland, NA, Fisibach, 5467, Kammelenbergstrasse 1, 056 387 15 88

Comments are closed.