A simple HTML & CSS refresher.
This week I spent some free time that I had refreshing my simple HTML skills to renew my homepage. I gave myself the challenge of strictly using HTML and CSS for this website and (however painful this may sound) without javascript to see how far I could get in as little time I could. It actually went surprisingly quickly and I've detailed the simple struggles in this post.
Overall, it took under 10 hours to build up the theme and base of the website. After that, I spent some time writing up the actual content (the easy part) which took about 3-4 hours of my time. In the end, I am quite pleased with the result also as it is generally aestheically pleasing in both Firefox and Chrome. My last (and first) webpage was much more rugged, very basic, and had many resizing problems (
this one). There are a couple links to some older projects on that site also.
The majority of the webpage was very simple to make. The hardest part was creating a sidebar that stayed still while another portion of a screen could be scrolled. The solution boiled down to using two wrappers, one for all the content, and the second for sidebar. The second wrapper contains within it an element which prevents a scroll bar from being formed. These three components together enable the sidebar to be fixed in place without being scrollable. Some CSS3 is also used to get a FlexBox. You can check out these components by inspecting the page on your browser.
Another problem that I had was dealing with resizing issues when I switched from a page which had a scrollbar to one which didn't. This caused the sidebar to sway back and forth. I overcame this problem by forcing the scrollbar to display in the
html
element. This actually caused an odd side-effect that created scrollbars in the inner elements of
wrapper
. The sidebar was still fine, but everything else had a scrollbar. The solution to this ended up being that the
body
element had to have it's scrollbars disabled so that every other element could have theirs disabled.
I can't say there were many other problems but in the progress of building the site, a lot was learned about using CSS. The main feature I discovered was the CSS transition property which was a lot of fun to play with and is used in the sidebar, the links, and the buttons at the bottom of this page. The old website definitely does not compare to this one but I can't say this website is free of problems. For one, it doesn't look well on mobile devices and I hadn't taken that into consideration when I started the website. However, this problem does give me the next post that I'll be writing.