25:I[41412,["5592","static/chunks/c15bf2b0-ab2a64d4cf3e8d30.js","5947","static/chunks/16dc9863-8660366377758a5d.js","3549","static/chunks/3549-fc1f7361979143d7.js","6325","static/chunks/6325-0f968bdc9e4254ca.js","2402","static/chunks/2402-f14a9391c83f2521.js","9094","static/chunks/9094-009766d5efaca6b0.js","1786","static/chunks/1786-4821bda57d13ae9b.js","2693","static/chunks/2693-a10a57bc01667808.js","8053","static/chunks/8053-7c277a013d434d1b.js","7125","static/chunks/7125-498f3e8898f8993e.js","7273","static/chunks/7273-64a91dbd32009fd3.js","3334","static/chunks/3334-eb585f7f2b16cd0d.js","4353","static/chunks/4353-a8d5d36b7797a5ad.js","2984","static/chunks/2984-ef73e27d3c85ff61.js","4766","static/chunks/4766-649747d44437eee5.js","1337","static/chunks/app/courses/%5Bslug%5D/page-2bf115cf2acdf6fa.js"],"CourseSchema"] 26:I[4329,["5592","static/chunks/c15bf2b0-ab2a64d4cf3e8d30.js","5947","static/chunks/16dc9863-8660366377758a5d.js","3549","static/chunks/3549-fc1f7361979143d7.js","6325","static/chunks/6325-0f968bdc9e4254ca.js","2402","static/chunks/2402-f14a9391c83f2521.js","9094","static/chunks/9094-009766d5efaca6b0.js","1786","static/chunks/1786-4821bda57d13ae9b.js","2693","static/chunks/2693-a10a57bc01667808.js","8053","static/chunks/8053-7c277a013d434d1b.js","7125","static/chunks/7125-498f3e8898f8993e.js","7273","static/chunks/7273-64a91dbd32009fd3.js","3334","static/chunks/3334-eb585f7f2b16cd0d.js","4353","static/chunks/4353-a8d5d36b7797a5ad.js","2984","static/chunks/2984-ef73e27d3c85ff61.js","4766","static/chunks/4766-649747d44437eee5.js","1337","static/chunks/app/courses/%5Bslug%5D/page-2bf115cf2acdf6fa.js"],"default"] 27:Tf50,Whenever you open your phone or computer, type in a website address, and watch a page load, a complex chain of events happens behind the scenes in milliseconds. To write code for the web, you need to understand the environment where your code will live. The internet relies on a fundamental architecture called the Client-Server Model. The client is any device or application that accesses a website. Most of the time, the client is a web browser like Google Chrome, Apple Safari, Mozilla Firefox, or Microsoft Edge.
The browser's primary job is to act as a translator. Computer files containing code are not very useful to read on their own. The browser reads files written in HTML, CSS, and JavaScript, interprets them, and draws them visually on your screen as a readable website. A server is a high-powered computer designed to stay turned on and connected to the internet 24/7. Servers do not look like regular desktop computers; they are often stacked in giant data centers. Their main purpose is to "serve" files. When you build a website, you will eventually upload your HTML, CSS, images, and JavaScript files to a server so anyone in the world can access them. Computers do not communicate using human words like lighthousedesignacademy.com. Instead, they use numbers called IP Addresses (like 192.0.2.1).
Because humans are bad at memorizing long numbers, we use the Domain Name System (DNS). Think of the DNS as the phonebook of the internet. When you type in a web address: Your browser contacts a DNS server. The DNS server looks up the domain name and finds its matching IP address. Your browser uses that IP address to connect to the correct server. Once your browser knows the server's IP address, it initiates a connection: The HTTP Request: Your browser sends a formal request asking for a specific file (e.g., "Please send me the home page file index.html"). The HTTP Response: The server receives the request, processes it, locates the file, and sends a response back to the client. This response includes a status code (like 200 OK if everything went well, or 404 Not Found if the file doesn't exist) along with the requested files. As soon as your browser receives those files, it begins reading them line-by-line to display the website.28:T42e,Computers do not communicate using human words like lighthousedesignacademy.com. Instead, they use numbers called IP Addresses (like 192.0.2.1).
Because humans are bad at memorizing long numbers, we use the Domain Name System (DNS). Think of the DNS as the phonebook of the internet. When you type in a web address:29:T1d4a,If you want to build a website, HTML (HyperText Markup Language) is always your starting point. It is not a programming language (meaning it cannot handle complex logic or math); rather, it is a markup language. It marks up plain text to tell the browser how to structure and display it. Most of the things you see on a webpage—a heading, a paragraph, a button—are represented by HTML elements. An element is typically made up of three parts:

