{"id":7603,"date":"2026-04-03T12:36:45","date_gmt":"2026-04-03T16:36:45","guid":{"rendered":"https:\/\/umainenewmedia.net\/nmd340\/?p=7603"},"modified":"2026-04-03T12:36:45","modified_gmt":"2026-04-03T16:36:45","slug":"task-10-frank-albert","status":"publish","type":"post","link":"https:\/\/umainenewmedia.net\/nmd340\/task-10-frank-albert\/","title":{"rendered":"Task 10 &#8211; Frank Albert"},"content":{"rendered":"<p><strong>CodePen:\u00a0<\/strong><\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Frank Albert First Pen 340\" src=\"https:\/\/codepen.io\/Frank-Albert\/embed\/preview\/GgqEOLY?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=GgqEOLY#?secret=n7vdDM0vxM\" data-secret=\"n7vdDM0vxM\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p><strong>Portfolio:<\/strong> <a href=\"https:\/\/falbert.dreamhosters.com\/portfolio\/\">https:\/\/falbert.dreamhosters.com\/portfolio\/<\/a><\/p>\n<p>I ended up using 2 of the basic design rules this week to further style and enhance my website. The first one I used was using high contrast for important areas of the website, such as the CTA and other buttons. I also ended up making sure the text on the pages of my website are no smaller than 16px. I will continue to go back and try to use more advanced design rules in the future. For animations this week, I made the buttons on my website scale when the user hovers over them, the headers and highlighted projects on my homepage fade into the screen when the user scrolls down to them, the actual portfolio items on the homepage now scale as well when the user hovers over them. The last few smaller animations that I added were the underlines on the header menu items when the user hovers over them. I believe the hover feature is one of the best ways to animate aspects of the website, without complicating or changing anything too much.<\/p>\n<p><strong>Backup Image:<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-large wp-image-7605\" src=\"https:\/\/umainenewmedia.net\/nmd340\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-03-at-12.16.25-PM-1024x279.png\" alt=\"\" width=\"1024\" height=\"279\" srcset=\"https:\/\/umainenewmedia.net\/nmd340\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-03-at-12.16.25-PM-1024x279.png 1024w, https:\/\/umainenewmedia.net\/nmd340\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-03-at-12.16.25-PM-300x82.png 300w, https:\/\/umainenewmedia.net\/nmd340\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-03-at-12.16.25-PM-768x209.png 768w, https:\/\/umainenewmedia.net\/nmd340\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-03-at-12.16.25-PM-1536x419.png 1536w, https:\/\/umainenewmedia.net\/nmd340\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-03-at-12.16.25-PM.png 1800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CodePen:\u00a0 Portfolio: https:\/\/falbert.dreamhosters.com\/portfolio\/ I ended up using 2 of the basic design rules this week to further style and enhance my website. The first one I used was using high contrast for important areas of the website, such as the CTA and other buttons. I also ended up making sure the text on the pages &#8230; <a title=\"Task 10 &#8211; Frank Albert\" class=\"read-more\" href=\"https:\/\/umainenewmedia.net\/nmd340\/task-10-frank-albert\/\" aria-label=\"Read more about Task 10 &#8211; Frank Albert\">Read more<\/a><\/p>\n","protected":false},"author":62,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-7603","post","type-post","status-publish","format-standard","hentry","category-task-10"],"_links":{"self":[{"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/posts\/7603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/comments?post=7603"}],"version-history":[{"count":1,"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/posts\/7603\/revisions"}],"predecessor-version":[{"id":7606,"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/posts\/7603\/revisions\/7606"}],"wp:attachment":[{"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/media?parent=7603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/categories?post=7603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umainenewmedia.net\/nmd340\/wp-json\/wp\/v2\/tags?post=7603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}