Nairobi, Kenya

Getting Started on web programming by building a Landing Page

Getting Started on web programming by building a Landing Page

Hey welcome back to our blog

In this section here on the web development series, we highlighted some the benefits of learning web programming in 2023,Now lets start on on the practical part by building a simple landing page

Prerequisites

  • Browser e.g Chrome,Brave,Fire fox
  • Text Editor e.g sublime,vim,notepad
  • Computer skills e.g creating a folder and a file

Now in our guide here today am going to use sublime text and chrome web browser

To create a simple website, you will need to use a combination of HTML, CSS, and JavaScript.

and their functionalities includes:

  1. Write the HTML for the basic structure of your website. This will include the <html>, <head>, and <body> tags, as well as any other structural elements you want to add, such as <header> and <footer>.
  2. Add the CSS to style your website. This will include things like the font, color, and layout of your page.
  3. Use JavaScript to add interactivity to your website. This can include things like form validation, animations, and other dynamic elements

Now create a folder named web and then inside the folder create three files namely index.html index.css index.js

Mine looks like this

web-isoftke

The html structure code

The common html template code contains the html,body,head and tittle tags as shown below

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my web page</title>
</head>
<body>
</body>
</html>

we can add our web page tittle as shown above as my web page

In this project on the html structure we are going to have three sections that’s the navigation,body and footer as shown in the codes below

Navigation section

The navigation section contains the links to different pages like home,about,contact,products

now add the following codes below the body and then run the output in the browser using the correct file name,To run the code go to the index.html file on the folder and open it using your favorite web browser

We have used the class attribute in the html tag to  access the unique html element easily when styling and adding JavaScript functionality.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my web page</title>
</head>
<body>
<nav class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<li class="login">Login</li>
</ul>
</nav>
</body>
</html>

The body and footer

Our body contains a simple welcoming text and an svg image and the footer contains the links to different social media pages like facebook,instagram,twitter.

you can get the svg images here

First lets connect our html file with our CSS file by including it in a <link> tag in the <head> section then use the correct path, like this:

<link rel="stylesheet" type="text/css" href="index.css">

Lets add our html code for the body and footer as shown below

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my web page</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<nav class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<li class="login">Login</li>
</ul>
</nav>

