[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"course-lesson-web-development-2026-understanding-computer-programming":3},{"course":4,"lessons":29,"lesson":63},{"id":5,"title":6,"slug":7,"description":8,"difficulty":9,"category":6,"tags":10,"featured_image_url":20,"status":21,"metadata":22,"owner_id":24,"created_at":25,"updated_at":26,"deleted_at":27,"search_vector":28},"268f5d38-156c-433b-92d3-2d5bb8f4ff68","Web Development","web-development-2026","Welcome to Web Development 2026, your first step in mastering computer programming and understanding the digital world. This course is built from the ground up for absolute beginners, turning the complex world of coding into clear, achievable steps. You will start by learning how to structure basic web pages, style them beautifully, and add interactive features like buttons, forms, and animations.","beginner",[11,12,13,14,15,16,17,18,19],"Beginner Web Development","Learn Coding 2026","HTML5","CSS3","JavaScript","JavaScript Fundamentals","Responsive Web Design","Coding Boot Camp","Step-by-Step Programming","https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fcourses\u002Fw7crsk9kju.png","published",{"seo_title":23,"seo_keywords":23,"intro_video_url":23,"seo_description":23},"","a1a1a1a1-a1a1-a1a1-a1a1-a1a1a1a1a1a1","2026-07-10T07:55:18.315403+00:00","2026-09-02T00:43:37.701126+00:00",null,"'2026':7,71 'absolut':29 'achiev':39 'add':56 'anim':63 'basic':49 'beauti':54 'beginn':30,66 'boot':81 'built':23 'button':60 'camp':82 'clear':38 'code':36,70,80 'complex':33 'comput':13 'cours':21 'css3':73 'design':79 'develop':2,6,65,68 'digit':18 'featur':58 'first':9 'form':61 'fundament':76 'ground':26 'html5':72 'interact':57 'javascript':74,75 'learn':45,69 'like':59 'master':12 'page':51 'program':14,87 'respons':77 'start':43 'step':10,40,84,86 'step-by-step':83 'structur':48 'style':52 'turn':31 'understand':16 'web':1,5,50,64,67,78 'welcom':3 'world':19,34",[30,42,53],{"id":31,"course_id":5,"title":32,"slug":33,"summary":34,"content":35,"order_index":36,"duration_minutes":37,"created_at":38,"updated_at":39,"deleted_at":27,"search_vector":40,"is_premium":41},"b4df9843-45d5-4ed6-a3a3-93b032445c16","Introduction to Programming and Web Dev","understanding-computer-programming","In this lesson, you’ll know what is programming and the technologies that powers every website, app, and digital experience.","\u003Ch2 data-id=\"6399cf95-56d0-4ba9-bf72-849ef3f8ea7f\">What is a \u003Cspan style=\"color: rgb(203, 145, 47);\">computer program\u003C\u002Fspan>?\u003C\u002Fh2>\u003Cp data-id=\"bae6290e-377e-47ff-ada2-afa827137069\">A computer program is a set of instructions written in code that tells a computer what tasks to perform.\u003C\u002Fp>\u003Ch2 data-id=\"c266d8bf-2e52-45db-91df-ea6db7edbecf\">Why \u003Cspan style=\"color: rgb(203, 145, 47);\">Web Development\u003C\u002Fspan>?\u003C\u002Fh2>\u003Cp data-id=\"7f42045f-e76d-4012-b3dd-c98464556467\">Web Development builds websites, web applications using web technologies like \u003Cspan style=\"color: rgb(255, 240, 143);\">\u003Cstrong>HTML, CSS, Javascript\u003C\u002Fstrong> \u003C\u002Fspan>and frameworks like \u003Cspan style=\"color: rgb(145, 213, 255);\">\u003Cstrong>Vue, React, Angular, Svelte.\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fp>\u003Cblockquote data-id=\"1f40dbf3-ee0f-44e2-a099-4a6798dd1c08\">\u003Cp data-id=\"2cf655b1-6d41-4618-8aa3-01fb4a16ed77\">Web Development is the easiest branch of computer programming. This is the best starting point to your journey in programming.\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch2 data-id=\"fd55182c-c3b8-4755-a8aa-456bd9ec1345\" style=\"text-align: left;\">\u003Cstrong>Web Technologies & Frameworks\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp data-id=\"2d5a8d4a-8f54-44a8-8b18-60fd6502dd99\" style=\"text-align: left;\">\u003Cstrong>Front-end \u003C\u002Fstrong>\u003C\u002Fp>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"f42cdd59-e3fe-4daf-9967-c637d584a4d6\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002Ft3u6zkjr5g.jpg\" alt=\"web technologies.jpg\">\u003Cp data-id=\"23594146-4fd8-48dd-9e98-d3b8a4b83191\" style=\"text-align: left;\">\u003Cstrong>Back-end\u003C\u002Fstrong>\u003C\u002Fp>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"523621ec-66b6-404e-aef4-5386b5ae52b5\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002Fnduoum5kda.png\" alt=\"backend technologies.png\">\u003Ch2 data-id=\"a589b67a-2e02-48e7-b94f-f351a6ad29e0\">What are \u003Cspan style=\"color: rgb(203, 145, 47);\">Web Apps\u003C\u002Fspan>?\u003C\u002Fh2>\u003Cp data-id=\"47f75aca-82ce-433f-b863-31d9eb4fb4f6\">These are application software that can only be opened using web browsers.\u003C\u002Fp>\u003Cp data-id=\"64ccf322-f08d-42aa-a5ff-a5b778195e5b\">Common web apps examples are websites, portals, e-commerce, streaming sites, social media sites or even web systems.\u003C\u002Fp>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"a0ead68d-49f0-49e5-a8af-8f104c95d035\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002F5k4onhvevhk.png\" alt=\"types_web_apps.png\">\u003Ch2 data-id=\"b4c86ab9-3344-4083-b75c-6e7fa0e07522\">Web Browser\u003C\u002Fh2>\u003Cp data-id=\"84537995-a38e-4eab-bcf8-033a557a1ed4\">A \u003Cstrong>web browser\u003C\u002Fstrong> is a software application that lets you access and view websites on the internet. This serves as the gateway to the digital world, bridging humans and the vast web ecosystem. (e.g. \u003Cspan style=\"color: rgb(211, 245, 240);\">\u003Cstrong>Chrome, Edge, Firefox, Safari, Opera, Brave\u003C\u002Fstrong>\u003C\u002Fspan>)\u003C\u002Fp>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"a2dd1602-882a-4fb2-92cb-ab4bfa5b9285\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002F5kf68mkcmoa.jpg\" alt=\"web_browsers.jpg\">\u003Chr>\u003Ch2 data-id=\"048b96cb-7120-4c03-a4c9-4cb40771f842\">📌 Key Concepts Recap\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp data-id=\"28b30806-31fe-4c80-8528-72e78ce7e687\">\u003Cspan>\u003Cstrong>Computer Program\u003C\u002Fstrong> → Instructions in code that tell a computer what to do.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"02d42dc8-c0a2-4c8b-b565-130ab20625df\">\u003Cspan>\u003Cstrong>Web Development\u003C\u002Fstrong> → Building websites and apps with HTML, CSS, JavaScript, and frameworks like Vue, React, Angular, Svelte.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"bbb7bca7-db20-4059-807f-7baaf3ef9fa0\">\u003Cspan>\u003Cstrong>Web Technologies\u003C\u002Fstrong> → Front-end (UI\u002FUX) and Back-end (server, database, logic).\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"69219cd3-fe3b-4af1-acad-3df940bab60d\">\u003Cspan>\u003Cstrong>Web Applications\u003C\u002Fstrong> → Software accessed through browsers (e.g., websites, portals, e-commerce, streaming, social media, systems).\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"be00a767-7072-4172-bdff-f57dfc059fbf\">\u003Cspan>\u003Cstrong>Web Browser \u003C\u002Fstrong>\u003C\u002Fspan>→ The gateway to the digital world, enabling access to the web (Chrome, Edge, Firefox, Safari, Opera, Brave).\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-id=\"d97d21a2-7f5a-4aaf-be61-a307db4e6cae\">\u003C\u002Fp>",0,15,"2026-08-24T10:43:31.746382+00:00","2026-08-28T05:58:31.757603+00:00","'app':23 'dev':6 'digit':25 'everi':21 'experi':26 'introduct':1 'know':12 'lesson':9 'll':11 'power':20 'program':3,15 'technolog':18 'web':5 'websit':22",false,{"id":43,"course_id":5,"title":44,"slug":45,"summary":46,"content":47,"order_index":48,"duration_minutes":49,"created_at":50,"updated_at":51,"deleted_at":27,"search_vector":52,"is_premium":41},"a7fb0bb3-7f1f-4c8d-9c21-c9ced8022c1a","Web Foundations & Environment Setup","web-foundations-your-coding-environment","In this lesson you will understand how the internet actually works and set up the exact professional tools you will use throughout this course.","\u003Ch2 data-id=\"b37ef2fd-64f6-40ae-ba72-ecd17ef94f85\">\u003Cstrong>How the Internet Works (The Simple Version)\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp data-id=\"a1c7e7ee-a0cf-4fb0-a185-1492d26012b2\">Think of the internet as a massive global delivery network. Every time you open a browser and visit a website, a fast two-step conversation happens:\u003C\u002Fp>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"1f04c584-9bce-42a0-9896-e899a1af8daa\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002Fblbgjvmlfir.jpg\" alt=\"client-server.jpg\">\u003Cul>\u003Cli>\u003Cp data-id=\"67ea29ae-0185-4b10-a105-9ce4f48a3014\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>The \u003C\u002Fstrong>\u003C\u002Fspan>\u003Cspan style=\"color: rgb(64, 169, 255); font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>Request\u003C\u002Fstrong>\u003C\u002Fspan>\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong> (The Client)\u003C\u002Fstrong>: You (the \"Client\") type a web address into your browser. Your browser sends a message across the internet asking for that specific page.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Col>\u003Cli>\u003Cp data-id=\"7934e1d2-fbe4-44ac-b0bb-1604dc0b515b\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>The \u003C\u002Fstrong>\u003C\u002Fspan>\u003Cspan style=\"color: rgb(82, 196, 26); font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>Response\u003C\u002Fstrong>\u003C\u002Fspan>\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong> (The Server)\u003C\u002Fstrong>: A powerful computer far away (the \"Server\") stores the website's files. It hears your request and beams the files back to your computer.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 data-id=\"f77b8630-d22d-4a75-ae3b-4b84109548ca\">\u003Cstrong>The Three Pillars of the Web\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp data-id=\"19f99931-6e25-4d1a-8e9f-b39ef6c83f29\">Every website you have ever visited is built using a combination of three core technologies:\u003C\u002Fp>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"ecee091f-135a-4690-bed3-edaffd949ac9\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002F3d5lfq2c7qf.webp\" alt=\"HTML CSS and Javascript.webp\">\u003Cul>\u003Cli>\u003Cp data-id=\"71e3f083-5efc-47dd-8770-c209178ff6e9\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>HTML (The Skeleton)\u003C\u002Fstrong>: Defines the raw structure and text of the page. It tells the browser, \u003Cem>\"This is a heading, this is a paragraph, and this is an image.\"\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"6b60c961-05d5-4e67-a2a6-ceb8b62a2968\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>CSS (The Clothes)\u003C\u002Fstrong>: Controls the design, colors, fonts, and layout. It tells the browser, \u003Cem>\"Make that heading large, blue, and center it on the screen.\"\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"a1dd91f6-965d-4d2f-868e-f8c77a743302\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>JavaScript (The Brain)\u003C\u002Fstrong>: Adds logic, movement, and interactivity. It tells the browser, \u003Cem>\"When the user clicks this button, pop up a congratulations message.\"\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Chr>\u003Ch2 data-id=\"d73258eb-fe11-44c9-b3ce-a380e9716f74\">\u003Cstrong>Setting Up Your Workspace\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp data-id=\"bdad6f35-6fef-4582-8eee-afa7c0d20b0e\">Professional developers don't use Microsoft Word or Notepad to write code. They use specialized software called a \u003Cstrong>Code Editor\u003C\u002Fstrong>. We will use \u003Cstrong>Visual Studio Code (VS Code)\u003C\u002Fstrong> because it is free, powerful, and the absolute industry standard.\u003C\u002Fp>\u003Ch3 data-id=\"da7a78dd-3e42-45d0-b568-2d2f7ac906da\">\u003Cstrong>Step-by-Step Installation\u003C\u002Fstrong>\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cp data-id=\"b2d476ca-25d2-4940-8a5f-68e63840ab0b\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>Download VS Code\u003C\u002Fstrong>: Go to \u003C\u002Fspan>\u003Ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https:\u002F\u002Fcode.visualstudio.com\u002F\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>\u003Cu>Visual Studio Code\u003C\u002Fu>\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\"> and download the installer for your computer (Windows, Mac or Linux).\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"bf23a49b-a016-4b70-aa3b-6f29fe524110\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002Fqc53wdwyvnd.webp\" alt=\"Vs-code-installer.webp\">\u003Col>\u003Cli>\u003Cp data-id=\"c3a1f4c5-b430-44e8-bfcd-eb02d03fa61d\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>Install\u003C\u002Fstrong>: Run the downloaded file and follow the default installation prompts.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"f71f4cff-329f-40e1-aaed-6dc3cdf5ffe8\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">\u003Cstrong>Open It\u003C\u002Fstrong>: Launch VS Code. You will see a clean, dark workspace interface ready for action.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Ch3 data-id=\"26cd7aa3-e46d-43bd-874d-0df68f194a96\">\u003Cstrong>Installing Your First Extension\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp data-id=\"50647e46-79af-4ed4-a4b6-76cff754108d\">Extensions are like apps for your code editor that give it extra superpowers. Let's install \u003Cstrong>Live Preview\u003C\u002Fstrong>, which lets you see your website update in real-time as you type.\u003C\u002Fp>\u003Col>\u003Cli>\u003Cp data-id=\"dcd0ea06-448f-4b1a-a3fb-2425c18778d9\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">Click the \u003Cstrong>Extensions icon\u003C\u002Fstrong> on the far-left sidebar of VS Code (it looks like 4 small squares).\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"64fc262a-9748-445c-ba4a-a88d417cc1a0\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">In the search bar at the top, type: \u003C\u002Fspan>\u003Ccode>Live Preview\u003C\u002Fcode>\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">.\u003C\u002Fspan>\u003Cbr>\u003C\u002Fp>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"957b86b6-95c5-4a24-9066-808578129a1e\" src=\"https:\u002F\u002Fcimkpdweycrkydeigkmi.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fmedia\u002Fuploads\u002Fv8nxt1ekk5.png\" alt=\"Screenshot from 2026-08-26 17-26-55.png\">\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"dfb4165d-4615-4b0e-a588-1a35d70433cc\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">Find the one created by \u003Cem>Microsoft\u003C\u002Fem> and click the blue \u003Cstrong>Install\u003C\u002Fstrong> button.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Chr>\u003Ch2 data-id=\"723b1e03-8423-4d94-bd7c-49541d757c94\">\u003Cstrong>Your First Action Step\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp data-id=\"2ef892b0-8c9c-4e43-858f-7a669157b971\">Before we write our first lines of HTML in the next lesson, let's make sure your environment is fully ready.\u003C\u002Fp>\u003Cp data-id=\"3b0016d9-f5f8-4c01-b0e0-87e3e7327cdf\">To proceed, the following tasks should be completed:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-id=\"d2490fa2-fcff-46b1-9c58-85cab8007f2c\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">Successfully \u003Cstrong>installed VS Code\u003C\u002Fstrong> on your computer.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"f5d18e92-f08d-4248-9a02-ef44093d94f3\">\u003Cspan style=\"font-family: "Google Sans", Arial, sans-serif;\">Manage to find and install the \u003Cstrong>Live Preview \u003C\u002Fstrong>extension?\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-id=\"dcab47b3-8f5b-4bb3-96e9-b6ff88165bc9\">Once you confirm your setup is ready, you can now proceed to the next lesson.\u003C\u002Fp>",1,10,"2026-07-10T08:01:19.784199+00:00","2026-08-28T05:59:40.606856+00:00","'actual':14 'cours':28 'environ':3 'exact':20 'foundat':2 'internet':13 'lesson':7 'profession':21 'set':17 'setup':4 'throughout':26 'tool':22 'understand':10 'use':25 'web':1 'work':15",{"id":54,"course_id":5,"title":55,"slug":56,"summary":57,"content":58,"order_index":59,"duration_minutes":60,"created_at":61,"updated_at":61,"deleted_at":27,"search_vector":62,"is_premium":41},"3bad80f2-aa7c-4c66-89dd-c17865affe68","HTLM and CSS Basics","htlm-and-css-basics","In this lesson you will learn the essentials of HTML and CSS. HTML structures webpage content, while CSS styles it with colors, fonts, spacing, etc. Learners build a simple webpage to apply these skills.","\u003Ch2 data-id=\"b76f0e5a-6199-4062-b91b-8fd05e31034f\">What is HTML?\u003C\u002Fh2>\u003Cp data-id=\"4f483e3e-8f49-4cfb-a515-ccedf2a8affc\">\u003Cspan style=\"color: rgb(255, 163, 158);\">\u003Cstrong>HTML\u003C\u002Fstrong>\u003C\u002Fspan>\u003Cstrong> \u003C\u002Fstrong>(Hyper Text Markup Language)\u003C\u002Fp>\u003Cp data-id=\"12e25ea1-f760-4c9e-87b1-ff4c173a8068\">\u003Cstrong>Definition\u003C\u002Fstrong>: HTML is a \u003Cstrong>markup language\u003C\u002Fstrong> that specifies the meaning and structure of web content. It uses elements (tags) like \u003Ccode><p>\u003C\u002Fcode>, \u003Ccode><h1>\u003C\u002Fcode>, \u003Ccode><img>\u003C\u002Fcode>, and \u003Ccode><a>\u003C\u002Fcode> to describe how content should be displayed.\u003C\u002Fp>\u003Ch2 data-id=\"7589b82a-4652-40c1-bfe6-9a7c7c153dc5\">Core Anatomy of HTML Element\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp data-id=\"6017830b-1af0-46fc-8a19-61d0f0bce5da\">\u003Cstrong>Opening Tag:\u003C\u002Fstrong>\u003Ccode><tagname>\u003C\u002Fcode> marks where the element begins.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"313729a6-1764-4725-8918-ce97025e067f\">\u003Cstrong>Content:\u003C\u002Fstrong> The actual text or media being displayed.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"c1a2be8e-1da5-4393-9793-d2a82cc45e1f\">\u003Cstrong>Closing Tag:\u003C\u002Fstrong>\u003Ccode><\u002Ftagname>\u003C\u002Fcode> marks where the element ends, using a forward slash.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cimg class=\"rounded-2xl border border-white\u002F10 shadow-lg my-8 max-w-full\" data-id=\"b802bba7-f862-4ffd-bf0e-7c1422db517f\" src=\"https:\u002F\u002Fwww.interviewbit.com\u002Fblog\u002Fwp-content\u002Fuploads\u002F2021\u002F10\u002FHTML-Tree-Structure.png\" alt=\"Difference Between HTML and CSS - InterviewBit\">\u003Ch3 data-id=\"21ea969b-d4ff-49ad-a28b-11e5a4d943b6\">\u003Cstrong>Standard Document Boilerplate\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cpre data-id=\"c49aa8d8-65d5-46ba-b40c-3aad8678c256\">\u003Ccode class=\"language-html\"><!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>My First Webpage<\u002Ftitle>\n  <\u002Fhead>\n  <body>\n    <h1>Welcome to My Website<\u002Fh1>\n    <p>This is a basic paragraph of text.<\u002Fp>\n    <button>Click here!<\u002Fbutton>\n  <\u002Fbody>\n<\u002Fhtml> \u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 data-id=\"0c072141-f74a-4c7f-b03a-f234ed0471c3\">\u003Cstrong>Essential Structural Components\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp data-id=\"612e7ad5-7068-4c56-b6c9-c3919643ed0c\">\u003Ccode><!DOCTYPE html>\u003C\u002Fcode>: Informs the browser that this is an HTML5 document.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"a4e78d70-7bea-4ba8-85df-470b5de3dae7\">\u003Ccode><html>\u003C\u002Fcode>: The root element that encloses all content on the page.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"b139d595-f662-4998-a195-8eb7d11e5589\">\u003Ccode><head>\u003C\u002Fcode>: Houses backend metadata, character sets, and the tab title.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"7759c8e7-3a44-42b7-9937-8d5e5196f21f\">\u003Ccode><title>:\u003C\u002Fcode> Sets the text displayed on the web browser's tab.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"b987babc-3e3b-4cf4-b203-5c202ff907f9\">\u003Ccode><body>\u003C\u002Fcode>: Contains the visible content of the page shown to users.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-id=\"c6715e0a-1f1b-494d-8164-6717706817dd\">\u003C\u002Fp>\u003Ch3 data-id=\"11c98ec4-3175-4b4a-b794-883f496db6b6\">🎯 Learning Objectives\u003C\u002Fh3>\u003Cp data-id=\"3ed5e023-dc69-4b6f-a6a5-65802d81fdb1\">\u003Cspan>By the end of this lesson, learners should be able to:\u003C\u002Fspan>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-id=\"13008d99-5e32-4c6d-a5ea-f57a5025d607\">\u003Cspan>Understand the role of \u003Cstrong>HTML\u003C\u002Fstrong> in structuring web content.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"e50bd59f-7782-43d0-bc38-c8f6d3f90320\">\u003Cspan>Apply \u003Cstrong>CSS\u003C\u002Fstrong> to style and visually enhance web pages.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"43b39212-89f9-4754-8a75-d41ffeecfc39\">\u003Cspan>Differentiate between \u003Cstrong>inline, internal, and external CSS\u003C\u002Fstrong>.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"15bd9121-88a7-4014-b988-6a987a922548\">\u003Cspan>Build a simple, styled webpage from scratch.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 data-id=\"2d4d7d7b-f069-456c-9283-b4c4a5d728d2\">🧩 Key Topics\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cp data-id=\"1d383bb5-6780-415f-9802-9731d2496667\">\u003Cspan>\u003Cstrong>HTML Structure\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-id=\"ed6a44d5-542f-4c20-843c-579c4b832afe\">\u003Cspan>Elements, tags, attributes\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"dfac2583-cff1-435f-a211-ee303f3e68a3\">\u003Cspan>Semantic HTML (e.g., \u003C\u002Fspan>\u003Ccode><header>\u003C\u002Fcode>\u003Cspan>, \u003C\u002Fspan>\u003Ccode><main>\u003C\u002Fcode>\u003Cspan>, \u003C\u002Fspan>\u003Ccode><footer>\u003C\u002Fcode>\u003Cspan>)\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"5cf6c72f-168f-4d42-ae75-5fd1875af423\">\u003Cspan>\u003Cstrong>CSS Fundamentals\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-id=\"072628f3-eb54-4de8-bb8c-cb6ec60e7872\">\u003Cspan>Selectors, properties, values\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"7aa1b2da-8f33-4632-b1c1-b8a009b17a66\">\u003Cspan>Colors, fonts, spacing, and layout basics\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"e16a23af-f449-4d5f-8bfd-ab486fed543c\">\u003Cspan>\u003Cstrong>Box Model\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-id=\"d6233a7f-3256-444d-8020-a8c2019ae017\">\u003Cspan>Content, padding, border, margin\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"3705b784-1b6c-416e-a0db-d6c63bcbd686\">\u003Cspan>How it affects layout and spacing\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"66822364-4b0e-4b09-92ef-354d465ab59f\">\u003Cspan>\u003Cstrong>Styling Methods\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-id=\"be5194bd-9e4e-406f-bb17-5325519f1585\">\u003Cspan>Inline styles\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"b66e4eca-d78e-4378-a354-f1a58c09db07\">\u003Cspan>Internal \u003C\u002Fspan>\u003Ccode><style>\u003C\u002Fcode>\u003Cspan> blocks\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"6964e6d2-2ab6-49d5-a97d-387416aa4a11\">\u003Cspan>External \u003C\u002Fspan>\u003Ccode>.css\u003C\u002Fcode>\u003Cspan> files\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003Cli>\u003Cp data-id=\"4c52642c-87b4-4bbc-b206-7a34c01e56a0\">\u003Cspan>\u003Cstrong>Practical Exercise\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-id=\"e92b0859-7952-487f-aef9-92776cb7da9a\">\u003Cspan>Create a simple webpage with a heading, paragraph, image, and styled button.\u003C\u002Fspan>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-id=\"2bab2676-337a-45ce-9236-d20de28d83d9\">\u003C\u002Fp>\u003Cp data-id=\"acbce3df-c35b-4595-b1f5-4ce90eaf3e49\">\u003Cspan>This lesson sets the stage for building \u003Cstrong>interactive and visually appealing websites\u003C\u002Fstrong>. Next, we can move into \u003Cstrong>JavaScript Essentials\u003C\u002Fstrong> to add interactivity after learners grasp the basics of structure and style.\u003C\u002Fspan>\u003C\u002Fp>",2,20,"2026-08-28T09:00:18.994593+00:00","'appli':36 'basic':4 'build':31 'color':26 'content':20 'css':3,16,22 'essenti':12 'etc':29 'font':27 'htlm':1 'html':14,17 'learn':10 'learner':30 'lesson':7 'simpl':33 'skill':38 'space':28 'structur':18 'style':23 'webpag':19,34",{"id":31,"course_id":5,"title":32,"slug":33,"summary":34,"content":35,"order_index":36,"duration_minutes":37,"created_at":38,"updated_at":39,"deleted_at":27,"search_vector":40,"is_premium":41}]