{"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-f306f087 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\">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-65900438 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>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>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>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-28f84493 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-fe9cc265 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-e5edad21 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-353c4f5a 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-ea0cb840 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-ea0cb840 wp-block-navigation-is-layout-flex\" aria-label=\"About About\"><ul style=\"font-style:normal;font-weight:400;\" class=\"wp-block-navigation__container has-small-font-size  is-vertical wp-block-navigation has-small-font-size\" 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-353c4f5a 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-ea0cb840 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-ea0cb840 wp-block-navigation-is-layout-flex\" aria-label=\"Privacy Privacy\"><ul style=\"font-style:normal;font-weight:400;\" class=\"wp-block-navigation__container has-small-font-size  is-vertical wp-block-navigation has-small-font-size\" 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-353c4f5a 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-ea0cb840 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-ea0cb840 wp-block-navigation-is-layout-flex\" aria-label=\"Social Media Social Media\"><ul style=\"font-style:normal;font-weight:400;\" class=\"wp-block-navigation__container has-small-font-size  is-vertical wp-block-navigation has-small-font-size\" 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\">\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}]}}