cubidian.me web development

I broke all the navbar links except the home link since those pages haven’t actually been made yet, but earlier the links caused weird problems without href, so I had decided to create all the placeholder files. I deleted all of the placeholders as well.

I replaced the solid background with a real gradient, and I replaced the horizontal rule that was glued to the top of the footer with border-top.
I also learnt about pseudo-classes so that I could use :hover and :focus on navbar links to change the text-decoration-style from underline to wavy!
Lastly, I greyed out the navbar link that the user is already on so that they know what page they’re on as well as not pressing it and reloading their page, which would reset scroll progress.
Again, colours look better when viewed on the website.

I know I said I would devlog more often… but oh well.
This time, the website underwent a massive appearance overhaul! See for yourself.
I fixed the navbar, learnt how to make a sticky header, flexboxes and gradients (background), and chose a global colour palette that doesn’t look jarring!
I also made it a bit more robust so that when you zoom in/out the whole layout doesn’t just break, but I plan to use @media to reference specific screen sizes eventually to make it even better.
I’d say I really enjoyed this session.

Also, the screenshot doesn’t do justice to the website since it’s so faded out, go have a look at the website!

Added absolute paths to links which may not originate from a file in the root of the website, and fixed sticky footer so that it isn’t scrollable however much you zoom in/out. Also gave the footer a bit more room!

I added a navbar so you can get around the site quicker (with placeholder pages since for some reason without them the list which I explicitly state not to have bullet points decides to have them anyway).
I also made it so you can’t scroll past the footer and attached 2 horizontal rules to either side of it by learning about viewport width/height. I also had to wrap all of the content relevant to each page uniquely with a element for accessibility reasons.
I gave the site a minor appearance overhaul in the css, and replaced all em units with rem so that I won’t have weird scaling issues pop up later.
Additionally, I learnt about and used different list types, and variables to help reduce css value redundancy.
I also realised that I won’t be needing a separate font for highlighted text (because it would be quite a mess)!

For my next log i’m planning to involve either animations, images, flexboxes (which will let me fix my navbar), gradients, or all of them!
I also plan to devlog more often.

P.S. it would be kind of you if you didn’t judge me for the amount of time it takes me to do simple things, i’m working on a phone, and there’s no good editors or live preview on phone . . .

I created a 404 page and also a page filled with multicoloured boxes.
I made these pages by learning what div, padding, border and margin is, as well as how to create custom classes.
I linked the coloured boxes page to the home page, and I added all of the fonts I was loading in into the css document so I didn’t have to do that in every html page.
What I mostly did in this time was read up on mozilla’s MDN documentation and tested and deleted things to see how they worked, and get up to speed on best practices for how to write basic html and css.

I started this project by purchasing a domain (cubidian.me) and configured it on the domain dashboard (namecheap) to get it connected up to my github repo, and setup github actions to automatically deploy to the website every commit.
I also started on the website’s code itself by getting myself the jetbrains webstorm IDE and learning the bare basics of html and css, but I also messed around with the box-shadow css attribute.
I also designed a favicon on adobe illustrator, and I chose appropriate fonts for different elements of the page from google fonts and embedded them.
By this point I decided I wanted my code to be licenced under the MIT licence, and site content under CC-BY 4.0 (although I don’t have any original content on my site just yet).

TODO: Find a font appropriate for highlighted text