{"id":60,"date":"2017-12-16T23:05:14","date_gmt":"2017-12-17T04:05:14","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/chapter\/headings\/"},"modified":"2023-06-08T12:12:19","modified_gmt":"2023-06-08T16:12:19","slug":"whatweb","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/chapter\/whatweb\/","title":{"raw":"3.2 What is a website?","rendered":"3.2 What is a website?"},"content":{"raw":"<span class=\"veryhardreadability\"><span data-offset-key=\"9qt0r-0-0\"> The foundational languages used to create the front-end design of a website are <strong>H<\/strong>yper<strong>T<\/strong>ext <strong>M<\/strong>arkup <strong>L<\/strong>anguage (HTML), and <strong>C<\/strong>ascading <strong>S<\/strong>tyle <strong>S<\/strong>heets (CSS)<\/span><\/span><span data-offset-key=\"9qt0r-1-0\">. <\/span><span class=\"hardreadability\"><span data-offset-key=\"9qt0r-2-0\">Take a moment to explore the code that is generating this web page by right-clicking on it, and choosing Inspect (Element)<\/span><\/span><span data-offset-key=\"9qt0r-3-0\">. You will see the code, styles, image sources and all the data that is being rendered by the browser. The image below shows the basic building blocks of a website.<\/span>\r\n\r\n[caption id=\"attachment_302\" align=\"aligncenter\" width=\"700\"]<img class=\"wp-image-302 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-content\/uploads\/sites\/1666\/2017\/12\/website.png\" alt=\"Components of a website: HTML, CSS, PHP, JS\" width=\"700\" height=\"500\" \/> <strong>Figure 4<\/strong> - Many languages and files can be used to put together a website. HTML and CSS are always parsed and rendered in a browser.[\/caption]\r\n<h2 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"1dmbh-0-0\"><span data-offset-key=\"1dmbh-0-0\">What is HTML &amp; CSS?<\/span><\/h2>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"du9vh-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"du9vh-0-0\"><span data-offset-key=\"du9vh-0-0\">Each web page on a website is a unique HTML file. This file contains the content (text and file paths to images stored on the server) that you see on the page. The styles and design of how this content <\/span><span class=\"passivevoice\"><span data-offset-key=\"du9vh-1-0\">is presented<\/span><\/span> <span class=\"passivevoice\"><span data-offset-key=\"du9vh-3-0\">are created<\/span><\/span><span data-offset-key=\"du9vh-4-0\"> in the language CSS. <\/span><span class=\"veryhardreadability\"><span data-offset-key=\"du9vh-5-0\">CSS can either <\/span><\/span><span class=\"passivevoice\"><span data-offset-key=\"du9vh-6-0\">be <\/span><\/span><span class=\"veryhardreadability\"><span data-offset-key=\"du9vh-7-0\">linked to the HTML page from an external CSS file (most efficient), or by having the CSS code contained within each HTML page itself<\/span><\/span><span data-offset-key=\"du9vh-8-0\">.<\/span><\/div>\r\n<\/div>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"63cli-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"63cli-0-0\"><span data-offset-key=\"63cli-0-0\">\u00a0<\/span><\/div>\r\n<\/div>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"c4a50-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"c4a50-0-0\"><span data-offset-key=\"c4a50-0-0\">Note Knowing HTML and CSS allows you to customize your web pages. They are very powerful yet basic coding languages. Useful definitions, references, and tutorials can <\/span><span class=\"passivevoice\"><span data-offset-key=\"c4a50-1-0\">are available <\/span><\/span><span data-offset-key=\"c4a50-2-0\">at <\/span><a href=\"https:\/\/www.w3schools.com\/\"><span data-offset-key=\"c4a50-3-0\">W3Schools<\/span><\/a><span data-offset-key=\"c4a50-4-0\">[footnote] Refsnes Data. (n.d.) Learn to Code. https:\/\/www.w3schools.com\/[\/footnote], <a href=\"https:\/\/freecodecamp.org\/\">freeCodeCamp<\/a>[footnote]freeCodeCamp. (n.d.). Learn to code. https:\/\/www.freecodecamp.org\/[\/footnote] and <a href=\"https:\/\/codepip.com\/\">Codepip<\/a>[footnote]Codepip. (n.d.). Learn to code by playing games. https:\/\/codepip.com\/[\/footnote].<\/span><\/div>\r\n<h2 data-offset-key=\"c4a50-0-0\">Content Management Systems<\/h2>\r\nMost modern websites are built using a Content Management System (CMS). You have probably heard of at least one of these many popular options: WordPress, Joomla, Wix, Weebly, Squarespace, Shopify, etc. <span class=\"veryhardreadability\"><span data-offset-key=\"74ovl-0-0\">A CMS is an application used to edit and manage a website's content, using a <\/span><\/span><span class=\"adverb\"><span data-offset-key=\"74ovl-1-0\">user-friendly<\/span><\/span><span class=\"veryhardreadability\"><span data-offset-key=\"74ovl-2-0\"> Graphical User Interface (GUI) rather than requiring the direct editing of code<\/span><\/span><span data-offset-key=\"74ovl-3-0\">.\r\n<\/span>\r\n\r\nA CMS, like WordPress:\r\n<ul>\r\n \t<li>Provides the background architecture to ensure database and server-side functionality.<\/li>\r\n \t<li>Maintains and updates the system architecture.<\/li>\r\n \t<li>Gives many template options that are easy to utilize and install.<\/li>\r\n \t<li>Allows the focus on content and imagery rather than coding.<\/li>\r\n \t<li><span data-offset-key=\"b6u7i-0-0\">Creates the site navigation elements.<\/span>\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"co6u0-0-0\"><\/div><\/li>\r\n \t<li>\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"co6u0-0-0\"><span data-offset-key=\"co6u0-0-0\">Supports database integration.<\/span><\/div><\/li>\r\n \t<li>\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"co6u0-0-0\"><span data-offset-key=\"37h52-0-0\">makes content indexed and searchable.<\/span><\/div><\/li>\r\n \t<li><span data-offset-key=\"5q55j-0-0\">...and much more<\/span><\/li>\r\n<\/ul>\r\n<h2>Website verses Blog<\/h2>\r\nHere are a few key differences between a blog and a website. For the purposes of this course we will be focusing on designing an effective website for a business, not a lifestyle blog.\r\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"ds05h-0-0\">\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"ds05h-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"ds05h-0-0\"><span data-offset-key=\"ds05h-0-0\">The term\u00a0<\/span><span data-offset-key=\"ds05h-0-1\">blog<\/span><span data-offset-key=\"ds05h-0-2\">\u00a0is an abbreviation for\u00a0<\/span><em>web log<\/em><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"8f047-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"8f047-0-0\"><span data-offset-key=\"8f047-0-0\">Blogs often contain an ongoing collection of time-based posts, presented in chronological order<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"fq9c3-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"fq9c3-0-0\"><span data-offset-key=\"fq9c3-0-0\">Blogs are often, but not always, written in a journal-style commentary<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"b3dsi-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b3dsi-0-0\"><span data-offset-key=\"b3dsi-0-0\">A website usually contains informational pages, but can also have a blog section<\/span><\/div><\/li>\r\n<\/ul>\r\n<h2 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"lf5a-0-0\"><span data-offset-key=\"lf5a-0-0\">Purpose of a Blog<\/span><\/h2>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"5cepp-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"5cepp-0-0\"><span data-offset-key=\"5cepp-0-0\">Blogs can <\/span><span class=\"passivevoice\"><span data-offset-key=\"5cepp-1-0\">be used<\/span><\/span><span data-offset-key=\"5cepp-2-0\"> to:<\/span><\/div>\r\n<\/div>\r\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"c6j4e-0-0\">\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"c6j4e-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"c6j4e-0-0\"><span data-offset-key=\"c6j4e-0-0\">Drive traffic to your website<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"8siv1-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"8siv1-0-0\"><span data-offset-key=\"8siv1-0-0\">Convert that traffic into leads or sales<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"179kn-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"179kn-0-0\"><span data-offset-key=\"179kn-0-0\">Establish authority on a topic<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"i2f3-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"i2f3-0-0\"><span data-offset-key=\"i2f3-0-0\">Create community\u00a0<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"2u64n-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"2u64n-0-0\"><span data-offset-key=\"2u64n-0-0\">Be creative &amp; have fun<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"d73nt-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"d73nt-0-0\"><span data-offset-key=\"d73nt-0-0\">Follow your passion about a particular activity or topic!<\/span><\/div><\/li>\r\n<\/ul>\r\n<h2 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3utb2-0-0\"><span data-offset-key=\"3utb2-0-0\">What is WordPress?<\/span><\/h2>\r\nWordPress is one of the most popular CMS. According to <a href=\"https:\/\/w3techs.com\/technologies\/details\/cm-wordpress\">W3Techs<\/a> 43% of all websites are built using WordPress. Being an open source platform means that anyone can contribute themes or plugins, help validate code and contribute to the system update. <span data-offset-key=\"68ai0-0-0\">When making a site using plain HTML, each new page must <\/span><span class=\"passivevoice\"><span data-offset-key=\"68ai0-1-0\">be created<\/span><\/span> <span class=\"adverb\"><span data-offset-key=\"68ai0-3-0\">manually<\/span><\/span><span data-offset-key=\"68ai0-4-0\">. A CMS like WordPress simplifies the process of creating and adding content and images to your website.<\/span>\r\n<h3 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b9d96-0-0\">WordPress.com\u00a0vs. WordPress.org<\/h3>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"b48hu-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b48hu-0-0\"><span data-offset-key=\"b48hu-0-0\">There are two options versions of WordPress: <\/span><a href=\"http:\/\/wordpress.com\/\"><span data-offset-key=\"b48hu-1-0\">WordPress.com<\/span><\/a><span data-offset-key=\"b48hu-2-0\">\u00a0and <\/span><a href=\"http:\/\/wordpress.org\/\"><span data-offset-key=\"b48hu-3-0\">WordPress.org<\/span><\/a><span data-offset-key=\"b48hu-4-0\"><span data-offset-key=\"b48hu-4-0\">. In both you can install and utilize <\/span><\/span><span data-offset-key=\"3dfgb-0-0\">1000s of plugins to add features to your site. <\/span><\/div>\r\n<div data-offset-key=\"b48hu-0-0\"><\/div>\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b48hu-0-0\"><span data-offset-key=\"b48hu-4-0\">The main differences between the two <\/span><span class=\"passivevoice\"><span data-offset-key=\"b48hu-5-0\">are explained<\/span><\/span><span data-offset-key=\"b48hu-6-0\"> below:<\/span><\/div>\r\n<\/div>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"bafp4-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"bafp4-0-0\"><span data-offset-key=\"bafp4-0-0\">\u00a0<\/span><\/div>\r\n<\/div>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"cnstl-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"cnstl-0-0\"><strong>WordPress.com<\/strong><\/div>\r\n<\/div>\r\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"8sskk-0-0\">\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"8sskk-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"8sskk-0-0\"><span data-offset-key=\"8sskk-0-0\">The default URL is <\/span><span data-offset-key=\"8sskk-0-1\">yoursite.wordpress.com<\/span><span data-offset-key=\"8sskk-0-2\"> (hosting &amp; domain maintenance by WordPress.com). There are paid options to add your own customized domain name.\r\n<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"57l81-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"57l81-0-0\"><span data-offset-key=\"57l81-0-0\">Limited access to the CSS and HTML code of your site for customization<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"9aesl-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"9aesl-0-0\"><span data-offset-key=\"9aesl-0-0\">Themes <\/span><span class=\"passivevoice\"><span data-offset-key=\"9aesl-1-0\">are included<\/span><\/span><span data-offset-key=\"9aesl-2-0\"> but you cannot upload your own theme or use plugins<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"69qhq-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"69qhq-0-0\"><span data-offset-key=\"69qhq-0-0\">Offers different plans, including free, with added features &amp; upgrades<\/span><\/div><\/li>\r\n<\/ul>\r\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"e6mut-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"e6mut-0-0\"><strong>WordPress.org<\/strong><\/div>\r\n<\/div>\r\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"3g1ub-0-0\">\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\"><span data-offset-key=\"3g1ub-0-0\">By default you use a custom domain for your URL (<\/span><span data-offset-key=\"3g1ub-0-1\">yoursite.com<\/span><span data-offset-key=\"3g1ub-0-2\">) without the WordPress sub-domain<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\"><span class=\"hardreadability\"><span data-offset-key=\"fpltj-0-0\">You are in charge of site maintenance, including customizing your CSS and HTML and database support<\/span><\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\"><span class=\"hardreadability\"><span data-offset-key=\"fpltj-0-0\">R<\/span><\/span><span data-offset-key=\"bnuii-0-0\">equires web development knowledge (PHP, HTML, CSS, JS)<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\">M<span data-offset-key=\"f8ra-0-0\">ore theme options available to use and the ability to upload your own themes and modify templates.<\/span><\/div><\/li>\r\n \t<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\r\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\">F<span data-offset-key=\"5v7e2-0-0\">ull control over theme files and settings<\/span><\/div><\/li>\r\n<\/ul>\r\n<\/div>","rendered":"<p><span class=\"veryhardreadability\"><span data-offset-key=\"9qt0r-0-0\"> The foundational languages used to create the front-end design of a website are <strong>H<\/strong>yper<strong>T<\/strong>ext <strong>M<\/strong>arkup <strong>L<\/strong>anguage (HTML), and <strong>C<\/strong>ascading <strong>S<\/strong>tyle <strong>S<\/strong>heets (CSS)<\/span><\/span><span data-offset-key=\"9qt0r-1-0\">. <\/span><span class=\"hardreadability\"><span data-offset-key=\"9qt0r-2-0\">Take a moment to explore the code that is generating this web page by right-clicking on it, and choosing Inspect (Element)<\/span><\/span><span data-offset-key=\"9qt0r-3-0\">. You will see the code, styles, image sources and all the data that is being rendered by the browser. The image below shows the basic building blocks of a website.<\/span><\/p>\n<figure id=\"attachment_302\" aria-describedby=\"caption-attachment-302\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-302 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-content\/uploads\/sites\/1666\/2017\/12\/website.png\" alt=\"Components of a website: HTML, CSS, PHP, JS\" width=\"700\" height=\"500\" srcset=\"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-content\/uploads\/sites\/1666\/2017\/12\/website.png 700w, https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-content\/uploads\/sites\/1666\/2017\/12\/website-300x214.png 300w, https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-content\/uploads\/sites\/1666\/2017\/12\/website-65x46.png 65w, https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-content\/uploads\/sites\/1666\/2017\/12\/website-225x161.png 225w, https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-content\/uploads\/sites\/1666\/2017\/12\/website-350x250.png 350w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption id=\"caption-attachment-302\" class=\"wp-caption-text\"><strong>Figure 4<\/strong> &#8211; Many languages and files can be used to put together a website. HTML and CSS are always parsed and rendered in a browser.<\/figcaption><\/figure>\n<h2 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"1dmbh-0-0\"><span data-offset-key=\"1dmbh-0-0\">What is HTML &amp; CSS?<\/span><\/h2>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"du9vh-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"du9vh-0-0\"><span data-offset-key=\"du9vh-0-0\">Each web page on a website is a unique HTML file. This file contains the content (text and file paths to images stored on the server) that you see on the page. The styles and design of how this content <\/span><span class=\"passivevoice\"><span data-offset-key=\"du9vh-1-0\">is presented<\/span><\/span> <span class=\"passivevoice\"><span data-offset-key=\"du9vh-3-0\">are created<\/span><\/span><span data-offset-key=\"du9vh-4-0\"> in the language CSS. <\/span><span class=\"veryhardreadability\"><span data-offset-key=\"du9vh-5-0\">CSS can either <\/span><\/span><span class=\"passivevoice\"><span data-offset-key=\"du9vh-6-0\">be <\/span><\/span><span class=\"veryhardreadability\"><span data-offset-key=\"du9vh-7-0\">linked to the HTML page from an external CSS file (most efficient), or by having the CSS code contained within each HTML page itself<\/span><\/span><span data-offset-key=\"du9vh-8-0\">.<\/span><\/div>\n<\/div>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"63cli-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"63cli-0-0\"><span data-offset-key=\"63cli-0-0\">\u00a0<\/span><\/div>\n<\/div>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"c4a50-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"c4a50-0-0\"><span data-offset-key=\"c4a50-0-0\">Note Knowing HTML and CSS allows you to customize your web pages. They are very powerful yet basic coding languages. Useful definitions, references, and tutorials can <\/span><span class=\"passivevoice\"><span data-offset-key=\"c4a50-1-0\">are available <\/span><\/span><span data-offset-key=\"c4a50-2-0\">at <\/span><a href=\"https:\/\/www.w3schools.com\/\"><span data-offset-key=\"c4a50-3-0\">W3Schools<\/span><\/a><span data-offset-key=\"c4a50-4-0\"><a class=\"footnote\" title=\"Refsnes Data. (n.d.) Learn to Code. https:\/\/www.w3schools.com\/\" id=\"return-footnote-60-1\" href=\"#footnote-60-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a>, <a href=\"https:\/\/freecodecamp.org\/\">freeCodeCamp<\/a><a class=\"footnote\" title=\"freeCodeCamp. (n.d.). Learn to code. https:\/\/www.freecodecamp.org\/\" id=\"return-footnote-60-2\" href=\"#footnote-60-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a> and <a href=\"https:\/\/codepip.com\/\">Codepip<\/a><a class=\"footnote\" title=\"Codepip. (n.d.). Learn to code by playing games. https:\/\/codepip.com\/\" id=\"return-footnote-60-3\" href=\"#footnote-60-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a>.<\/span><\/div>\n<h2 data-offset-key=\"c4a50-0-0\">Content Management Systems<\/h2>\n<p>Most modern websites are built using a Content Management System (CMS). You have probably heard of at least one of these many popular options: WordPress, Joomla, Wix, Weebly, Squarespace, Shopify, etc. <span class=\"veryhardreadability\"><span data-offset-key=\"74ovl-0-0\">A CMS is an application used to edit and manage a website&#8217;s content, using a <\/span><\/span><span class=\"adverb\"><span data-offset-key=\"74ovl-1-0\">user-friendly<\/span><\/span><span class=\"veryhardreadability\"><span data-offset-key=\"74ovl-2-0\"> Graphical User Interface (GUI) rather than requiring the direct editing of code<\/span><\/span><span data-offset-key=\"74ovl-3-0\">.<br \/>\n<\/span><\/p>\n<p>A CMS, like WordPress:<\/p>\n<ul>\n<li>Provides the background architecture to ensure database and server-side functionality.<\/li>\n<li>Maintains and updates the system architecture.<\/li>\n<li>Gives many template options that are easy to utilize and install.<\/li>\n<li>Allows the focus on content and imagery rather than coding.<\/li>\n<li><span data-offset-key=\"b6u7i-0-0\">Creates the site navigation elements.<\/span>\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"co6u0-0-0\"><\/div>\n<\/li>\n<li>\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"co6u0-0-0\"><span data-offset-key=\"co6u0-0-0\">Supports database integration.<\/span><\/div>\n<\/li>\n<li>\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"co6u0-0-0\"><span data-offset-key=\"37h52-0-0\">makes content indexed and searchable.<\/span><\/div>\n<\/li>\n<li><span data-offset-key=\"5q55j-0-0\">&#8230;and much more<\/span><\/li>\n<\/ul>\n<h2>Website verses Blog<\/h2>\n<p>Here are a few key differences between a blog and a website. For the purposes of this course we will be focusing on designing an effective website for a business, not a lifestyle blog.<\/p>\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"ds05h-0-0\">\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"ds05h-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"ds05h-0-0\"><span data-offset-key=\"ds05h-0-0\">The term\u00a0<\/span><span data-offset-key=\"ds05h-0-1\">blog<\/span><span data-offset-key=\"ds05h-0-2\">\u00a0is an abbreviation for\u00a0<\/span><em>web log<\/em><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"8f047-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"8f047-0-0\"><span data-offset-key=\"8f047-0-0\">Blogs often contain an ongoing collection of time-based posts, presented in chronological order<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"fq9c3-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"fq9c3-0-0\"><span data-offset-key=\"fq9c3-0-0\">Blogs are often, but not always, written in a journal-style commentary<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"b3dsi-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b3dsi-0-0\"><span data-offset-key=\"b3dsi-0-0\">A website usually contains informational pages, but can also have a blog section<\/span><\/div>\n<\/li>\n<\/ul>\n<h2 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"lf5a-0-0\"><span data-offset-key=\"lf5a-0-0\">Purpose of a Blog<\/span><\/h2>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"5cepp-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"5cepp-0-0\"><span data-offset-key=\"5cepp-0-0\">Blogs can <\/span><span class=\"passivevoice\"><span data-offset-key=\"5cepp-1-0\">be used<\/span><\/span><span data-offset-key=\"5cepp-2-0\"> to:<\/span><\/div>\n<\/div>\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"c6j4e-0-0\">\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"c6j4e-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"c6j4e-0-0\"><span data-offset-key=\"c6j4e-0-0\">Drive traffic to your website<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"8siv1-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"8siv1-0-0\"><span data-offset-key=\"8siv1-0-0\">Convert that traffic into leads or sales<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"179kn-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"179kn-0-0\"><span data-offset-key=\"179kn-0-0\">Establish authority on a topic<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"i2f3-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"i2f3-0-0\"><span data-offset-key=\"i2f3-0-0\">Create community\u00a0<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"2u64n-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"2u64n-0-0\"><span data-offset-key=\"2u64n-0-0\">Be creative &amp; have fun<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"d73nt-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"d73nt-0-0\"><span data-offset-key=\"d73nt-0-0\">Follow your passion about a particular activity or topic!<\/span><\/div>\n<\/li>\n<\/ul>\n<h2 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3utb2-0-0\"><span data-offset-key=\"3utb2-0-0\">What is WordPress?<\/span><\/h2>\n<p>WordPress is one of the most popular CMS. According to <a href=\"https:\/\/w3techs.com\/technologies\/details\/cm-wordpress\">W3Techs<\/a> 43% of all websites are built using WordPress. Being an open source platform means that anyone can contribute themes or plugins, help validate code and contribute to the system update. <span data-offset-key=\"68ai0-0-0\">When making a site using plain HTML, each new page must <\/span><span class=\"passivevoice\"><span data-offset-key=\"68ai0-1-0\">be created<\/span><\/span> <span class=\"adverb\"><span data-offset-key=\"68ai0-3-0\">manually<\/span><\/span><span data-offset-key=\"68ai0-4-0\">. A CMS like WordPress simplifies the process of creating and adding content and images to your website.<\/span><\/p>\n<h3 class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b9d96-0-0\">WordPress.com\u00a0vs. WordPress.org<\/h3>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"b48hu-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b48hu-0-0\"><span data-offset-key=\"b48hu-0-0\">There are two options versions of WordPress: <\/span><a href=\"http:\/\/wordpress.com\/\"><span data-offset-key=\"b48hu-1-0\">WordPress.com<\/span><\/a><span data-offset-key=\"b48hu-2-0\">\u00a0and <\/span><a href=\"http:\/\/wordpress.org\/\"><span data-offset-key=\"b48hu-3-0\">WordPress.org<\/span><\/a><span data-offset-key=\"b48hu-4-0\"><span data-offset-key=\"b48hu-4-0\">. In both you can install and utilize <\/span><\/span><span data-offset-key=\"3dfgb-0-0\">1000s of plugins to add features to your site. <\/span><\/div>\n<div data-offset-key=\"b48hu-0-0\"><\/div>\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"b48hu-0-0\"><span data-offset-key=\"b48hu-4-0\">The main differences between the two <\/span><span class=\"passivevoice\"><span data-offset-key=\"b48hu-5-0\">are explained<\/span><\/span><span data-offset-key=\"b48hu-6-0\"> below:<\/span><\/div>\n<\/div>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"bafp4-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"bafp4-0-0\"><span data-offset-key=\"bafp4-0-0\">\u00a0<\/span><\/div>\n<\/div>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"cnstl-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"cnstl-0-0\"><strong>WordPress.com<\/strong><\/div>\n<\/div>\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"8sskk-0-0\">\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"8sskk-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"8sskk-0-0\"><span data-offset-key=\"8sskk-0-0\">The default URL is <\/span><span data-offset-key=\"8sskk-0-1\">yoursite.wordpress.com<\/span><span data-offset-key=\"8sskk-0-2\"> (hosting &amp; domain maintenance by WordPress.com). There are paid options to add your own customized domain name.<br \/>\n<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"57l81-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"57l81-0-0\"><span data-offset-key=\"57l81-0-0\">Limited access to the CSS and HTML code of your site for customization<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"9aesl-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"9aesl-0-0\"><span data-offset-key=\"9aesl-0-0\">Themes <\/span><span class=\"passivevoice\"><span data-offset-key=\"9aesl-1-0\">are included<\/span><\/span><span data-offset-key=\"9aesl-2-0\"> but you cannot upload your own theme or use plugins<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"69qhq-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"69qhq-0-0\"><span data-offset-key=\"69qhq-0-0\">Offers different plans, including free, with added features &amp; upgrades<\/span><\/div>\n<\/li>\n<\/ul>\n<div class=\"\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"e6mut-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"e6mut-0-0\"><strong>WordPress.org<\/strong><\/div>\n<\/div>\n<ul class=\"public-DraftStyleDefault-ul\" data-offset-key=\"3g1ub-0-0\">\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\"><span data-offset-key=\"3g1ub-0-0\">By default you use a custom domain for your URL (<\/span><span data-offset-key=\"3g1ub-0-1\">yoursite.com<\/span><span data-offset-key=\"3g1ub-0-2\">) without the WordPress sub-domain<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\"><span class=\"hardreadability\"><span data-offset-key=\"fpltj-0-0\">You are in charge of site maintenance, including customizing your CSS and HTML and database support<\/span><\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\"><span class=\"hardreadability\"><span data-offset-key=\"fpltj-0-0\">R<\/span><\/span><span data-offset-key=\"bnuii-0-0\">equires web development knowledge (PHP, HTML, CSS, JS)<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\">M<span data-offset-key=\"f8ra-0-0\">ore theme options available to use and the ability to upload your own themes and modify templates.<\/span><\/div>\n<\/li>\n<li class=\"public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR\" data-block=\"true\" data-editor=\"e534d\" data-offset-key=\"3g1ub-0-0\">\n<div class=\"public-DraftStyleDefault-block public-DraftStyleDefault-ltr\" data-offset-key=\"3g1ub-0-0\">F<span data-offset-key=\"5v7e2-0-0\">ull control over theme files and settings<\/span><\/div>\n<\/li>\n<\/ul>\n<\/div>\n<div class=\"media-attributions clear\" prefix:cc=\"http:\/\/creativecommons.org\/ns#\" prefix:dc=\"http:\/\/purl.org\/dc\/terms\/\"><h2>Media Attributions<\/h2><ul><li >Components of a website: HTML, CSS, PHP, JS  &copy;  Julia Grav     <\/li><\/ul><\/div><hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-60-1\"> Refsnes Data. (n.d.) Learn to Code. https:\/\/www.w3schools.com\/ <a href=\"#return-footnote-60-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-60-2\">freeCodeCamp. (n.d.). Learn to code. https:\/\/www.freecodecamp.org\/ <a href=\"#return-footnote-60-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-60-3\">Codepip. (n.d.). Learn to code by playing games. https:\/\/codepip.com\/ <a href=\"#return-footnote-60-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":1518,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[48],"contributor":[],"license":[],"class_list":["post-60","chapter","type-chapter","status-publish","hentry","chapter-type-standard"],"part":54,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/users\/1518"}],"version-history":[{"count":6,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/60\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/60\/revisions\/474"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/parts\/54"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/60\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapter-type?post=60"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/contributor?post=60"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/license?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}