Getting Started on web programming by building a Landing Page
5 min readBy admin

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
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!
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
- 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>. - Add the CSS to style your website. This will include things like the font, color, and layout of your page.
- Use JavaScript to add interactivity to your website. This can include things like form validation, animations, and other dynamic elements
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 theindex.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 thescript 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!Keep reading
How to Overcome the 7 Most Common Mistakes of Junior Software Developers
How to Overcome the 7 Most Common Mistakes of Junior Software Developers As a junior software developer, it's normal to make mistakes in the process of…
6 JavaScript frameworks you should try learning in 2023
6 JavaScript frameworks you should try learning in 2023 In this blog today we are featuring the top JavaScript frameworks you should try learning in 2023 to…
How to set up react-redux : A beginners guide
How to set up react-redux : A beginners guide Introduction In this guide today, we will walk you through the process of setting up the popular library…
Need A Consultation?
We are here to answer your questions 24/7



