How to creat a complete webpage with Html,css,bootstrap and javascript with source code

The aim and objective of this project is to creat a complete webpage using Html,css,bootstrap and javascript . If you are a beginner, you will likely need to take your foundamental bearing to learn each programming languages we are about to apply to design this awesome project.

You can learn and master all the above coding languages from https://www.w3schools.com/ for free.

You will need a text editor such as Note pad ++ or visual studio or any offline / online IDE that support all the above programming languages we are about to explore and a web browser e.g, chrome.

Now,let dig straight away to the subject matter, i will section all the programming languages into diffrent phases according to there respective website framwork,usefulness and applications.

HTML CODE:

HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!

It is the standard website building block. some of html basic attributes and tags are as following:

<html> … </html> — The root element. ...
<head> … </head> — The document head. ...
<title> … </title> — The page title. ...
<body> … </body> — The page's content. ...
<h1> … </h1> — A section heading. ...
<p> … </p> — A paragraph. ...
<a> … </a> — A link. ...
<img> — An image.

We have over 200 Html tages and refrences needed to be study as a developer. But, you don't need to know everything before you can creat a well presentable website.

You only need to understand its main concept and how to apply all its attributes and refrences. we are not dwelling much on its framwork.

For tody's project:

Let us start our coding as following:

Webpage structure:

<!DOCTYPE HTML >
<HTML>
<HEAD>
 <TITLE>...Your title will be past here...</TITLE>
 
</HEAD>

<BODY>
  ... document body...

<style>

...all styling will be post here...

</style>

<script>

...all

</script>

</BODY>

</HTML>

The landing page:

Copy and past all the provided code below to there respective languages snippets on your IDE,then edit the content. Save and navigate to your computer folder. check for your file name and open it with your browser.

1. First of all, create the HTML structure as follows:

<ul>

<li><a href="#">about</a></li>

<li><a href="#">service</a></li>

<li><a href="#">contact</a></li>

</ul>

</button>

</nav>

</div>

</div>

<h2>Welcome To Akinbrand codeLab </h2>

<p>Copy and past all the provided code to there respective languages snippets on your IDE,then edit the content</p>

<p>By AKINPELU ABIODUN MOSES</p>

</div>

</header>

CSS:

CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.

https://www.w3schools.com/

2. After that, add the following CSS styles to your project:

/* default css start */

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

font-family: 'Open Sans', sans-serif;

font-size: 14px;

font-weight: 400;

line-height: 20px;

}

.container {

width: 100%;

max-width: 1440px;

margin: 0 auto;

padding: 0 15px;

}

.header-area {

background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.5)),

url(https://images.unsplash.com/photo-1528353518104-dbd48bee7bc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80);

background-position: center center;

background-size: cover;

}

/* default css end */

/* navbar regular css start */

.navbar-area {

background: rgba(0,0,0,.6);

border-bottom: 1px solid #000;

}

.site-navbar {

display: flex;

justify-content: space-between;

align-items: center;

}

a.site-logo {

font-size: 26px;

font-weight: 800;

text-transform: uppercase;

color: #fff;

text-decoration: none;

}

.site-navbar ul {

margin: 0;

padding: 0;

list-style: none;

display: flex;

}

.site-navbar ul li a {

color: #fff;

padding: 20px;

display: block;

text-decoration: none;

text-transform: uppercase;

}

.site-navbar ul li a:hover {

background: rgba(255,255,255,.1);

}

/* navbar regular css end */

/* nav-toggler css start */

.nav-toggler {

border: 3px solid #fff;

padding: 5px;

background-color: transparent;

cursor: pointer;

height: 39px;

display: none;

}

.nav-toggler span,

.nav-toggler span:before,

.nav-toggler span:after {

width: 28px;

height: 3px;

background-color: #fff;

display: block;

transition: .3s;

}

.nav-toggler span:before {

content: '';

transform: translateY(-9px);

}

.nav-toggler span:after {

content: '';

transform: translateY(6px);

}

.nav-toggler.toggler-open span {

background-color: transparent;

}

