{"id":232,"date":"2026-02-27T20:34:11","date_gmt":"2026-02-27T20:34:11","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/h_francois\/?p=232"},"modified":"2026-02-27T20:34:11","modified_gmt":"2026-02-27T20:34:11","slug":"friday-2-27-26","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/h_francois\/2026\/02\/27\/friday-2-27-26\/","title":{"rendered":"friday 2\/27\/26"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-contrast-color has-text-color is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-0a31dee0 wp-block-group-is-layout-flex\" style=\"min-height:40vh;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--50)\"><div style=\"margin-bottom:6px\" class=\"is-default-size aligncenter 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\n<p class=\"has-text-align-center has-medium-font-size wp-block-paragraph\">Proudly powered by <a href=\"https:\/\/wordpress.org\">WordPress<\/a><\/p>\n\n\n\n<ul class=\"wp-block-social-links has-normal-icon-size is-style-logos-only is-nowrap is-layout-flex wp-container-core-social-links-is-layout-d48d6787 wp-block-social-links-is-layout-flex\"><li class=\"wp-social-link wp-social-link-facebook wp-block-social-link\"><a href=\"#\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Facebook<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-twitter wp-block-social-link\"><a href=\"#\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Twitter<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-wordpress wp-block-social-link\"><a href=\"#\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">WordPress<\/span><\/a><\/li><\/ul>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">today i designed a parent teacher conference form using html and css today my plan was make clear input fields so parents and teachers can easily provide information such as contact name and info things of that sort. Using CSS helped me to create a clean and organized layout with readable labels spacing and subtle visual cues that guide users through the form using a thoughtful design choice like grouping related sections help make the form easy to use and accessible to all users i will add photos and code below<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"537\" src=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/1.1-1024x537.png\" alt=\"\" class=\"wp-image-233\" srcset=\"https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/1.1-1024x537.png 1024w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/1.1-300x157.png 300w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/1.1-768x403.png 768w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/1.1-1536x806.png 1536w, https:\/\/theroyalscode.com\/students\/h_francois\/wp-content\/uploads\/2026\/02\/1.1.png 1900w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form>, &lt;fieldset>, &lt;legend><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">main elements i used to code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  background-color: MidnightBlue;\n  color: whitesmoke;\n}\n\n.container {\n    background-color: #ffffff1a;\n    width: 80%;\n    max-width: 600px;\n    border-radius: 10px;\n    margin: 20px auto;\n    padding: 10px 20px;\n    box-shadow: 0 5px 15px black;  \n}\n\n.center {\n  text-align: center;\n}\n\n.description {\n  font-size: 1.2rem;\n}\n\nfieldset {\n  border: 1px solid gray;\n  border-radius: 5px;\n  margin: 20px 0;\n  padding: 20px;\n}\n\nfieldset legend {\n  font-size: 1.3rem;\n  font-weight: 600;\n}\n\nlabel {\n  font-size: 1.2rem;\n}\n\nlabel:not(.contact-method) {\n  display: block;\n  margin: 10px 0;\n}\n\ninput:not(.contact-method-radio-btn),\ntextarea {\n  background-color: #ffffff1a;\n  width: 95%;\n  border: 1px solid gray;\n  border-radius: 5px;\n  padding: 10px;\n}\n\ninput,\ninput::placeholder,\ntextarea {\n  color: whitesmoke;\n}\n\n\n.contact-method-radio-btn {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid gray;\n  vertical-align: bottom;\n}\n\n.contact-method-radio-btn::before {\n  display: block;\n  content: \" \";\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  transform: translate(3px, 3px) scale(0);\n  transition: all 0.3s ease-in;\n}\n\n.contact-method-radio-btn:checked::before {\n  transform: translate(3px, 3px) scale(1);\n  background-color: lightgreen;\n}\n\n.submit-btn {\n  cursor: pointer;\n  background-color: royalblue;\n  color: whitesmoke;\n  border: none;\n  border-radius: 6px;\n  padding: 12px 20px;\n  font-size: 1.1rem;\n  display: block;\n  margin: auto;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">all of the css that was used for the project<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-831b2db5 wp-block-group-is-layout-flex\"><div class=\"wp-block-site-logo\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"14\" 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: 20px) 100vw, 20px\" \/><\/a><\/div>\n\n<p class=\"wp-block-site-title has-medium-font-size\"><a href=\"https:\/\/theroyalscode.com\/students\/h_francois\" target=\"_self\" rel=\"home\">Rookie Programmer<\/a><\/p>\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:20%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-cf54d0a6 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-d8dce8eb wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-medium-font-size has-body-font-family\" style=\"font-style:normal;font-weight:600\">About<\/h2>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bce0c455 wp-block-group-is-layout-flex\"><nav style=\"font-style:normal;font-weight:400\" class=\"has-small-font-size is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-bce0c455 wp-block-navigation-is-layout-flex\" aria-label=\"About\"><ul style=\"font-style:normal;font-weight:400\" class=\"wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation\" aria-label=\"About\"><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Team<\/span><\/a><\/li><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">History<\/span><\/a><\/li><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Careers<\/span><\/a><\/li><\/ul><\/nav><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-d8dce8eb wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-medium-font-size has-body-font-family\" style=\"font-style:normal;font-weight:600\">Privacy<\/h2>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bce0c455 wp-block-group-is-layout-flex\"><nav style=\"font-style:normal;font-weight:400\" class=\"has-small-font-size is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-bce0c455 wp-block-navigation-is-layout-flex\" aria-label=\"Privacy\"><ul style=\"font-style:normal;font-weight:400\" class=\"wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation\" aria-label=\"Privacy\"><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Privacy Policy<\/span><\/a><\/li><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Terms and Conditions<\/span><\/a><\/li><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Contact Us<\/span><\/a><\/li><\/ul><\/nav><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-d8dce8eb wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-medium-font-size has-body-font-family\" style=\"font-style:normal;font-weight:600\">Social<\/h2>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bce0c455 wp-block-group-is-layout-flex\"><nav style=\"font-style:normal;font-weight:400\" class=\"has-small-font-size is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-bce0c455 wp-block-navigation-is-layout-flex\" aria-label=\"Social Media\"><ul style=\"font-style:normal;font-weight:400\" class=\"wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation\" aria-label=\"Social Media\"><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Facebook<\/span><\/a><\/li><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Instagram<\/span><\/a><\/li><li class=\"has-small-font-size wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Twitter\/X<\/span><\/a><\/li><\/ul><\/nav><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:0\">\n<p class=\"has-contrast-2-color has-text-color has-link-color has-small-font-size wp-elements-fb1dc8a358d6c5ee50b4614eb09d35bb wp-block-paragraph\">\n\t\tDesigned with <a href=\"https:\/\/wordpress.org\" rel=\"nofollow\">WordPress<\/a>\t\t<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Proudly powered by WordPress today i designed a parent teacher conference form using html and css today my plan was make clear input fields so parents and teachers can easily provide information such as contact name and info things of that sort. Using CSS helped me to create a clean and organized layout with readable [&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-232","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/232","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=232"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/232\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/posts\/232\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/media?parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/categories?post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/h_francois\/wp-json\/wp\/v2\/tags?post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}