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:
- 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
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
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:
Keep practicing!