.nav-toggler.toggler-open span:before {

transform: translateY(0px) rotate(45deg);

}

.nav-toggler.toggler-open span:after {

transform: translateY(-3px) rotate(-45deg);

}

/* nav-toggler css start */

/* intro-area css start */

.intro-area {

height: calc(100vh - 61px);

display: flex;

align-items: center;

text-align: center;

color: #fff;

}

.intro-area h2 {

font-size: 50px;

font-weight: 300;

line-height: 50px;

margin-bottom: 25px;

}

.intro-area p {

font-size: 18px;

}

/* intro-area css end */

/* mobile breakpoint start */

@media screen and (max-width: 767px) {

.container {

max-width: 720px;

}

/* navbar css for mobile start */

.nav-toggler{

display: block;

}

.site-navbar {

min-height: 60px;

}

.site-navbar ul {

position: absolute;

width: 100%;

height: calc(100vh - 60px);

left: 0;

top: 60px;

flex-direction: column;

align-items: center;

border-top: 1px solid #444;

background-color: rgba(0,0,0,.75);

max-height: 0;

overflow: hidden;

transition: .3s;

}

.site-navbar ul li {

width: 100%;

text-align: center;

}

.site-navbar ul li a {

padding: 25px;

}

.site-navbar ul li a:hover {

background-color: rgba(255,255,255,.1);

}

.site-navbar ul.open {

max-height: 100vh;

overflow: visible;

}

.intro-area h2 {

font-size: 36px;

margin-bottom: 15px;

}

/* navbar css for mobile end */

}

/* mobile breakpoint end */

JavaScript

JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.
https://www.w3schools.com/

3. Finally, add the following JavaScript code and done.

// define all UI variable

const navToggler = document.querySelector('.nav-toggler');

const navMenu = document.querySelector('.site-navbar ul');

const navLinks = document.querySelectorAll('.site-navbar a');

// load all event listners

allEventListners();

// functions of all event listners

function allEventListners() {

// toggler icon click event

navToggler.addEventListener('click', togglerClick);

// nav links click event

navLinks.forEach( elem => elem.addEventListener('click', navLinkClick));

}

// togglerClick function

function togglerClick() {

navToggler.classList.toggle('toggler-open');

navMenu.classList.toggle('open');

}

// navLinkClick function

function navLinkClick() {

if(navMenu.classList.contains('open')) {

navToggler.click();

}

We are done with the landing page, Let us move to the main content of the webesite:

How to Create Bootstrap 5 Equal Height Cards

1. First of all, load the Bootstrap 5 framework into your webpage by including the following CDN links.

Put these two script in the header of your code:

2. After that, create the HTML structure for equal height cards as follows and done.Add this into your Html body section

<h3 class="text-uppercase border-bottom mb-4">Equal height Bootstrap 5 cards example</h3>

</div>

<h5 class="card-title">Dōtonbori Canal</h5>

<p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p>

</div>

<h5 class="card-title">Porto Timoni Double Beach</h5>

<p class="card-text mb-4">Near Afionas village, on the west coast of Corfu island. The two beaches form two unique bays. The turquoise color of the sea contrasts to the high green hills surrounding it.</p>

</div>

<h5 class="card-title">Tritons Fountain</h5>

<p class="card-text mb-4">Located just outside the City Gate of Valletta, Malta. It consists of three bronze Tritons holding up a large basin, balanced on a concentric base built out of concrete and clad in travertine slabs.</p>

</div>

</section>

About section

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

}

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

.column {

float: left;

width: 33.3%;

margin-bottom: 16px;

padding: 0 8px;

}

.card {

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

margin: 8px;

}

.about-section {

padding: 50px;

text-align: center;

background-color: #474e5d;

color: white;

}

.container {

padding: 0 16px;

}

.container::after, .row::after {

content: "";

clear: both;

display: table;

}

.title {

color: grey;

}

.button {

border: none;

outline: 0;

display: inline-block;

padding: 8px;

color: white;

background-color: #000;

text-align: center;

cursor: pointer;

width: 100%;

}

