{"id":228,"date":"2026-02-13T20:28:47","date_gmt":"2026-02-13T20:28:47","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/h_francois\/?p=228"},"modified":"2026-02-13T20:28:47","modified_gmt":"2026-02-13T20:28:47","slug":"friday-2-13-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/h_francois\/2026\/02\/13\/friday-2-13-2026\/","title":{"rendered":"friday 2\/13\/2026"},"content":{"rendered":"\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-838cd1cc wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50)\"><div class=\"is-default-size wp-block-site-logo\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"200\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview.png\" class=\"custom-logo\" alt=\"Rookie Programmer\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview.png 280w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2023\/12\/cropped-F-removebg-preview-158x113.png 158w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><\/div>\n\n<nav class=\"has-small-font-size items-justified-center wp-block-navigation is-content-justification-center is-layout-flex wp-container-core-navigation-is-layout-a89b3969 wp-block-navigation-is-layout-flex\" aria-label=\"Navigation\"><ul class=\"wp-block-navigation__container has-small-font-size items-justified-center wp-block-navigation has-small-font-size\"><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/theroyalscode.com\/students\/h_francois\/author\/hfrancois\/\"><span class=\"wp-block-navigation-item__label\">blog<\/span><\/a><\/li><\/ul><\/nav>\n\n\n<p class=\"has-text-align-center has-secondary-color has-text-color has-link-color has-small-font-size wp-elements-c04d1eb07621d3e55b93fd705b6e6bac\">\n\tDesigned with <a href=\"https:\/\/wordpress.org\" rel=\"nofollow\">WordPress<\/a>\t<\/p>\n<\/div>\n\n\n\n<p>On this day i decided to sharpen up on css so i worked on a project of designing piano keys using div elements with key classes. This was a simple effective lesson that helped me understand css better and how to use it. i will include photos below<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"989\" height=\"289\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/8.png\" alt=\"\" class=\"wp-image-229\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/8.png 989w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/8-300x88.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/8-768x224.png 768w\" sizes=\"auto, (max-width: 989px) 100vw, 989px\" \/><\/figure>\n\n\n\n<p>the code that i used on the html side goes as follows<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body>\n    &lt;div id=\"piano\">\n      &lt;img class=\"logo\" src=\"https:\/\/cdn.freecodecamp.org\/platform\/universal\/fcc_primary.svg\" alt=\"freeCodeCamp Logo\" \/>\n      &lt;div class=\"keys\">\n&lt;\/body><\/code><\/pre>\n\n\n\n<p>and on the css side<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html {\n  box-sizing: border-box;\n}\n\n*, *::before, *::after {\n  box-sizing: inherit;\n}\n\n#piano {\n  background-color: #00471b;\n  width: 992px;\n  height: 290px;\n  margin: 80px auto;\n  padding: 90px 20px 0 20px;\n  position: relative;\n  border-radius: 10px;\n}\n\n.keys {\n  background-color: #040404;\n  width: 949px;\n  height: 180px;\n  padding-left: 2px;\n  overflow: hidden;\n}\n\n.key {\n  background-color: #ffffff;\n  position: relative;\n  width: 41px;\n  height: 175px;\n  margin: 2px;\n  float: left;\n  border-radius: 0 0 3px 3px;\n}\n\n.key.black--key::after {\n  background-color: #1d1e22;\n  content: \"\";\n  position: absolute;\n  left: -18px;\n  width: 32px;\n  height: 100px;\n  border-radius: 0 0 3px 3px;\n}\n\n.logo {\n  width: 200px;\n  position: absolute;\n  top: 23px;\n}\n\n@media (max-width: 768px) {\n  #piano {\n    width: 358px;\n  }\n\n  .keys {\n    width: 318px;\n  }\n\n  .logo {\n    width: 150px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>thankyou very much<\/p>\n\n\n\n<div class=\"wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-83af0991 wp-block-group-is-layout-flex\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group wp-container-content-9cfa9a5a is-vertical is-layout-flex wp-container-core-group-is-layout-2d729e81 wp-block-group-is-layout-flex\"><h1 class=\"wp-block-site-title has-medium-font-size\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\" target=\"_self\" rel=\"home\">Rookie Programmer<\/a><\/h1>\n\n\n<p class=\"has-text-align-left\">2020 Lomita Blvd,&nbsp;<br>Torrance, CA 90101<br>United States<\/p>\n\n\n\n<p class=\"has-text-align-left has-small-font-size\">Proudly powered by <a rel=\"nofollow\" href=\"https:\/\/wordpress.org\">WordPress<\/a> <\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-541a6b20\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-content-justification-right is-layout-flex wp-container-core-group-is-layout-35d1f3ed wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-fe9cc265 wp-block-group-is-layout-flex\">\n<p class=\"has-text-align-left\">Pages<\/p>\n\n\n<nav class=\"has-small-font-size items-justified-left is-vertical no-wrap wp-block-navigation is-content-justification-left is-nowrap is-layout-flex wp-container-core-navigation-is-layout-09588ffd wp-block-navigation-is-layout-flex\" aria-label=\"Navigation 2\"><ul class=\"wp-block-navigation__container has-small-font-size items-justified-left is-vertical no-wrap wp-block-navigation has-small-font-size\"><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/theroyalscode.com\/students\/h_francois\/author\/hfrancois\/\"><span class=\"wp-block-navigation-item__label\">blog<\/span><\/a><\/li><\/ul><\/nav>\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-541a6b20\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-fe9cc265 wp-block-group-is-layout-flex\">\n<p class=\"has-text-align-left\">Social<\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-32091062 wp-block-group-is-layout-flex\">\n<p><a href=\"#\">Facebook<\/a><\/p>\n\n\n\n<p><a href=\"#\">Instagram<\/a><\/p>\n\n\n\n<p><a href=\"#\">Twitter<\/a><\/p>\n<\/div>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-541a6b20\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Designed with WordPress On this day i decided to sharpen up on css so i worked on a project of designing piano keys using div elements with key classes. This was a simple effective lesson that helped me understand css better and how to use it. i will include photos below the code that i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-228","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/228\/revisions\/231"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}