Well actually, the forum won’t let me make this post with less than 20 characters. I have sunk so much time into CSS and overall I find having to use it rather annoying and not fun at all. I’d rather deal with JavaScript and its type issues, bloat, and security implications to be honest. (okay not really, or I wouldn’t have invested so much time and painstaking hours into refining my CSS abilities). Initially, I started my CSS journey out learning CSS2 on CodeCademy in 2016 or 2017 (I can’t remember exactly tbh, but CSS3 came out soon after I finished the CodeCademy course). I didn’t actually try to implement my knowledge until 2019. Mostly I filled in the gaps with the notes I took and W3CSchools. My gaps turned out to be huge since I knew an outdated version of CSS that I’d never even used for several years, and so I ended up finding Free Code Camp. That helped, but it wasn’t until I found Mozilla’s Web Docs that I really learned a lot. Anyway, even after that I find CSS frustrating to use and really honestly boring. I think I will avoid front-end development throughout my career at all costs.
I’ve looked at other places that do CSS for you such as bootstrap. I all but dismissed that almost immediately as I figured it would take me about as much time to figure it out as it is taking me to figure out CSS. I’ve also seen extension languages like SCSS, SASS, and Less; but, ofc, these are just extension languages and require a lot of background knowledge about CSS anyway. Finally, I found simple.css. It’s ugly, plus I was already pretty deep into my design.
This is mostly a rant, but if someone has helpful suggestions, that’s ok. Keep in mind that this is a rant though.
In order to make any modern UI it takes a non-insignificant amount of time and planning. This is why frameworks are so popular: Tailwind, Bulma, Skeleton, Pure, et cetera. They save you time at the cost of being opinionated.
It’s still very important to understand how all the pieces fit together so you can actually comprehend the design choices that frameworks make.
Lastly, there is no beating that special feeling when you’ve made something great all your own the precise way you want to do it.
CSS is pretty bare bones. I would note down the basics then give some of the other flavors a try. SCSS is real popular, LESS is my personal favorite.
My frustrations come from an absolute inability to design anything. If you asked me to make a website I would make it “brown” and call it good enough. I understand all the CSS concepts and if given a mock-up I could throw something together, but I just cant grasp design.
I actually love CSS (mainly because I still remember the days of putting styling directly inline with your HTML waves cane). But I can relate to being frustrated when an idea I have doesn’t immediately lend itself to working in the browser.
Like any artistic medium, you kind of just have to suck it up and learn it’s idiosyncrasies to really master it. Usually during that process you also end up re-wiring your brain to ‘think’ in ways that are supported by the medium as well; so it gets easier over time to know what’s possible and what’s not.
Lemme just say that I am honored that you posted in my thread xD.
And yeah, I am getting better at it. There’s a huge difference between my first attempt with CSS on this website and my current markup. I am also noticing myself get better turning what’s in my imagination into reality.
One tool that I discovered to be extremely useful is CSS flexbox. I think it’s my favorite CSS tool. I wanted to try to use CSS Grid a little more, but I am not good at CSS grid.
Here’s my design so far. I didn’t show the rest of it because it has my full name. I am not sure that I like the heading anyway. I tried to look at templates for website portfolios and other people’s portfolio websites’ to get ideas.
Also, I have basically no budget since it is personal. I apologize for the photo’s resolution and quality. I took that with my phone’s camera. It really isn’t necessary, but I wanted to use that because that is a program I wrote (in C++).
Oh yeah, I do not have a link to give right now because everything is stored on my local computer right now since it isn’t ready for production yet. Currently, I am working on the contact page. I’ve already made the backend for that, but what sparked this rant was the Form’s refusal to listen to my attempts to position it with CSS FlexBox.
Oh and one odd thing is that I find it hard to style responsive design. Basically, I am trying to use a trick I managed to pull off in my last iteration’s responsive document. This trick works 100%, but it’s broken with Firefox’s responsive design mode on the desktop. Basically, on mobile, a tap of the finger can be denoted with the :hover selector. I am using this to “expand” the mobile version’s hamburger menu. One of my goals is to have it be fully functional without JavaScript, because personally I block JavaScript as much as possible.
Using CSS is difficult because you may end up hurting yourself without even knowing why and what’s going on. That’s why a lot of people don’t write pure CSS.
As long as you’ve mastered the basics you’ll be able to avoid getting hurt.
I recommend using this for now as it can take away the immediate annoyance: http://getskeleton.com/
Knowing CSS can be very helpful when working in teams with designers and you’ve almost figured it out, flex is the way, only thing left is @media queries
Yeah, this is the real nightmare of web development imo; there are so many phones and individual browsers it can be difficult to get them all to behave correctly (or at least degrade gracefully).
Also, while it’s a worthy goal to try and make a website that doesn’t require JS, relying on :hover is probably not a wise idea for something as valuable as your site navigation-- phones and touch devices will always interpret this differently. Unfortunately, afaik, this means using Javascript for “onClick”. The closest thing I’ve seen to mimic a click/touch event in standard HTML/CSS is a gross little ‘hack’ using the :checked selector, but that’s not really the use case it was designed for.
If you want to understand how and why stuff like SASS works you need to take an hour or two and deep-dive into CSS selector specificity. When you get that you will have superpowers and it will all seem much less idiotic, especially compared to Ye Olde times when <font color="red"> was the only way to make text red.
Now for learning layouts and such there’s this new thing called CSS Flexbox which was made standard a couple of years back. Now web developers can enjoy luxuries like aligning a DOM element vertically centered in another element without spending literally whole days copy-pasting black magic snippets from the internet.
So to sum up: Stop worrying and learn to love the bomb.
Yeah, because the WSGI server isn’t running. I have to build a systemd hook for it, but I am not ready for production yet so it honestly hasn’t been a priority xD. At any rate, even if I fix the 502, nothing will show up. I know a 502 looks bad, so I may just remove the link(s) in my bio for now.
There’s something that’s going to go in that “wasted space”; and that is why it is there. sorry I didn’t think to point this out. I guess I expected you guys to read my mind lol.
I think CSS is neat, until I just need to do a simple thing like horizontally and vertically center a div within another div, and I have to re-learn it again as if I haven’t done that before several times.
It looks decent, but I would probably work on refining the typefaces and making them feel more thematically cohesive. I am digging the navbar the most, the mint green + monospace style font gives off a programmer-vibe that seems appropriate for a personal portfolio like this. In comparison, the pale pink serif font of the header feels like a big contrast and I’m not sure what that aesthetic choice is supposed to communicate-- it’s fine and perfectly legible, but not really cohesive with the established style in the navbar.
I decided on the pink font so that it stands out against the picture’s background. I used https://coolors.co to choose my website’s colors. I looked into color theory a little bit, but I am far from an expert. I kinda like my color choices, tbh, but I am willing to accept others’ views, opinions, and advice. As for the font, I merely wanted to make the other font stand out. The one I used in the navigation bar is my favorite font on the website, so I wanted to find a serif font to use on the headings because I thought that would achieve this goal. If you think I need to make everything all one font, then I can do that. Or if it is okay for me to use two different fonts, what should I look for for Heading tags?