.button:hover {

background-color: #555;

}

@media screen and (max-width: 650px) {

.column {

width: 100%;

display: block;

}

</style>

</head>

<body>

<h1>About Us Page</h1>

<p>Some text about who we are and what we do.</p>

<p>Resize the browser window to see that this page is responsive by the way.</p>

</div>

<p class="title">CEO & Founder</p>

<p>Some text that describes me lorem ipsum ipsum lorem.</p>

<p>jane@example.com</p>

<p><button class="button">Contact</button></p>

</div>

<p class="title">Art Director</p>

<p>Some text that describes me lorem ipsum ipsum lorem.</p>

<p>mike@example.com</p>

<p><button class="button">Contact</button></p>

</div>

<p class="title">Designer</p>

<p>Some text that describes me lorem ipsum ipsum lorem.</p>

<p>john@example.com</p>

<p><button class="button">Contact</button></p>

</div>

</body>

</html>

Contact us section

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, Helvetica, sans-serif;

}

* {

box-sizing: border-box;

}

/* Style inputs */

input[type=text], select, textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

margin-top: 6px;

margin-bottom: 16px;

resize: vertical;

}

input[type=submit] {

background-color: #04AA6D;

color: white;

padding: 12px 20px;

border: none;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #45a049;

}

/* Style the container/contact section */

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 10px;

}

/* Create two columns that float next to eachother */

.column {

float: left;

width: 50%;

margin-top: 6px;

padding: 20px;

}

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

.column, input[type=submit] {

width: 100%;

margin-top: 0;

}

</style>

</head>

<body>

<h2>Responsive Contact Section</h2>

<p>Resize the browser window to see the effect.</p>

<h2>Contact Us</h2>

<p>Swing by for a cup of coffee, or leave us a message:</p>

</div>

</div>

<label for="fname">First Name</label>

<label for="country">Country</label>

<option value="australia">Australia</option>

<option value="canada">Canada</option>

</select>

<label for="subject">Subject</label>

</form>

</div>

</body>

</html>

Footer section

How to Create Bootstrap 5 Footer Always at Bottom

1. First of all, load the Bootstrap 5 framework by adding the following CDN link into the head tag of your HTML page.

Copy and past this inside your header tag

2. After that, create the HTML structure for the footer as follows:

Copy and past this inside your body tag

<p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>

</div>

<li><a href="#">Travel</a></li>

<li><a href="#">Nature</a></li>

<li><a href="#">Explores</a></li>

<li><a href="#">Science</a></li>

<li><a href="#">Advice</a></li>

</ul>

</div>

<li><a href="#">About Us</a></li>

<li><a href="#">Contacts</a></li>

<li><a href="#">Terms & Condition</a></li>

<li><a href="#">Privacy Policy</a></li>

</ul>

</div>

<h4>Follow Us</h4>

<ul>

<li><a href="#">Facebook</a></li>

<li><a href="#">Twitter</a></li>

<li><a href="#">Instagram</a></li>

</ul>

</div>

<h4>Newsletter</h4>

<p>A rover wearing a fuzzy suit doesn’t alarm the real penguins</p>

<p>

</span>

</div>

</p>

</div>

</footer>

3. Finally, define the absolute position for the footer element to set the footer always at the bottom.

Copy and past this inside your css styling tage, <style>..</style>

body{

position: relative;

}

main{

margin-bottom: 220px;

}

.footer-bs{

position: absolute;

width: 100%;

min-height: 320px;

bottom: 40px;

left: 0;

}

With all above provided source code and this website https://www.w3schools.com/html/default.asp as your directive. you will able to design a good website. Also learn how to link diffrent web pages together with <a href = "about.html" style="color:white",background-color:pink">About</a>

About Me

I am Akinpelu Abiodun Moses by name. I am a programmer and a graphics designer.

Follow my google website link to know more about me:

https://sites.google.com/view/akinbrand-it-services/home

Search This Blog

CloudPrint