In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.
HTML Web Page Example 1
This is an example of a simple HTML web page that shows the profile of a professional camel.
Here is how the camel profile is designed in HTML:
Container — The complete HTML web page is wrapped in a container. The container is a div element with the class container .
Header — Inside the container, we have a header element that contains the logo and the navigation menu.
Aside — Aside contains the profile picture and other navigational links.
Main — The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.
Footer — The footer contains copyright information.
This is the second example of an HTML web page. This is a simple error 404 page which is shown when the user tries to access a page that does not exist.
This is a very simple webpage that shows the error 404 page on the screen and gives a link to return to the homepage.
To design an error 404 page you need to use the following steps:
Create a div element that covers the whole page set height: 100vh .
Give it a background image that suits the 404 error.
In this HTML code example we will create offer page. This is a simple newsletter signup page.
Here is the list of steps to create a newsletter signup page:
First, we need to create the HTML structure of the page. We will use the tag to wrap the content of the page. Then, we will create two sections: one for the intro and one for the sign-up form.
Next, we will style the page using CSS. We will use the display: flex property to align the content of the page. We will also use the min-height property to make sure that the page is always fully visible.
Then, we will style the intro section.
Next, we will style the sign-up section.
Finally, we will style the form. Look at the complete code below to see how we did it.
Get up to 50% off on all our products and services. Hurry up, the offer ends in 24 hours.
In the fourth example, we are going to create a testimonial page that shows the reviews of the customers along with their profile pictures, name and designation.
The basic idea will be to create HTML section first and then styling it with CSS.
The reviews and all its details will be stored in an array and then we will loop through the array to display the reviews.
Here is the complete code for the testimonial page.
Complete HTML code for the testimonial page
Our Reviews
Here is the output of the above HTML code for testimonials:
Conclusion
This brief guide includes HTML web page examples with source code. We have learned how to create a basic HTML web page with 2 different examples. We have also learned how to create a basic CSS style sheet and how to use it on our HTML web page.
If you want a detailed explanation of a portfolio site then visit the HTML code for homepage.
Welcome Friends, In this blog, we will learn how to create a Simple Website layout Design using HTML and CSS. Earlier I have shared a blog on how to Create a Simple Accordion Design using only HTML and CSS. In this tutorial of Simple Website Design layout, I have used plain HTML and CSS.
In this blog, you will learn how to make a simple looking website using html5 and css3. In addition to the blog, I will give you access to the source code that I am going to be using to use it in your project. Together we will build this simple looking website, and by doing that, you will learn some necessary skills of html5 and css3 like how to use fonts, images, navigations, some basic animations, etc.
The above video is showing the finished version of the website on the website’s homepage, where I have created a simple-looking navbar with a font-awesome icon in it. When we hover over the nav item, the background, and color, the anchor element will change. When we click over the nav item, it will take to the associated page with a slow transition effect. For the five pages (home, about, portfolio, services, and contact), I have taken five div and named them with a unique id. I also linked the respective pages in the navbar so that it can take us to that particular page when we click on it.
In the CSS part, I have discarded the document’s document’s default padding and margin. Thus, I have provided the padding and margin to 0. I used lato as the default font fort he projects. Then i have given the box div a width of 100% and a height of 100vh. Then i provided a relative position and 100% height value to all the div inside the box id. for the content class, I used absolute position value and transform property to bring all the items of content class in the middle. I also provided text-align property to get the content center of the viewport. After that, I did some necessary styling for all the elements in the content class. For the navbar, I want it to be fixed when we will scroll down the page, so I have given it absolute position value and provided a z-index value to remain on the top of the content. After that, I have decorated the navbar with some necessary styling. I have added a font-awesome icon to the left side of each nav-item. I used the font-awesome 4.7.0 CDN version and added that in my HTML file. I have also added a deep pink background color for the nav-item hover effect. I have given a background image for the homepage, but I have provided a whitish background color for the rest of the section.
Simple Website Layout Design (Source Code) To create this snippet, you need to create two files. One of them is an HTML file, and another one is the CSS file. After that, you need to copy the HTML and CSS code and paste it to the appropriate files and save them.