The Opening Tag (<tagname>): This signals to the browser where an element begins.

The Content: The actual text, image, or video that will appear on the screen.

The Closing Tag (</tagname>): This signals to the browser where the element ends. It looks identical to the opening tag except for a forward slash / before the tag name.

Every single HTML page on the internet shares the exact same basic foundation. Below is the absolute minimum template required to create a valid webpage. Let us break down exactly what each line in this template does:

<!DOCTYPE html>: This is a declaration that tells the web browser which version of HTML is being used. Modern web browsers expect HTML5, which is represented by this exact line. It must always be at the very top of your file.

<html lang="en">: This tag encloses the entire content of the page. The lang="en" attribute tells search engines and screen readers that the primary language of the document is English.

<head>: This is the "brain" of the webpage. The items inside the head tag do not show up on the actual webpage. Instead, they contain metadata (data about data), external file links (like CSS stylesheets), and search engine optimization (SEO) configurations.

<meta charset="UTF-8">: This specifies the character encoding for the document. UTF-8 is the industry standard that allows your webpage to safely display almost any character or symbol from any language in the world.

<title>: This defines the title of the document. This text appears on the browser tab and is used by search engines.

<body>: This is where the magic happens. Every single element you want the user to see—text, images, links, forms, maps—must go inside the opening and closing body tags.

<h1>: Defines a level-one heading. Headings go from <h1> (most important/largest) to <h6> (least important/smallest).

<p>: Defines a standard text paragraph.

2a:T2163,Now that you know how an HTML file is set up, we need to look closer at how elements behave and how we can customize them using attributes. HTML elements generally fall into one of two layout categories: Block-Level Elements: These elements always start on a new line and take up the full horizontal width available to them (stretching from left to right). Examples: <h1> through <h6>, <p>, <ul> (lists), and <div> (generic containers). If you put two paragraphs in your code, they will stack vertically on top of each other. Inline Elements: These elements do not start on a new line. They only take up as much space as their content requires and sit side-by-side with other inline elements. Examples: <a> (links), <img> (images), <strong> (bold text), and <em> (italicized text). Attributes provide extra configuration options to elements. They are placed inside the opening tag of an element and are structured as name-value pairs, like this: name="value". Let us look at three crucial examples: The <a> (anchor) tag allows you to create hyperlinks to other pages on your site or external websites.

href: Short for "hypertext reference". It specifies the destination web address.

target="_blank": This attribute tells the browser to open the link in a new tab instead of navigating away from the current page.

The <img> tag is unique because it is an empty or self-closing element. It does not contain any text content, so it does not have a closing tag.

src: Short for "source". This is the URL or local file path to the image file.

alt: Short for "alternative text". This is incredibly important. It describes the image for visually impaired users who use screen readers, and it displays as plain text if the image fails to load.

width and height: These optional attributes specify the dimensions of the image in pixels.