<section class="intro">
<div class="intro_one"> <h2>Unlock Your Potential: The Benefits of Learning Web Programming in 2023</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<button class="login-btn" onclick="start()">START</button>
</div>
<div class="intro_two"> 
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="600" height="600" viewBox="0 0 563.23193 596.81738" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="215.61496" cy="68.26613" r="26.70075" fill="#fd6584"/><path d="M601.11937,230.11183a13.23512,13.23512,0,0,0-11.17-9.29,1.08068,1.08068,0,0,0-.18,0,1.41827,1.41827,0,0,0-.22-.05c-8.94-1.16-18.88,1.66-25.57,7.8a23.95824,23.95824,0,0,0-5.83,8.04,12.917,12.917,0,0,0-10.83-5.28,13.18351,13.18351,0,0,0-11.8,9.51,1.52646,1.52646,0,0,0,.69,1.69,6.673,6.673,0,0,0,2.79,1.42c2.21.47,4.44.9,6.67,1.29q6.54,1.14,13.15,1.85,4.365.465,8.75.74c6.04.38,12.11.47,18.16.28,3-.1,5.88-.2,8.62-1.52a12.79756,12.79756,0,0,0,4.95-4.31A14.54776,14.54776,0,0,0,601.11937,230.11183Z" transform="translate(-325.74624 -174.48895)" fill="#e6e6e6"/><path d="M546.18937,269.01185a13.65247,13.65247,0,0,0-.56-3.3,13.26025,13.26025,0,0,0-11.18-9.29.9647.9647,0,0,0-.17,0,1.88726,1.88726,0,0,0-.23-.05,33.19372,33.19372,0,0,0-14.69,1.51c-7.26,2.43-13.63,7.32995-16.7,14.32995a12.92229,12.92229,0,0,0-10.84-5.28,13.18342,13.18342,0,0,0-11.8,9.51,1.55528,1.55528,0,0,0,.69,1.69,6.73289,6.73289,0,0,0,2.79,1.42c2.22.47,4.44.9,6.68,1.29q6.54,1.14,13.14,1.85a195.164,195.164,0,0,0,26.92,1.01995c2.99-.1,5.88-.2,8.62-1.51995a12.76978,12.76978,0,0,0,4.94-4.31A14.26445,14.26445,0,0,0,546.18937,269.01185Z" transform="translate(-325.74624 -174.48895)" fill="#e6e6e6"/><path d="M743.87618,605.96893h-24.34V225.999c-1.64-1.21-3.29-2.41-4.96-3.58q-.49493-.345-.99-.69a288.32215,288.32215,0,0,0-62.01-32.94l-4.72,65.1-.0003.004H616.48623V177.879c-1.98-.49-3.96-.95-5.96-1.38v77.394h-114.68V174.489c-1.99.37-3.98.75-5.96,1.16v78.244H458.5165l-.0003-.004-4.95-68.27a287.68741,287.68741,0,0,0-60.78,29.46c-.66.42-1.32.84-1.98,1.28-1.33.86-2.66,1.74-3.97,2.63v386.98h-34.27a26.80329,26.80329,0,0,0-24.88995,36.79,25.53979,25.53979,0,0,0,1.75,3.56,27.09542,27.09542,0,0,0,3.02,4.18,26.76039,26.76039,0,0,0,20.12,9.11h391.31a26.82,26.82,0,0,0,0-53.64ZM640.316,344.27123l-18.92981,261.6977h-137.4l-18.92981-261.6977Zm6.11-84.41931-4.66974,64.55591h-25.27V259.85192Zm-35.89978,0v64.55591H564.89394a10.91565,10.91565,0,0,0-9.72265-5.959h-5.95905a10.91565,10.91565,0,0,0-9.72265,5.959H495.84621V259.85192Zm-120.64,64.55591h-26.27l-4.66974-64.55591h30.93976Z" transform="translate(-325.74624 -174.48895)" fill="#f2f2f2"/><path d="M328.11414,649.21557a289.0041,289.0041,0,0,0,28.12,28.95l379.57995,1a289.003,289.003,0,0,0,28.12-28.95Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M519.80415,552.40557v102.56h71.85v-102.56a3.448,3.448,0,0,0-2.43-3.3,3.1749,3.1749,0,0,0-1.03-.16h-64.92A3.46327,3.46327,0,0,0,519.80415,552.40557Zm28.04,35.24a7.67034,7.67034,0,0,1,15.34,0v11.9a7.6701,7.6701,0,0,1-15.34,0Z" transform="translate(-325.74624 -174.48895)" fill="#2f2e41"/><path d="M519.58417,651.6856v9.89a1.94623,1.94623,0,0,0,1.93,1.94h68.43a1.93971,1.93971,0,0,0,1.93-1.94v-9.89Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M406.77412,397.88561v187.26a9.00714,9.00714,0,0,0,9,9h277.5a9.0071,9.0071,0,0,0,9-9v-187.26a9.01147,9.01147,0,0,0-9-8.99h-277.5A9.01151,9.01151,0,0,0,406.77412,397.88561Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M413.28413,400.21557v182.62a4.81833,4.81833,0,0,0,4.81,4.81h272.87a4.8183,4.8183,0,0,0,4.81-4.81v-182.62a4.82048,4.82048,0,0,0-4.81-4.82h-272.87A4.82051,4.82051,0,0,0,413.28413,400.21557Z" transform="translate(-325.74624 -174.48895)" fill="#00426f"/><path d="M468.92414,665.84557a2.94838,2.94838,0,0,0,2.32,1.11h162.34a2.98725,2.98725,0,0,0,2.92-3.6l-2.52-11.97a2.99263,2.99263,0,0,0-1.86-2.17,2.89445,2.89445,0,0,0-1.06-.19995h-157.31a2.89426,2.89426,0,0,0-1.06.19995,2.99243,2.99243,0,0,0-1.86,2.17l-2.52,11.97A2.9849,2.9849,0,0,0,468.92414,665.84557Z" transform="translate(-325.74624 -174.48895)" fill="#2f2e41"/><path d="M473.75405,651.516a.395.395,0,0,0-.14453.02539.50826.50826,0,0,0-.32764.35254l-2.52148,11.97656a.47775.47775,0,0,0,.10156.39551l.01123.01367a.449.449,0,0,0,.37109.17578H633.58413a.467.467,0,0,0,.37012-.17481.45923.45923,0,0,0,.106-.39746l-2.52246-11.98339a.49765.49765,0,0,0-.30371-.34864.43641.43641,0,0,0-.16992-.03515Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><path d="M426.86744,420.5523H682.1908a1.0156,1.0156,0,0,0,0-2.0307H426.86744a1.0156,1.0156,0,0,0,0,2.0307Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><ellipse cx="339.06437" cy="232.76546" rx="5.95043" ry="6.08304" fill="#3f3d56"/><ellipse cx="318.50835" cy="232.76546" rx="5.95043" ry="6.08304" fill="#3f3d56"/><ellipse cx="297.95233" cy="232.76546" rx="5.95043" ry="6.08304" fill="#3f3d56"/><path d="M438.15555,403.78558a1.0948,1.0948,0,0,0,1.09,1.1h14.6a1.1053,1.1053,0,0,0,0-2.21h-14.6A1.1034,1.1034,0,0,0,438.15555,403.78558Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M438.15555,407.9356a1.09475,1.09475,0,0,0,1.09,1.1h14.6a1.10527,1.10527,0,0,0,0-2.21h-14.6A1.1034,1.1034,0,0,0,438.15555,407.9356Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M438.15555,412.07562a1.1034,1.1034,0,0,0,1.09,1.11h14.6a1.1053,1.1053,0,0,0,0-2.21h-14.6A1.09476,1.09476,0,0,0,438.15555,412.07562Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M644.14761,451.54632H464.9103a8.89169,8.89169,0,0,0-8.88135,8.88135v87.23681a8.8918,8.8918,0,0,0,8.88135,8.88184H644.14761a8.89179,8.89179,0,0,0,8.88134-8.88184V460.42767A8.89168,8.89168,0,0,0,644.14761,451.54632Zm6.88134,8.88135v25.45166h-63v-32.333h56.11866A6.88908,6.88908,0,0,1,651.029,460.42767Zm-128,59.78564v-32.334h63v32.334Zm63,2v32.333h-63v-32.333Zm-65-2h-63v-32.334h63Zm2-34.334v-32.333h63v32.333Zm65,2h63v32.334h-63Zm-123.11865-34.333H521.029v32.333h-63V460.42767A6.88908,6.88908,0,0,1,464.9103,453.54632ZM458.029,547.66448V522.21331h63v32.333H464.9103A6.88919,6.88919,0,0,1,458.029,547.66448Zm186.11866,6.88184H588.029v-32.333h63v25.45117A6.88918,6.88918,0,0,1,644.14761,554.54632Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M545.41938,473.69457c-1.59058-2.63069-3.47535-5.43947-6.42705-6.29847-3.41828-.99476-6.9297.98138-9.9082,2.93142a288.72629,288.72629,0,0,0-25.69476,18.93158l.009.10212,19.1738-1.32225c4.6177-.31844,9.394-.68081,13.4748-2.86527,1.54851-.82892,3.058-1.93619,4.8127-2.01335,2.18007-.09585,4.081,1.42671,5.57479,3.01744,8.83651,9.40968,11.39362,23.79933,21.3073,32.06644A314.61566,314.61566,0,0,0,545.41938,473.69457Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><path d="M599.7361,553.50572c-.97718-1.23391-1.37646-1.52289-2.34035-2.76822q-11.77262-15.22612-22.1306-31.48084-7.03554-11.03961-13.37335-22.50318-3.01729-5.44992-5.86917-10.9854-2.213-4.29206-4.32719-8.63546c-.40309-.827-.79476-1.6579-1.18448-2.49064-.91831-1.95829-1.81955-3.92607-2.78726-5.85775a16.11413,16.11413,0,0,0-4.46988-5.98893,6.09843,6.09843,0,0,0-3.177-1.2225,8.86159,8.86159,0,0,0-4.59911,1.31757,148.04814,148.04814,0,0,0-29.11183,20.07527A151.55944,151.55944,0,0,0,482.71431,509.22c-.20906.2985-.7034.01331-.49239-.28708q1.24631-1.76247,2.542-3.48689A152.39717,152.39717,0,0,1,523.671,469.155q3.78459-2.45261,7.71148-4.67517c1.31945-.74719,2.64466-1.48488,3.99261-2.17692a9.72793,9.72793,0,0,1,4.23409-1.31187c5.13717-.07985,7.79706,5.738,9.62413,9.65264q.86127,1.848,1.74343,3.68462,3.33382,6.97281,6.92433,13.81826,2.21591,4.22647,4.52883,8.40352,7.198,13.00739,15.30124,25.48812c7.15632,11.02153,14.25555,20.75782,22.40808,31.06448C600.36357,553.38784,599.96243,553.79471,599.7361,553.50572Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><path d="M505.8582,480.09286c-.29847-.33272-.59507-.66544-.89548-.99815-2.36895-2.61993-4.91085-5.20943-8.16395-6.71142a11.84427,11.84427,0,0,0-4.96227-1.15025,14.16149,14.16149,0,0,0-5.15231,1.12364c-.77572.30991-1.53437.66163-2.2815,1.03618-.8537.42968-1.69218.88789-2.52676,1.34989q-2.35,1.30045-4.639,2.715-4.55449,2.8148-8.82372,6.05928-2.21312,1.68261-4.3349,3.47548-1.97348,1.66549-3.8671,3.42035c-.27.24906-.673-.154-.40309-.40307.33272-.3099.66924-.6179,1.00577-.9221q1.42593-1.28906,2.89754-2.52867,2.68351-2.26439,5.506-4.35385,4.38906-3.25113,9.08031-6.06117,2.3443-1.40312,4.75312-2.68837c.48487-.25857.97541-.51144,1.47161-.751a23.45971,23.45971,0,0,1,3.49828-1.424,12.44508,12.44508,0,0,1,5.28357-.519,13.75614,13.75614,0,0,1,4.87483,1.68641c3.19405,1.78527,5.67134,4.54588,8.08215,7.23995C506.5047,479.96167,506.10347,480.36664,505.8582,480.09286Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><path d="M571.30359,507.2422l7.6538-2.79942,3.80014-1.38991a38.8622,38.8622,0,0,1,3.75173-1.29215,5.91886,5.91886,0,0,1,3.39578.04327,7.82666,7.82666,0,0,1,2.64863,1.64187,21.49478,21.49478,0,0,1,2.17243,2.32c.82736.9943,1.6425,1.999,2.46129,3.00038q5.069,6.19922,10.0717,12.45223,5.00259,6.2529,9.93828,12.55895,4.94777,6.32146,9.82747,12.69578.59778.78089,1.19453,1.56254c.21979.28788.7154.00407.4925-.28788q-4.91571-6.43842-9.89994-12.82414-4.9965-6.401-10.062-12.74766-5.06544-6.34655-10.19934-12.63806-1.279-1.56741-2.56224-3.13136c-.72164-.8795-1.43514-1.76849-2.22665-2.58709a8.0255,8.0255,0,0,0-5.44085-2.86653,10.50123,10.50123,0,0,0-3.70075.81358c-1.27955.4629-2.556.93446-3.834,1.40186l-7.70733,2.819-1.92683.70475c-.34194.12506-.19423.6765.15163.55Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><path d="M495.79155,475.68a12.35654,12.35654,0,0,0-12.4447.89,177.49838,177.49838,0,0,1,20.19408,4.7132C500.7862,479.66878,498.63134,477.13947,495.79155,475.68Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><path d="M483.30857,476.563l-.74878.60863c.25328-.213.51658-.41275.78706-.60175Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><path d="M592.26547,507.27016a6.371,6.371,0,0,0-2.69492-2.24988l-1.05213.04149a119.34217,119.34217,0,0,0,31.78674,36.33972Z" transform="translate(-325.74624 -174.48895)" fill="#fff"/><circle cx="261.59709" cy="311.22703" r="6.0589" fill="#fff"/><path d="M675.26821,553.04632a4.50677,4.50677,0,0,0,4.5-4.5v-93a4.5,4.5,0,1,0-9,0v93A4.50677,4.50677,0,0,0,675.26821,553.04632Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M675.26821,553.04632a4.50677,4.50677,0,0,0,4.5-4.5v-19.72a5.58075,5.58075,0,0,0-9,0v19.72A4.50677,4.50677,0,0,0,675.26821,553.04632Z" transform="translate(-325.74624 -174.48895)" fill="#2f2e41"/><path d="M675.26821,534.04632a4.8469,4.8469,0,0,0,4.83962-4.83962V507.99842a6.00194,6.00194,0,0,0-9.67924,0V529.2067A4.8469,4.8469,0,0,0,675.26821,534.04632Z" transform="translate(-325.74624 -174.48895)" fill="#00426f"/><path d="M675.26821,530.19a3.53525,3.53525,0,0,0,3.52994-3.52993V511.19114a4.37772,4.37772,0,0,0-7.05988,0v15.46895A3.53525,3.53525,0,0,0,675.26821,530.19Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M536.44482,657.52463a4.00426,4.00426,0,0,1-.317-5.648L575.44364,607.885a4,4,0,0,1,5.965,5.331l-39.31583,43.99166A4.00426,4.00426,0,0,1,536.44482,657.52463Z" transform="translate(-325.74624 -174.48895)" fill="#00426f"/><path d="M862.596,729.9553c0,7.29-1.72,12.87-1.51,17.33a287.26786,287.26786,0,0,1-36.3,13.02c-1.4.4-2.8.78-4.21,1.16-7.63-23.36-15.27-44.75-18.28-47.02-6.89-5.17-10.34,16.22-10.34,11.05005,0-5.17,3.45-5.17-5.16-12.06-8.62-6.89-3.45-37.9-3.45-37.9l-12.06-31.01,13.49-49.46,17.52-64.25h17.23s.51.37,1.36,1.06c4.31,3.52,17.31,15.28,15.87,28.23-.43,3.86.53,15.08,2.2,30.02,5.08,45.11,16.75,94.15,16.75,107.09C855.706,714.44529,862.596,719.61534,862.596,729.9553Z" transform="translate(-325.74624 -174.48895)" fill="#e6e6e6"/><path d="M848.14822,589.95629c-.02-.05-.03-.09-.04993-.12994a26.64071,26.64071,0,0,0-1.3501-3.04c-2.90991-5.47.17-13.87-3.11-23.15-5.29993-15.04-11.76-23.91-21.23-31.86-.28-.24-.55994-.47-.85-.71l-.01-.01c-6.32007-5.19-13.93994-10.04-23.4-16.08-1.9701-1.26-4.03-2.57-6.17005-3.95-2.76-1.77-2.61-7.67-2.44995-13.91.17993-6.93.37-14.11-3.03-18.59l-.22-.29-.3501-.09a150.43671,150.43671,0,0,0-35.41992-2.73h-.01a69.65878,69.65878,0,0,0-14.92993,2.19c-.36011.1-.72.2-1.07007.32-.27.07-.54.16-.81006.25l-.22.08-.16992.16c-3.29,3.29-4.05,9.19-4.41,15.34v.01q-.10492,1.68009-.18006,3.36005c-.28,5.98-.53992,11.63-2.74,14.07995a57.78784,57.78784,0,0,1-17.47,13.44c-10.33,5.1-18.5,4.94-18.62,4.94l-.95008-.03-.08984.94c-6.86011,13.07-6.6001,46.79-6.81006,82.9q-.015,3.015-.04,6.06c-.12,16.82-.43994,33.93006-1.7,49.52-.55,6.7-1.26,13.11-2.21,19.1-4.62012,29.17-25.55,4.94995-35.56006,24.36a24.526,24.526,0,0,0,1.65,5.55c1.15.68,2.33,1.34,3.5,2q7.7851,4.335,15.86,8.09c.3.13995.6.28.8999.41a236.73639,236.73639,0,0,0,30.46009,11.62c2.03.62,4.05993,1.21,6.11,1.77a233.58618,233.58618,0,0,0,55.61011,8.32995,1.70119,1.70119,0,0,1,.23-.01,288.58529,288.58529,0,0,0,65.83984-9.49q.45007-.11992.90015-.24c1.40991-.38,2.80994-.76,4.21-1.16a287.27936,287.27936,0,0,0,36.30005-13.02,9.23784,9.23784,0,0,0,.12988,1.31,3.02968,3.02968,0,0,0,.06006.42c.02-.16.04-.32.05-.48.05994-.47.10986-.95.15991-1.43C870.6083,666.42632,857.89822,615.75634,848.14822,589.95629Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M710.7141,443.689a55.98285,55.98285,0,1,0-2.84465-47.69329c-.25622.64069-.48694,1.28139-.7175,1.94774A55.90649,55.90649,0,0,0,710.7141,443.689Z" transform="translate(-325.74624 -174.48895)" fill="#ffb6b6"/><path d="M702.66709,397.94348c2.409-6.74013,1.35819-3.22913,3.79286-9.9436-1.58907,5.94567.92256,9.27725.692,9.9436h66.65793V359.19426c-19.52853-7.73965-38.62111-14.326-50.15362,0A38.75088,38.75088,0,0,0,684.907,397.94348Z" transform="translate(-325.74624 -174.48895)" fill="#2f2e41"/><path d="M726.29584,505.657c.05131-.7175.12811-1.46081.23072-2.1783.7175-5.27932,2.51148-10.35373,4.33111-15.37668,1.92208-5.40743,3.86982-10.84067,5.8174-16.24809a46.51862,46.51862,0,0,0,2.17846,29.52327c11.25064-8.76466,4.15153-28.80562,18.862-28.80562,35.36633,0,71.75783-28.67751,71.75783-64.06949,0-35.36649-15.17161-61.81424-50.53794-61.81424-35.39214,0-64.0953,16.19663-64.78715,51.56312C757.71555,408.50212,718.06942,502.06923,726.29584,505.657Z" transform="translate(-325.74624 -174.48895)" fill="#2f2e41"/><circle cx="499.30786" cy="187.58797" r="41.00448" fill="#2f2e41"/><path d="M888.97817,597.23632q-.20983,3.165-.36987,6.74c-2.12012,44.89-.29,105.32-14.58008,138.11q-4.79993,2.625-9.7,5.02-.1952.09-.36011.18c-.87988.43-1.76.85-2.63989,1.25a.30049.30049,0,0,1-.11011.06,238.80759,238.80759,0,0,1-29.80993,11.71c-1.25.4-2.51.78-3.77,1.16q-.405.12-.80994.24a233.934,233.934,0,0,1-59.04,9.49c-1.04.03-2.06006.05-3.05.07-.35.01-.68994.02-1.03.02-1.11987.01-2.23.02-3.34985.02q-3.39,0-6.75-.1a233.58618,233.58618,0,0,1-55.61011-8.32995c-2.05005-.56-4.08-1.15-6.11-1.77a236.73639,236.73639,0,0,1-30.46009-11.62c-.29992-.13-.59985-.27-.8999-.41q-8.07-3.75-15.86-8.09c-1.17-.66-2.35-1.32-3.5-2a24.526,24.526,0,0,1-1.65-5.55c-2.27-10.91-4.09009-3.55-5.39-26.25-1.19007-20.81-1.95008-41.68-2.23-53.61-.09-3.18005-.12-5.73-.13-7.47,1.06006-7.58,18.1-16.18,42.95-24.35,2.3501-.77,4.78-1.54,7.27-2.30005,6.72-2.06994,13.9-4.1,21.4-6.06,19.1-5,40.30993-9.59,61.36-13.38,10.39-1.86,20.74-3.53,30.79-4.95,17.63-2.5,34.31006-4.23,48.58-4.94,1.37-.07,2.71008-.13,4.03-.17005,1.42-.06,2.80993-.1,4.17-.12994C872.8782,589.37634,886.91823,591.51629,888.97817,597.23632Z" transform="translate(-325.74624 -174.48895)" fill="#2f2e41"/><path d="M888.97817,597.23632q-.20983,3.165-.36987,6.74c-15.58008-16.78-183.42017,58.18-254.4801,103.21-1.19007-20.81-1.95008-41.68-2.23-53.61-.09-3.18005-.12-5.73-.13-7.47,1.06006-7.58,18.1-16.18,42.95-24.35,2.3501-.77,4.78-1.54,7.27-2.30005,6.72-2.06994,13.9-4.1,21.4-6.06,19.1-5,40.30993-9.59,61.36-13.38,10.39-1.86,20.74-3.53,30.79-4.95,17.63-2.5,34.31006-4.23,48.58-4.94,1.37-.07,2.71008-.13,4.03-.17005,1.42-.06,2.80993-.1,4.17-.12994C872.8782,589.37634,886.91823,591.51629,888.97817,597.23632Z" transform="translate(-325.74624 -174.48895)" opacity="0.2"/><path d="M547.647,649.249a17.32416,17.32416,0,0,0,26.55514.70567l56.94831,23.38893-6.14528-31.39622-53.137-17.39715A17.418,17.418,0,0,0,547.647,649.249Z" transform="translate(-325.74624 -174.48895)" fill="#ffb6b6"/><path d="M737.08152,518.50858l-.31228-.03292-33.20892,2.411a29.80748,29.80748,0,0,0-21.56072,11.67523,29.21506,29.21506,0,0,0-3.07519,4.99743l-.0085.00516a29.80365,29.80365,0,0,0-2.45624,18.88793l15.63449,78.70251-37.61826-3.41768-13.73193,2.347-16.20487-6.53788-33.25143.56581-.77072,2.5485-6.97538,23.1234-.54758,1.8169,50.77548,31.9965,14.72063-4.478,6.93506,5.327.33277.00879L669.51,688.727l58.64789,1.14988,16.03121-28.40114,2.50475-4.453c18.61846-41.70905,23.2126-70.82612,21.7551-90.8852-.76379-10.59874-3.21422-18.6553-6.18063-24.727C753.0957,522.648,737.72706,518.667,737.08152,518.50858Z" transform="translate(-325.74624 -174.48895)" fill="#3f3d56"/><path d="M830.24026,398.48144a47.34714,47.34714,0,0,1-34.17334-30.18286c-2.40589-6.97791-3.31379-14.64008-7.352-20.85022a111.46662,111.46662,0,0,0,14.65466-27.54114c1.38165-3.80243,4.61743-10.70514-.8681-12.79687-4.37036-1.66651-9.33539,2.35565-11.92591,5.52941a21.05709,21.05709,0,0,0-4.13318,8.23072q-1.34024-5.9176-2.68042-11.83527a1.53553,1.53553,0,0,0-1.84515-1.04767c-7.32165,1.24823-12.63183,8.02783-13.55414,15.16864a15.4535,15.4535,0,0,0,2.356,10.52161c2.352,3.57825,5.79639,6.14355,9.074,8.81006,3.48554,2.83575,6.44019,5.856,8.31409,10.00281,1.94757,4.31,2.82465,9.02667,4.11658,13.55236a50.20771,50.20771,0,0,0,37.21942,35.33124C831.32461,401.78552,832.1285,398.8941,830.24026,398.48144Zm-41.34687-71.71552a17.41119,17.41119,0,0,1,2.83728-10.66461,16.89232,16.89232,0,0,1,3.85309-4.17389c1.43244-1.0943,3.54529-2.54352,5.44031-2.14154,2.4577.52136,1.46906,3.26483.947,4.91925q-1.03317,3.27411-2.27179,6.47858a106.45584,106.45584,0,0,1-5.58972,12.10742c-1.098,2.03778-2.27118,4.03247-3.49646,5.99445q-1.26692-5.594-2.53388-11.188A1.25559,1.25559,0,0,0,788.89339,326.76592Zm-17.51977.597a14.81431,14.81431,0,0,1,9.817-16.1106q3.57166,15.77032,7.14332,31.54077c-.4914.72474-.99836,1.43866-1.50654,2.15192-.133-.15314-.2547-.31146-.39312-.4621C781.43978,339.0476,772.73092,335.34246,771.37362,327.36291Z" transform="translate(-325.74624 -174.48895)" fill="#00426f"/></svg> 
</div>
</section>
<footer>
<h3>Follow us on:</h3>
<li><ul>instagram</ul><ul>whatsapp</ul><ul>facebook</ul><ul>tiktok</ul><ul>pintrest</ul>
</li>
</footer>
</body>
</html>

