-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
21 lines (21 loc) · 23.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en-GB" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-intro">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v2.3.1">
<title data-rh="true">Introduction | Web development for beginners</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://ezinneanne.github.io/web-development-for-beginners/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Introduction | Web development for beginners"><meta data-rh="true" name="description" content="Introduction to web development"><meta data-rh="true" property="og:description" content="Introduction to web development"><link data-rh="true" rel="icon" href="/web-development-for-beginners/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://ezinneanne.github.io/web-development-for-beginners/"><link data-rh="true" rel="alternate" href="https://ezinneanne.github.io/web-development-for-beginners/" hreflang="en-GB"><link data-rh="true" rel="alternate" href="https://ezinneanne.github.io/web-development-for-beginners/" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://M328T1M59H-dsn.algolia.net" crossorigin="anonymous"><script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/web-development-for-beginners/</span> </p>\n <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="search" type="application/opensearchdescription+xml" title="Web development for beginners" href="/web-development-for-beginners/opensearch.xml"><link rel="stylesheet" href="/web-development-for-beginners/assets/css/styles.4fe05b00.css">
<link rel="preload" href="/web-development-for-beginners/assets/js/runtime~main.8d6eae5a.js" as="script">
<link rel="preload" href="/web-development-for-beginners/assets/js/main.8a446e29.js" as="script">
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div id="docusaurus-base-url-issue-banner-container"></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><a class="navbar__brand" href="/web-development-for-beginners/"><div class="navbar__logo"><img src="/web-development-for-beginners/img/logo.png" alt="Web development Logo" class="themedImage_ToTc themedImage--light_HNdA"><img src="/web-development-for-beginners/img/logo.png" alt="Web development Logo" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate">Web development for beginners</b></a></div><div class="navbar__items navbar__items--right"><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_ZlJk"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebarViewport_Xe31"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/web-development-for-beginners/">Introduction</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/web-development-for-beginners/category/html">Html</a><button aria-label="Toggle the collapsible sidebar category 'Html'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/web-development-for-beginners/category/css">CSS</a><button aria-label="Toggle the collapsible sidebar category 'CSS'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/web-development-for-beginners/category/javascript">Javascript</a><button aria-label="Toggle the collapsible sidebar category 'Javascript'" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/web-development-for-beginners/Calculator app/calculatorhtml">Calculator app</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" aria-expanded="false" href="/web-development-for-beginners/Git/intro-to-git">Git</a></div></li></ul></nav></div></div></aside><main class="docMainContainer_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/web-development-for-beginners/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Introduction</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Introduction</h1><h2 class="anchor anchorWithStickyNavbar_LWe7" id="introduction-to-web-development">Introduction to web development<a href="#introduction-to-web-development" class="hash-link" aria-label="Direct link to Introduction to web development" title="Direct link to Introduction to web development"></a></h2><p>Web development is the process of building websites. Building a website requires technical knowledge. Markup languages like html and css are paramount in building web pages. </p><p>Html lays the structure of the web page while CSS styles the page and makes it presentable. Then programming languages are used to make websites dynamic. When you register your details on a site and the site saves it and sends a welcome message with your name. That is the work of programming languages. These languages are used to interact with the web without the programming languages, <a href="https://link.medium.com/UJHIs2IXWxb" target="_blank" rel="noopener noreferrer">websites would be static</a>.</p><p>JavaScript is a programming language used in building websites. JavaScript was built primarily for building websites and it has advanced with great features, frameworks and libraries.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="web-design-and-web-development">Web design and web development<a href="#web-design-and-web-development" class="hash-link" aria-label="Direct link to Web design and web development" title="Direct link to Web design and web development"></a></h2><p>Web design and web development are used interchangably in programming often. But, there is a clear distinction between both terms.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="web-design">Web design<a href="#web-design" class="hash-link" aria-label="Direct link to Web design" title="Direct link to Web design"></a></h3><p>Web design has to do with designing the content that a browser displays on a web page. It covers the structure, size, position and entire layout of the content on a web page and how you can perceive them. It generally has to do with making web pages presentable and easily understood. Web designers normally use design tools like, Adobe, Figma and other design tools. Their skills include all forms of designs, including markup languages--html and css. Web designers use html and css to set the structure of the site and design it. They also use css frameworks like bootstrap and tailwind. A web designer could also acquire some javascript knowledge in order to build dynamic websites(websites that perform operations).</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="web-development">Web development<a href="#web-development" class="hash-link" aria-label="Direct link to Web development" title="Direct link to Web development"></a></h3><p>Web development covers the art of making websites work. Web developers usually take work created by web designers to create a functioning website. They use programming languages to make a web page able to carry out operations. A web designer might focus on design and general aesthetics but web developers master programming languages, frameworks and libraries to build all kinds of applications on the web.
Web development have two main categories which are: </p><ul><li><strong>Frontend web development</strong></li><li><strong>Backend web development</strong></li></ul><p><strong>Frontend web development</strong></p><p>Frontend development has to do with the client side of an application. It is the part of the application that you would see and interact with. Developers who specialize in frontend development are called <em>frontend developers</em>. They usually bring designs to life on a webpage by using a programming language. Frontend developers are familiar with markup languages but they are also good at programming language(s) usually javascript and all the necessary libraries and frameworks.</p><p><strong>Backend web development</strong></p><p>Backend web development covers the server side of the application. As a user on the web, you would not come across server side operations. But, it is what powers the web, the backend is in charge of storing data and managing data gotten from the frontend of the application. It also makes it possible for web pages to register users on their page, subscribe to their emails and other operations. Backend developers master programming languages like Java, Javascript, C#, Python and so on.</p><p>A developer who is familiar with frontend development and backend development is called a fullstack developer.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="getting-started">Getting started<a href="#getting-started" class="hash-link" aria-label="Direct link to Getting started" title="Direct link to Getting started"></a></h2><p>Programming is fun! and so is web development. In backend development, you would not need to master many languages before you can build an application. In reality, most backend developers would master one programming language and some frameworks of that language while having a shallow knowlege of others.</p><p>This documentation serves as a beginner's guide to the basics of web development. By the end of this documentation, you should be familiar with </p><ul><li>html tags</li><li>html elements</li><li>html lists and forms</li><li>css</li><li>css basics</li><li>topography and display</li><li>other topics in css</li><li>javascript basics</li><li>functions and conditional statements</li><li>building basic applications with html,css and javascript</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="prerequisites">Prerequisites<a href="#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites"></a></h2><p>To follow properly through the sections of this tutorial, you will need:</p><ul><li>A web browser like <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noopener noreferrer">Firefox</a>.</li><li>A text editor like <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">VSCode</a>.</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="installing-tools">Installing tools<a href="#installing-tools" class="hash-link" aria-label="Direct link to Installing tools" title="Direct link to Installing tools"></a></h2><h3 class="anchor anchorWithStickyNavbar_LWe7" id="installing--chrome">Installing Chrome<a href="#installing--chrome" class="hash-link" aria-label="Direct link to Installing Chrome" title="Direct link to Installing Chrome"></a></h3><p>I will use Chrome browser to run webpages. To install Chrome, </p><ul><li>Click on this <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">installing Chrome on a PC</a>.
<img loading="lazy" alt="Chrome homepage for downloads" src="/web-development-for-beginners/assets/images/installing_chrome-41677ea8311b74b4eaa33ed7aa409728.png" width="1348" height="616" class="img_ev3q"></li><li>Follows the steps that comes up on Chrome page while you are downloading.
<img loading="lazy" alt="Chrome thankyou page after downloads" src="/web-development-for-beginners/assets/images/chrome-thankyou-page-a08c0e0f7bda9d9f57569c58ff9d54b9.png" width="1347" height="626" class="img_ev3q"></li><li>If you mistakenly closed the page, this is the <a href="https://www.google.com/chrome/thank-you.html?statcb=1&installdataindex=empty&defaultbrowser=0" target="_blank" rel="noopener noreferrer">link to Chrome Installation thank you page</a>.</li></ul><h3 class="anchor anchorWithStickyNavbar_LWe7" id="installing-vscode">Installing VSCode<a href="#installing-vscode" class="hash-link" aria-label="Direct link to Installing VSCode" title="Direct link to Installing VSCode"></a></h3><p>After installing, the next thing is to install Vscode.</p><ul><li>Click on this <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">installing VSCode</a>. I am using Windows so I select the one for my system.
<img loading="lazy" alt="VSCode homepage for downloads" src="/web-development-for-beginners/assets/images/vscode-download-page-2b104a66cbc1d99736252346a63f4b1a.png" width="1347" height="626" class="img_ev3q"></li><li>Download will begin immediately
<img loading="lazy" alt="VSCode is being downloaded" src="/web-development-for-beginners/assets/images/vscode-downloading-e2c2ecfc9d93249bc8d93f2317ab530f.png" width="1348" height="628" class="img_ev3q"> </li><li>After downloading, click on <code>Run</code> to set it up on your browser.</li><li>Ater installing it, open it.</li></ul><p>Congratulations! you are now prepared to be a developer.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--next" href="/web-development-for-beginners/category/html"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Html</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#introduction-to-web-development" class="table-of-contents__link toc-highlight">Introduction to web development</a></li><li><a href="#web-design-and-web-development" class="table-of-contents__link toc-highlight">Web design and web development</a><ul><li><a href="#web-design" class="table-of-contents__link toc-highlight">Web design</a></li><li><a href="#web-development" class="table-of-contents__link toc-highlight">Web development</a></li></ul></li><li><a href="#getting-started" class="table-of-contents__link toc-highlight">Getting started</a></li><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a></li><li><a href="#installing-tools" class="table-of-contents__link toc-highlight">Installing tools</a><ul><li><a href="#installing--chrome" class="table-of-contents__link toc-highlight">Installing Chrome</a></li><li><a href="#installing-vscode" class="table-of-contents__link toc-highlight">Installing VSCode</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/web-development-for-beginners/">Tutorial</a></li></ul></div><div class="col footer__col"><div class="footer__title">Social links</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://twitter.com/ezinne_anne" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://linkedin.com/in/ezinneanneemilia" target="_blank" rel="noopener noreferrer" class="footer__link-item">Linkedin<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/ezinneanne/" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Web Development For Beginners. Built with Docusaurus.</div></div></div></footer></div>
<script src="/web-development-for-beginners/assets/js/runtime~main.8d6eae5a.js"></script>
<script src="/web-development-for-beginners/assets/js/main.8a446e29.js"></script>
</body>
</html>