I need to train to become a front-end developer and become more familiar with CSS, so this was a stretch. I used the same theory with my process on HTML. Which is to learn the basics with the references course material so I can at least understand CSS better. But to lean into the online reference material and create my website based on fundamental understanding and stitching together code.
My example below formats the HTML and Java Script into a readable website. It won't win web designer of the Year, but it works and is better than flat HTML.
{{< tabpane persist=false >}} {{< tab header="Website code:" disabled=true />}}
{{< tab header="style.css" lang="css" >}} h1 { color: #fff; font-size: 64px; font-weight: bold; margin-bottom: 20px; }
body { background:#00A4EF; color: #fff; padding: 25px; font-family: sans-serif; }
hostname {¶
display: inline-block; font-size: 2em; font-weight: bold; background-color: #333; color: #fff; padding: 0.2em 0.5em; border-radius: 0.3em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0, 0.3); }
time {¶
display: inline-block; font-size: 2em; font-weight: bold; background-color: #333; color: #fff; padding: 0.2em 0.5em; border-radius: 0.3em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.3); }
ip-address {¶
display: inline-block; font-size: 2em; font-weight: bold; background-color: #333; color: #fff; padding: 0.2em 0.5em; border-radius: 0.3em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.3); }
result {¶
display: inline-block; font-size: 2em; font-weight: bold; background-color: #333; color: #fff; padding: 0.2em 0.5em; border-radius: 0.3em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.3); }
visitor-count {¶
display: inline-block; font-size: 2em; font-weight: bold; background-color: #333; color: #fff; padding: 0.2em 0.5em; border-radius: 0.3em; box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.3); } {{< /tab>}} {{< /tabpane >}}
This is how the web page looks.