Styling(CSS)

We are done with creating our html file structure code now lets add our styles

We are going to add some colors to the navigation bar position the body well and then add some color to the footer texts and as well as position the elements in the body

As shown below:

body{
text-align: center;
}
/*style navigation*/
.navigation{
background: #D8D9CF;
}
.navigation li{
margin: 10px;
padding: 10px;
font-family: fantasy;
text-decoration: none;
display: flex;

}
.navigation ul{

display: flex;
text-transform: uppercase;
list-style: none;
align-content: center;
justify-content: center;
padding: 10px;

}
/*style login button in navigation*/
.login{
background: black;
color: white;

}
/*style the body*/

.intro{
text-align: center;
display: flex;
text-transform: uppercase;
list-style: none;
align-content: center;
justify-content: center;
}
h2{
font-size: 40px;
padding: 40px;
}

.login-btn{
background: black;
color: white;
height: 50px;
width: 100px;

}
/*style the footer*/

footer li{
display: flex;
text-transform: uppercase;
list-style: none;
align-content: center;
justify-content: center;
padding: 10px;
color: red;
font-size: 20px;
}

 

 

 

JavaScript

Job well done we are done with the web page structure and styling now lets add some small interactivity such that when one clicks the start button a welcome message will pop up

add the script tag just before the end of the body tag as shown:

<script src="index.js" type="text/javascript"></script>

On the button with the class named login-btn add the following function onclick="start()"

<button class="login-btn" onclick="start()">START</button>

Now on the index.js file add the functionality start as shown

function start(){
alert("Hello welcome,Unlock Your Potential: The Benefits of Learning Web Programming in 2023")
}

 

After adding the JavaScript code,Try clicking the button and a message pop up will be displayed as shown on the picture above

That’s our first step on Getting Started with Building a Landing Page: Web Programming basic

For more information on how to use HTML, CSS, and JavaScript to create a website, you can check out the following resources:

W3schools

MDN web docs

FreeCodeCamp

Keep practicing!