{"id":20640,"date":"2023-12-11T08:05:12","date_gmt":"2023-12-11T08:05:12","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/?p=20640"},"modified":"2024-01-17T11:21:28","modified_gmt":"2024-01-17T11:21:28","slug":"11th-december-2023-12daysofcreativity7","status":"publish","type":"post","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/2023\/12\/11\/11th-december-2023-12daysofcreativity7\/","title":{"rendered":"Activity 7 &#8211; Website Building"},"content":{"rendered":"<section id=\"builder-section-text_12\" class=\"builder-section-first builder-section builder-section-text builder-section-next-text builder-text-columns-1\" style=\"background-size: cover;background-position: center center\">\n<div class=\"builder-section-content\">\n<div class=\"builder-text-row\">\n<div id=\"builder-section-text_12-column-1\" class=\"builder-text-column builder-text-column-1\">\n<div class=\"builder-text-content\">\n<div id=\"builder-section-text_562-column-1\" class=\"builder-text-column builder-text-column-1\">\n<div class=\"builder-text-content\">\n<p><b><span style=\"font-size: 1.8rem\">Ho Ho Ho! It&#8217;s the time of year where everyone has a joke to tell!<\/span><\/b><\/p>\n<p><span style=\"font-size: 1.8rem\">Today, we are <\/span>challenging<span style=\"font-size: 1.8rem\"> you to modify our <a href=\"https:\/\/codepen.io\/bwclark\/full\/vYbMBob\">Random <\/a><\/span><a href=\"https:\/\/codepen.io\/bwclark\/full\/vYbMBob\">Christmas<\/a><span style=\"font-size: 1.8rem\"><a href=\"https:\/\/codepen.io\/bwclark\/full\/vYbMBob\"> Joke <\/a><a href=\"https:\/\/codepen.io\/bwclark\/full\/vYbMBob\">Generator<\/a>! \u00a0<\/span><\/p>\n<div class=\"wp-block-image\"><a href=\"https:\/\/codepen.io\/bwclark\/full\/vYbMBob\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"20641\" data-permalink=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/2023\/12\/11\/11th-december-2023-12daysofcreativity7\/screenshot-2023-12-11-at-07-50-08\/\" data-orig-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08.png\" data-orig-size=\"1260,1025\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot 2023-12-11 at 07.50.08\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08-300x244.png\" data-large-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08-1024x833.png\" class=\"wpa-warning wpa-image-missing-alt alignnone size-large wp-image-20641\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08-1024x833.png\" alt=\"\" width=\"960\" height=\"781\" data-warning=\"Missing alt text\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08-1024x833.png 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08-300x244.png 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08-768x625.png 768w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075100\/Screenshot-2023-12-11-at-07.50.08.png 1260w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/div>\n<p>When you visit the site, simply click on the cracker to display a random joke.<\/p>\n<\/div>\n<\/div>\n<div id=\"builder-section-text_562-column-2\" class=\"builder-text-column builder-text-column-2\">\n<div class=\"builder-text-content\">\n<p>&nbsp;<\/p>\n<p><strong>It&#8217;s Your Turn!<\/strong><\/p>\n<p>Short Video Walkthrough<\/p>\n<div class=\"epyt-video-wrapper\"><div  id=\"_ytid_28579\"  width=\"800\" height=\"450\"  data-origwidth=\"800\" data-origheight=\"450\" data-facadesrc=\"https:\/\/www.youtube.com\/embed\/E-OHwhJ045k?enablejsapi=1&autoplay=0&cc_load_policy=1&cc_lang_pref=en&iv_load_policy=1&loop=0&rel=0&fs=1&playsinline=0&autohide=2&theme=dark&color=red&controls=1&disablekb=0&\" class=\"__youtube_prefs__ epyt-facade no-lazyload\" data-epautoplay=\"1\" ><img decoding=\"async\" data-spai-excluded=\"true\" class=\"epyt-facade-poster skip-lazy\" loading=\"lazy\"  alt=\"YouTube player\"  src=\"https:\/\/i.ytimg.com\/vi\/E-OHwhJ045k\/maxresdefault.jpg\"  \/><button class=\"epyt-facade-play\" aria-label=\"Play\"><svg data-no-lazy=\"1\" height=\"100%\" version=\"1.1\" viewBox=\"0 0 68 48\" width=\"100%\"><path class=\"ytp-large-play-button-bg\" d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\"><\/path><path d=\"M 45,24 27,14 27,34\" fill=\"#fff\"><\/path><\/svg><\/button><\/div><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Instructions<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Can you <a href=\"https:\/\/codepen.io\/bwclark\/full\/vYbMBob\">modify the page<\/a> to make it your own? \u00a0Click on the \u00a0<strong>View Source Code\u00a0<\/strong>button at the top of the page of the joke generator &#8211; it should look like this<\/p>\n<p>&nbsp;<\/p>\n<div class=\"wp-block-image\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"20642\" data-permalink=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/2023\/12\/11\/11th-december-2023-12daysofcreativity7\/screenshot-2023-12-11-at-07-52-55\/\" data-orig-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55.png\" data-orig-size=\"1260,672\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot 2023-12-11 at 07.52.55\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55-300x160.png\" data-large-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55-1024x546.png\" class=\"wpa-warning wpa-image-missing-alt alignnone size-large wp-image-20642\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55-1024x546.png\" alt=\"\" width=\"960\" height=\"512\" data-warning=\"Missing alt text\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55-1024x546.png 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55-300x160.png 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55-280x150.png 280w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55-768x410.png 768w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075339\/Screenshot-2023-12-11-at-07.52.55.png 1260w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/div>\n<\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<div><span style=\"color: #339966\"><strong>FIRST &#8211; Lets change the jokes and \/ or add more<\/strong><\/span><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div>Double click on the JS section (this is the javascript code that generates the jokes)<\/div>\n<p>&nbsp;<\/p>\n<div><\/div>\n<\/div>\n<div><\/div>\n<div>\n<div class=\"wp-block-image\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"20643\" data-permalink=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/2023\/12\/11\/11th-december-2023-12daysofcreativity7\/screenshot-2023-12-11-at-07-55-02\/\" data-orig-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02.png\" data-orig-size=\"1260,688\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot 2023-12-11 at 07.55.02\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02-300x164.png\" data-large-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02-1024x559.png\" class=\"wpa-warning wpa-image-missing-alt alignnone size-large wp-image-20643\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02-1024x559.png\" alt=\"\" width=\"960\" height=\"524\" data-warning=\"Missing alt text\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02-1024x559.png 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02-300x164.png 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02-768x419.png 768w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11075526\/Screenshot-2023-12-11-at-07.55.02.png 1260w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/div>\n<\/div>\n<div class=\"builder-text-content\">\n<div><\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<div>You can make the coding window bigger by pulling the divider to the right.<\/div>\n<ul>\n<li><em><strong>Can you see where the jokes are? \u00a0<\/strong><\/em><\/li>\n<li><em><strong>Can you add another couple of jokes or replace the ones that are there? \u00a0<\/strong><\/em><\/li>\n<\/ul>\n<\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<div><span style=\"color: #339966\"><strong>SECOND &#8211; double click on the HTML section<\/strong><\/span><\/div>\n<ul>\n<li><em><strong>Can you edit the text that appears so that your name appears on the site?<\/strong><\/em><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div><span style=\"color: #339966\"><strong>THIRD &#8211; double click on the CSS section<\/strong><\/span><\/div>\n<ul>\n<li><em><strong>Can you see where the colours are listed in the code? \u00a0Try and change the different colours of the different sections &#8211; try this one at a time<\/strong><\/em><\/li>\n<li><strong>Can you see where the font-family is used? \u00a0Try to change the name of one of the fonts to one you know &#8211; what happens? <a href=\"https:\/\/www.w3.org\/Style\/Examples\/007\/fonts.en.html\">This is a list of fonts you might want to try<\/a><\/strong><\/li>\n<\/ul>\n<p><em>Helpful hints with colours&#8230;<\/em><br \/>\nYou can use the names of the colours eg black, blue, pink etc, however to get more specific colours you can use the HEX code of the colour.\u00a0 To find the hex code ot a colour, visit the site <a href=\"https:\/\/html-color.codes\/\">HTML Color Codes \ud83c\udfa8 (html-color.codes)<\/a>.\u00a0 From there you can pick any colour and it will give you the hex code. Eg this shade of pink has the hex code of <strong>#f462f4.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<div>Simply use this hex code in the CSS rules to use the colour eg<\/div>\n<pre><strong>background:#f462f4;<\/strong><\/pre>\n<p><strong>\u00a0<\/strong><\/p>\n<div class=\"wp-block-image\"><a href=\"https:\/\/html-color.codes\/\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"20662\" data-permalink=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/2023\/12\/11\/11th-december-2023-12daysofcreativity7\/hexcode\/\" data-orig-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode.png\" data-orig-size=\"1260,608\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"hexcode\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode-300x145.png\" data-large-file=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode-1024x494.png\" class=\"wpa-warning wpa-image-missing-alt alignnone size-large wp-image-20662\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode-1024x494.png\" alt=\"\" width=\"960\" height=\"463\" data-warning=\"Missing alt text\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode-1024x494.png 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode-300x145.png 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode-768x371.png 768w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/11114633\/hexcode.png 1260w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/div>\n<pre><\/pre>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<div><\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Ho Ho Ho! It&#8217;s the time of year where everyone has a joke to tell! Today, we are challenging you to modify our Random Christmas Joke Generator! \u00a0 When you visit the site, simply click on the cracker to display a random joke. &nbsp; It&#8217;s Your Turn! Short Video Walkthrough &nbsp; &nbsp; Instructions &nbsp; Can &hellip;<\/p>\n","protected":false},"author":58310,"featured_media":21248,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1574],"tags":[2120],"class_list":["post-20640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-waiting","tag-12days2023"],"jetpack_featured_media_url":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/digilearn\/uploads\/sites\/6913\/2023\/12\/17104030\/IMG_0292.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/posts\/20640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/users\/58310"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/comments?post=20640"}],"version-history":[{"count":17,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/posts\/20640\/revisions"}],"predecessor-version":[{"id":21266,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/posts\/20640\/revisions\/21266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/media\/21248"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/media?parent=20640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/categories?post=20640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/digilearn\/wp-json\/wp\/v2\/tags?post=20640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}