You can nest inline tags inside block tags to apply meaning or emphasis to specific words: <strong>: Makes the text appear bold, signaling strong importance. <em>: Makes the text italic, signaling emphasis.2b:T610,Examples: <h1> through <h6>, <p>, <ul> (lists), and <div> (generic containers). If you put two paragraphs in your code, they will stack vertically on top of each other.2c:T4b5,Examples: <a> (links), <img> (images), <strong> (bold text), and <em> (italicized text).17:[null,["$","$L25",null,{"name":"Introduction to web Development","description":"Welcome to Introduction to Web Development. This beginner-friendly course introduces you to the core building blocks of the web: HTML, CSS, and JavaScript.\r\nStarting from the basics, you will learn how web browsers and servers communicate, how to structure web pages using HTML elements, how to design visually engaging layouts with CSS, and how to introduce interactivity using JavaScript. By the end of this course, you will understand how modern websites function and possess the foundational skills required to start building your own web projects.","provider":{"name":"Lighthouse Academy","url":"https://www.lighthousedesignacademy.com"},"url":"https://www.lighthousedesignacademy.com/courses/introduction-to-web-development","image":"https://www.lighthousedesignacademy.com/images/og-image.png","price":"0","priceCurrency":"NGN","educationalLevel":"BEGINNER"}],["$","$L26",null,{"course":{"id":"cmrlpa0n20001h5219xj2t8zx","title":"Introduction to web Development","slug":"introduction-to-web-development","description":"Welcome to Introduction to Web Development. This beginner-friendly course introduces you to the core building blocks of the web: HTML, CSS, and JavaScript.\r\nStarting from the basics, you will learn how web browsers and servers communicate, how to structure web pages using HTML elements, how to design visually engaging layouts with CSS, and how to introduce interactivity using JavaScript. By the end of this course, you will understand how modern websites function and possess the foundational skills required to start building your own web projects.","categoryId":"cmr4s0xdc0000l2ts5iyg63iv","difficulty":"BEGINNER","status":"PUBLISHED","price":"0","priceUsd":"0","thumbnailUrl":null,"facilitatorId":"cmr6q7krb00009q21qyo0k26b","learningOutcomes":["Understand how HTML, CSS, and JavaScript work together","Build responsive web pages from scratch","Use developer tools to debug and inspect web pages","Deploy a working website to the internet"],"requirements":["A computer with internet access","No prior coding experience needed","Willingness to practice consistently"],"targetAudience":"$undefined","techStack":"$undefined","videoPreviewUrl":"https://youtu.be/ysEN5RaKOlA?si=kPWWDJRBIm33RJ4N","primaryLanguage":"English","subtitleLanguages":"$undefined","completionCriteria":["complete_all_lessons","watch_videos","pass_quizzes"],"quizPassThreshold":80,"durationTotal":null,"totalLessons":0,"atRiskProgressThreshold":null,"atRiskInactiveDays":null,"createdAt":"2026-07-15T06:29:40.671Z","updatedAt":"2026-07-31T14:22:13.359Z","deletedAt":null,"category":{"id":"cmr4s0xdc0000l2ts5iyg63iv","name":"Web Development","slug":"web-development","description":"Build modern websites and web applications with HTML, CSS, JavaScript, React, Next.js, and more","createdAt":"2026-07-03T10:14:30.384Z","updatedAt":"2026-07-03T10:14:30.384Z"},"facilitator":{"id":"cmr6q7krb00009q21qyo0k26b","name":"Segun Lanre","avatarUrl":null,"bio":"This is my story, this is my song","role":"INSTRUCTOR"},"_count":{"enrollments":1,"reviews":0},"modules":[{"id":"cmrlsg5580003f422umc8opbd","courseId":"cmrlpa0n20001h5219xj2t8zx","title":"How the Web Works & HTML Basics","order":1,"learningObjectives":["Understand how the internet connects browsers, servers, and protocols","Write a basic HTML document with proper structure and tags","Explain the purpose of HTML elements and attributes in web pages"],"thumbnailUrl":null,"createdAt":"2026-07-15T07:58:25.293Z","updatedAt":"2026-07-15T07:58:25.293Z","deletedAt":null,"lessons":[{"id":"cmrlsgnqk0005f422m7peyzsp","moduleId":"cmrlsg5580003f422umc8opbd","courseId":"cmrlpa0n20001h5219xj2t8zx","title":"How the Web Works","description":"Learn how browsers, servers, DNS, and HTTP work together to deliver web pages to users.","content":"$27","videoUrl":null,"order":1,"duration":null,"assignmentTitle":null,"assignmentDescription":null,"assignmentType":"none","quizTimeLimit":null,"isReview":false,"blocks":[{"id":"block_1784104089286_120","data":{"html":"Whenever you open your phone or computer, type in a website address, and watch a page load, a complex chain of events happens behind the scenes in milliseconds. To write code for the web, you need to understand the environment where your code will live."},"type":"text"},{"id":"block_1784104089286_121","data":{"html":"The internet relies on a fundamental architecture called the Client-Server Model."},"type":"text"},{"id":"block_1784104089286_122","data":{"html":""},"type":"text"},{"id":"block_1784104089286_123","data":{"code":"[ Your Browser (Client) ] ---(1. Request: \"Give me index.html\")---> [ Remote Computer (Server) ]\n[ Your Browser (Client) ] <---(2. Response: Sends HTML/CSS/JS)---- [ Remote Computer (Server) ]","language":"text"},"type":"code"},{"id":"block_1784104089286_124","data":{"html":""},"type":"text"},{"id":"block_1784104089286_125","data":{"text":"1. The Client (The Requester)","level":4},"type":"heading"},{"id":"block_1784104089286_126","data":{"html":"The client is any device or application that accesses a website. Most of the time, the client is a web browser like Google Chrome, Apple Safari, Mozilla Firefox, or Microsoft Edge.
The browser's primary job is to act as a translator. Computer files containing code are not very useful to read on their own. The browser reads files written in HTML, CSS, and JavaScript, interprets them, and draws them visually on your screen as a readable website."},"type":"text"},{"id":"block_1784104089286_127","data":{"text":"2. The Server (The Provider)","level":4},"type":"heading"},{"id":"block_1784104089286_128","data":{"html":"A server is a high-powered computer designed to stay turned on and connected to the internet 24/7. Servers do not look like regular desktop computers; they are often stacked in giant data centers. Their main purpose is to \"serve\" files. When you build a website, you will eventually upload your HTML, CSS, images, and JavaScript files to a server so anyone in the world can access them."},"type":"text"},{"id":"block_1784104089286_129","data":{"text":"3. The DNS (Domain Name System)","level":4},"type":"heading"},{"id":"block_1784104089287_130","data":{"html":"$28"},"type":"text"},{"id":"block_1784104089287_131","data":{"html":"Your browser contacts a DNS server."},"type":"text"},{"id":"block_1784104089287_132","data":{"html":"The DNS server looks up the domain name and finds its matching IP address."},"type":"text"},{"id":"block_1784104089287_133","data":{"html":"Your browser uses that IP address to connect to the correct server."},"type":"text"},{"id":"block_1784104089287_134","data":{"text":"4. The Request-Response Cycle","level":4},"type":"heading"},{"id":"block_1784104089287_135","data":{"html":"Once your browser knows the server's IP address, it initiates a connection:"},"type":"text"},{"id":"block_1784104089287_136","data":{"html":"The HTTP Request: Your browser sends a formal request asking for a specific file (e.g., \"Please send me the home page file index.html\")."},"type":"text"},{"id":"block_1784104089287_137","data":{"html":"The HTTP Response: The server receives the request, processes it, locates the file, and sends a response back to the client. This response includes a status code (like 200 OK if everything went well, or 404 Not Found if the file doesn't exist) along with the requested files."},"type":"text"},{"id":"block_1784104089287_138","data":{"html":"As soon as your browser receives those files, it begins reading them line-by-line to display the website."},"type":"text"},{"id":"block_1784104089288_139","data":{"html":""},"type":"text"}],"createdAt":"2026-07-15T07:58:49.388Z","updatedAt":"2026-07-15T08:28:19.273Z","deletedAt":null},{"id":"cmrlsgw880007f422t3t0pe40","moduleId":"cmrlsg5580003f422umc8opbd","courseId":"cmrlpa0n20001h5219xj2t8zx","title":"Introduction to HTML","description":"Get started with HTML by learning its role as the backbone of every web page.","content":"$29","videoUrl":null,"order":2,"duration":null,"assignmentTitle":null,"assignmentDescription":null,"assignmentType":"none","quizTimeLimit":null,"isReview":false,"blocks":[{"id":"block_1784104773530_661","data":{"html":"If you want to build a website, HTML (HyperText Markup Language) is always your starting point. It is not a programming language (meaning it cannot handle complex logic or math); rather, it is a markup language. It marks up plain text to tell the browser how to structure and display it."},"type":"text"},{"id":"block_1784104773530_662","data":{"html":""},"type":"text"},{"id":"block_1784104773530_663","data":{"text":"Anatomy of an HTML Element","level":4},"type":"heading"},{"id":"block_1784104773530_664","data":{"html":"Most of the things you see on a webpage—a heading, a paragraph, a button—are represented by HTML elements. An element is typically made up of three parts:"},"type":"text"},{"id":"block_1784104773530_665","data":{"code":" This is the content inside the tags. ","language":"text"},"type":"code"},{"id":"block_1784104773530_666","data":{"html":""},"type":"text"},{"id":"block_1784104773531_667","data":{"html":"

The Opening Tag (<tagname>): This signals to the browser where an element begins.

"},"type":"text"},{"id":"block_1784104773531_668","data":{"html":"

The Content: The actual text, image, or video that will appear on the screen.

"},"type":"text"},{"id":"block_1784104773532_669","data":{"html":"

The Closing Tag (</tagname>): This signals to the browser where the element ends. It looks identical to the opening tag except for a forward slash / before the tag name.

"},"type":"text"},{"id":"block_1784104773532_670","data":{"html":""},"type":"text"},{"id":"block_1784104773532_671","data":{"text":"Understanding the Document Skeleton","level":4},"type":"heading"},{"id":"block_1784104773533_672","data":{"html":"Every single HTML page on the internet shares the exact same basic foundation. Below is the absolute minimum template required to create a valid webpage."},"type":"text"},{"id":"block_1784104773533_673","data":{"html":""},"type":"text"},{"id":"block_1784104773533_674","data":{"code":"\n\n \n \n My First Webpage\n \n \n

Welcome to Web Development

HTML is the foundation of all websites. Learning it is your first step.

\n \n","language":"text"},"type":"code"},{"id":"block_1784104773533_675","data":{"html":""},"type":"text"},{"id":"block_1784104773533_676","data":{"html":"Let us break down exactly what each line in this template does:"},"type":"text"},{"id":"block_1784104773533_677","data":{"html":"

<!DOCTYPE html>: This is a declaration that tells the web browser which version of HTML is being used. Modern web browsers expect HTML5, which is represented by this exact line. It must always be at the very top of your file.

"},"type":"text"},{"id":"block_1784104773534_678","data":{"html":"

<html lang=\"en\">: This tag encloses the entire content of the page. The lang=\"en\" attribute tells search engines and screen readers that the primary language of the document is English.

"},"type":"text"},{"id":"block_1784104773534_679","data":{"html":"

<head>: This is the \"brain\" of the webpage. The items inside the head tag do not show up on the actual webpage. Instead, they contain metadata (data about data), external file links (like CSS stylesheets), and search engine optimization (SEO) configurations.

"},"type":"text"},{"id":"block_1784104773534_680","data":{"html":"

<meta charset=\"UTF-8\">: This specifies the character encoding for the document. UTF-8 is the industry standard that allows your webpage to safely display almost any character or symbol from any language in the world.

"},"type":"text"},{"id":"block_1784104773534_681","data":{"html":"

<title>: This defines the title of the document. This text appears on the browser tab and is used by search engines.

"},"type":"text"},{"id":"block_1784104773534_682","data":{"html":"

<body>: This is where the magic happens. Every single element you want the user to see—text, images, links, forms, maps—must go inside the opening and closing body tags.

"},"type":"text"},{"id":"block_1784104773534_683","data":{"html":"

<h1>: Defines a level-one heading. Headings go from <h1> (most important/largest) to <h6> (least important/smallest).

"},"type":"text"},{"id":"block_1784104773534_684","data":{"html":"

<p>: Defines a standard text paragraph.

"},"type":"text"}],"createdAt":"2026-07-15T07:59:00.392Z","updatedAt":"2026-07-15T08:39:41.648Z","deletedAt":null},{"id":"cmrlsh6740009f422d6dmhpae","moduleId":"cmrlsg5580003f422umc8opbd","courseId":"cmrlpa0n20001h5219xj2t8zx","title":"HTML Elements & Attributes","description":"Explore common HTML elements and how attributes add extra meaning and behavior to your markup.","content":"$2a","videoUrl":null,"order":3,"duration":null,"assignmentTitle":null,"assignmentDescription":null,"assignmentType":"none","quizTimeLimit":null,"isReview":false,"blocks":[{"id":"block_1784106416875_991","data":{"html":"Now that you know how an HTML file is set up, we need to look closer at how elements behave and how we can customize them using attributes."},"type":"text"},{"id":"block_1784106416875_992","data":{"html":""},"type":"text"},{"id":"block_1784106416875_993","data":{"text":"Block-Level vs. Inline Elements","level":4},"type":"heading"},{"id":"block_1784106416875_994","data":{"html":"HTML elements generally fall into one of two layout categories:"},"type":"text"},{"id":"block_1784106416875_995","data":{"html":"Block-Level Elements: These elements always start on a new line and take up the full horizontal width available to them (stretching from left to right)."},"type":"text"},{"id":"block_1784106416875_996","data":{"html":"$2b"},"type":"text"},{"id":"block_1784106416876_997","data":{"html":"Inline Elements: These elements do not start on a new line. They only take up as much space as their content requires and sit side-by-side with other inline elements."},"type":"text"},{"id":"block_1784106416876_998","data":{"html":"$2c"},"type":"text"},{"id":"block_1784106416876_999","data":{"text":"Modifying Elements with Attributes","level":4},"type":"heading"},{"id":"block_1784106416876_1000","data":{"html":"Attributes provide extra configuration options to elements. They are placed inside the opening tag of an element and are structured as name-value pairs, like this: name=\"value\"."},"type":"text"},{"id":"block_1784106416876_1001","data":{"html":"Let us look at three crucial examples:"},"type":"text"},{"id":"block_1784106416877_1002","data":{"html":"The <a> (anchor) tag allows you to create hyperlinks to other pages on your site or external websites."},"type":"text"},{"id":"block_1784106416877_1003","data":{"html":""},"type":"text"},{"id":"block_1784106416877_1004","data":{"code":"

To learn more, visit our resources page.

","language":"text"},"type":"code"},{"id":"block_1784106416877_1005","data":{"html":""},"type":"text"},{"id":"block_1784106416877_1006","data":{"html":"

href: Short for \"hypertext reference\". It specifies the destination web address.

"},"type":"text"},{"id":"block_1784106416879_1007","data":{"html":"

target=\"_blank\": This attribute tells the browser to open the link in a new tab instead of navigating away from the current page.

"},"type":"text"},{"id":"block_1784106416879_1008","data":{"html":"The <img> tag is unique because it is an empty or self-closing element. It does not contain any text content, so it does not have a closing tag."},"type":"text"},{"id":"block_1784106416880_1009","data":{"code":" $\"Company$ ","language":"text"},"type":"code"},{"id":"block_1784106416880_1010","data":{"html":""},"type":"text"},{"id":"block_1784106416881_1011","data":{"html":"

src: Short for \"source\". This is the URL or local file path to the image file.

"},"type":"text"},{"id":"block_1784106416884_1012","data":{"html":"

alt: Short for \"alternative text\". This is incredibly important. It describes the image for visually impaired users who use screen readers, and it displays as plain text if the image fails to load.

"},"type":"text"},{"id":"block_1784106416885_1013","data":{"html":"

width and height: These optional attributes specify the dimensions of the image in pixels.

"},"type":"text"},{"id":"block_1784106416885_1014","data":{"html":"You can nest inline tags inside block tags to apply meaning or emphasis to specific words:"},"type":"text"},{"id":"block_1784106416885_1015","data":{"html":""},"type":"text"},{"id":"block_1784106416885_1016","data":{"code":"

Learning to code is hard work, but it is also very rewarding.

","language":"text"},"type":"code"},{"id":"block_1784106416885_1017","data":{"html":""},"type":"text"},{"id":"block_1784106416885_1018","data":{"html":"<strong>: Makes the text appear bold, signaling strong importance."},"type":"text"},{"id":"block_1784106416885_1019","data":{"html":"<em>: Makes the text italic, signaling emphasis."},"type":"text"}],"createdAt":"2026-07-15T07:59:13.313Z","updatedAt":"2026-07-15T10:50:49.562Z","deletedAt":null}]}]},"completedLessonIds":[],"isEnrolled":false,"isAuthenticated":false,"otherCourses":[{"id":"cmthf28410001bm1j70as3mrv","title":"Introduction to Backend Development","slug":"introduction-to-backend-development-building-secure--scalable-apis","thumbnailUrl":null,"description":"Learn the core fundamentals of server-side programming, database management, and API design. This course takes you from writing your first server to deploying a fully functional RESTful API connected to a live database. By the end, you'll understand how web applications process data, handle authentication, and communicate with front-end applications."}]}]]