[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-0-en-105":3,"doc-seo-657713-105":59,"doc-detail-657713-en":130},{"code":4,"msg":5,"data":6},0,"success",[7,13,18,23,28,33,38,43,48,51,55],{"id":8,"doc_module":4,"doc_module_name":9,"category_name":10,"show_sort_weight":11,"slug":12},1,"Document","Story & Novel",90,"story-novel",{"id":14,"doc_module":4,"doc_module_name":9,"category_name":15,"show_sort_weight":16,"slug":17},2,"Literature",80,"literature",{"id":19,"doc_module":4,"doc_module_name":9,"category_name":20,"show_sort_weight":21,"slug":22},4,"Exam",70,"exam",{"id":24,"doc_module":4,"doc_module_name":9,"category_name":25,"show_sort_weight":26,"slug":27},5,"Comic",60,"comic",{"id":29,"doc_module":4,"doc_module_name":9,"category_name":30,"show_sort_weight":31,"slug":32},6,"Technology",50,"technology",{"id":34,"doc_module":4,"doc_module_name":9,"category_name":35,"show_sort_weight":36,"slug":37},7,"Healthcare",40,"healthcare",{"id":39,"doc_module":4,"doc_module_name":9,"category_name":40,"show_sort_weight":41,"slug":42},8,"Research & Report",30,"research-report",{"id":44,"doc_module":4,"doc_module_name":9,"category_name":45,"show_sort_weight":46,"slug":47},9,"Religion & Spirituality",20,"religion-spirituality",{"id":46,"doc_module":4,"doc_module_name":9,"category_name":49,"show_sort_weight":46,"slug":50},"World Cup","world-cup",{"id":52,"doc_module":4,"doc_module_name":9,"category_name":53,"show_sort_weight":52,"slug":54},10,"Lifestyle","lifestyle",{"id":56,"doc_module":4,"doc_module_name":9,"category_name":57,"show_sort_weight":24,"slug":58},19,"General","general",{"code":4,"msg":60,"data":61},"ok",{"site_id":62,"language":63,"slug":64,"title":65,"keywords":66,"description":67,"schema_data":68,"social_meta":123,"head_meta":125,"extra_data":127,"updated_unix":129},105,"en","computational-thinking-and-web-development-section-5-introduction","COMPUTATIONAL THINKING AND WEB DEVELOPMENT - Section 5 - Introduction","","Computational Thinking and Web Development Section 5 introduces foundational concepts for building websites through programming logic and problem-solving activities. Learners explore web outline plans using tools such as sitemaps, wireframes, and prototypes, and study key components of web pages including headings, menus, links, images, and user experience. The section contrasts web design and web development, then guides practice with activities comparing interactive versus non-interactive landing pages and explaining differences.",{"@graph":69,"@context":122},[70,84,105],{"@type":71,"itemListElement":72},"BreadcrumbList",[73,77,79,82],{"item":74,"name":75,"@type":76,"position":8},"https://docshare.wps.com","Home","ListItem",{"item":78,"name":9,"@type":76,"position":14},"https://docshare.wps.com/document/",{"item":80,"name":30,"@type":76,"position":81},"https://docshare.wps.com/document/technology/",3,{"item":83,"name":65,"@type":76,"position":19},"https://docshare.wps.com/document/computational-thinking-and-web-development-section-5-introduction/657713/",{"url":83,"name":65,"@type":85,"image":86,"author":91,"headline":65,"publisher":94,"fileFormat":97,"inLanguage":63,"description":67,"dateModified":98,"datePublished":99,"encodingFormat":97,"isAccessibleForFree":100,"interactionStatistic":101},"DigitalDocument",{"url":87,"@type":88,"width":89,"height":90},"https://docshare.wps.com/thumbnails/computational-thinking-and-web-development-section-5-introduction/657713.png","ImageObject",300,407,{"name":92,"@type":93},"Fahsai","Person",{"url":74,"name":95,"@type":96},"DocShare","Organization","application/pdf","2026-10-30","2026-10-26",true,{"@type":102,"interactionType":103,"userInteractionCount":81},"InteractionCounter",{"@type":104},"ViewAction",{"@type":106,"mainEntity":107},"FAQPage",[108,114,118],{"name":109,"@type":110,"acceptedAnswer":111},"What is the learning focus of Section 5?","Question",{"text":112,"@type":113},"Section 5 focuses on computational thinking for web development, including how websites are planned and built using tools and basic coding ideas.","Answer",{"name":115,"@type":110,"acceptedAnswer":116},"What are wireframes, prototypes, and website blueprints?",{"text":117,"@type":113},"Wireframes are simple sketches showing website structure, prototypes demonstrate how the structure works, and website blueprints outline structure, content, and navigation.",{"name":119,"@type":110,"acceptedAnswer":120},"How does web design differ from web development?",{"text":121,"@type":113},"Web design focuses on visual appearance such as colours and layout, while web development focuses on making the website work through functionality using coding languages like HTML and JavaScript.","https://schema.org",{"og:url":83,"og:type":124,"og:title":65,"og:site_name":95,"og:description":67},"article",{"robots":126,"canonical":83},"index,follow",{"doc_id":128,"site_id":62},657713,1793030545,{"code":4,"msg":5,"data":131},{"doc_id":128,"user_id":132,"nickname":92,"user_avatar":133,"doc_module":4,"category_id":29,"category_name":30,"doc_title":65,"doc_description":67,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":81,"is_deleted":4,"is_public":8,"is_downloadable":8,"audit_status":8,"page_count":139,"language":140,"language_code":63,"site_id":62,"html_lang":63,"table_of_contents":141,"faqs":142,"seo_title":143,"seo_description":67,"update_tm":144,"read_time":145},549768702563,"https://ap-avatar.wpscdn.com/avatar/8000c4aa63b76e948b?x-image-process=image/resize,m_fixed,w_180,h_180&k=1786536092046926083","COMPUTATIONAL THINKING AND WEB DEVELOPMENT  \nSECTION  \n5  \nComputer Science Year 1  \nSECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT  \nComputational Thinking (Programming Logic)  \nWeb Technologies and Databases  \nINTRODUCTION  \nTake a moment to explore the beauty of this website here or [https://t-tel.org/](https://t-tel.org/. Are you)[. Are you](https://t-tel.org/. Are you)[ ](https://t-tel.org/. Are you)[curious about how it was expertly created? In this section](curious about how it was expertly created? In this section), [you will](you will) learn the basics of building a website. Through hands-on activities and problem-solving tasks, you will develop your coding skills and understand how websites are made using tools such as HTML, CSS, and JavaScript.  \nWe will focus on web outline plans, which include essential elements like sitemaps, wireframes, and prototypes. These tools will help you see the different parts of a webpage and may even inspire you to try web development yourself!  \nThere are many excellent websites, such as w3schools.com and [codecademy.com](codecademy.com), where you can learn more and practise your skills.  \nWe are excited for you to gain these valuable skills – let us get started then!  \n\n| At the end of this section, you will be able to: |\n| --- |\n|  |\n| 1. Identify and describe the key components of a Web page, including headings, menus, links, text, images, and other relevant elements.\u003Cbr>2. Draw and explain 2 web outline plans showing the wireframes. |\n\nKey Ideas  \n1. Web design-Web design involves planning and creating the visual layout and structure of a website. It ensures the site is attractive, user-friendly, and works well on different devices.  \n2. Web development – Is the process of building and maintaining websites  \n3. Front-end – Refers to the part of a website that users interact with directly  \n4. Back-end – Ensures that the front-end operates smoothly by handling data processing, storage, and security  \n5. Sitemap -A sitemap is a visual or structured map that outlines the organisation and hierarchy of a website’s pages  \n6. User experience (UX) -Refers to how users interact with and feel about a website  \n7. User interface (UI) -Refers to the visual elements of software or a website that users  \n2  \nSECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT  \ninteract with  \n8. Website blueprint-A detailed plan that outlines the structure, content, and navigation of a website  \n9. Content structure-Refers to the organised arrangement of information on a website, ensuring that content is presented in a logical and easy-to-navigate manner.  \n10. Wireframe – Like a house plan, a wireframe is a simple sketch that shows the structure of a website.  \n11. Prototype – Like a small model of the house, a prototype allows you to see how the structure works in real life.  \nLet’s begin this section with an interesting activity!  \nActivity 5.1  \nDo this activity individually.  \n1. Click on these two links and explore the similarities and differences on the landing page (the first page that opens when you click the link) .  \nLink 1  \nLink 2  \n2. List 5 things they have in common.  \n3. What are the key differences between them?  \n4. Share your finding with the class and discuss.  \nFrom the activity you just completed, you will notice that link 1 is just a design, without any functionality, while link 2 has functionality which makes the website respond to what you clicked on.  \nIn this learning, we will look atthe difference between web design and web development, which you may have already understood from Activity 5.1.  \n3  \nSECTION 5 COMPUTATIONAL THINKING AND WEB DEVELOPMENT  \nTHE DIFFERENCE BETWEEN WEB DESIGN AND WEB DEVELOPMENT  \nWeb Design  \nWeb design is about making a website look good. It deals with the colours, layout, and overall appearance of the website. However, web development is about making the website work (function) . This means, it involves creating the parts of the website that u","cbCaiuzdTsUzzMbR","https://ap.wps.com/l/cbCaiuzdTsUzzMbR","pdf",6671908,31,"English","# Section 5: Computational Thinking and Web Development\n## Introduction\n## Key Ideas\n## Activity 5.1\n## The Difference Between Web Design and Web Development\n## Web Design\n## Web Development\n## Activity 5.2","[{\"question\":\"What is the learning focus of Section 5?\",\"answer\":\"Section 5 focuses on computational thinking for web development, including how websites are planned and built using tools and basic coding ideas.\"},{\"question\":\"What are wireframes, prototypes, and website blueprints?\",\"answer\":\"Wireframes are simple sketches showing website structure, prototypes demonstrate how the structure works, and website blueprints outline structure, content, and navigation.\"},{\"question\":\"How does web design differ from web development?\",\"answer\":\"Web design focuses on visual appearance such as colours and layout, while web development focuses on making the website work through functionality using coding languages like HTML and JavaScript.\"}]","COMPUTATIONAL THINKING AND WEB DEVELOPMENT - Section 5 - Introduction | PDF",1792986626,78]