I'm back to HTML and CSS after a month or so of not touching it. Having picked it up and put it down a few times in the last couple of years I felt comfortable with the syntax. Easy to learn and hard to master. Certainly the case with position: fixed/absolute. I'm sure that every time I figure out whether the parent or child is relative, W3C has an emergency meeting and switches it up just to spite me. Maybe I just haven't grokked yet.
We made personal landing pages today. Very dry stuff: "Hi I'm Will. Likes and interests: dog walking, programming, photography". A bit of a snooze-fest for the first day of the "creative" part of the bootcamp. I jazzed mine up a little to keep myself interested. The page content is absurdist nonsense but the links to my blog and github are live and legit. It's only half finished, barely responsive and various viewports do wacky things to the layout. I was mainly interested in contrasts of color and lack thereof as well as which elements worked well in a fixed position.
As you can see in the link below, my background image remains fixed whilst the splash of pink paint scrolls with the view (you may have to resize the browser to see this). The page is by no means finished, some parts are broken and I can't think of an elegent presentation for the h1 title yet. I'm going to work on it during the week and post again for a during and after comparison. Watch this space.
(https://willhmartin.github.io/profile/)
A lot of the afternoon was spent on a particular problem: my splashes of paint had background colors. My search query was "paint splash transparent background", however everything I downloaded looked like this:
which translated to this:
It seems that most sites are wise to the value of a transparent background and only give out samples, a little DRM'd freebie to get you hooked. Then I found a neat little trick with the Google Image criteria:
selecting "transparent" in tools under the color options returns only photos available and transparent! Knowing this would have saved me a lot of time trying to solve this issue in both CSS and MS:Paint, so let's hope it helps someone else (who against all odds knows less than me).
The design is fun, I don't think of myself as visually artistic but I like experimenting disparate elements together. Check back to see if I make any progress.
Top comments (0)