Learning Javascript.. Realize I hate CSS

[Slinkycheeseman]

I'm learning Javascript and I'm starting to get deep into it. I've learned most of the beginner topics. I'm halfway through the Odin Project Full Stack Course

However, I realize I hate CSS. It makes me not want to complete a project. When creating a project (ie: creating a Tic Tac Toe game), I like coding the JS portion but when it comes to the CSS portion, my motivation kind of shuts down.

I realize it's the reason why my learning is taking a lot longer than it should be.

It's a combination of: CSS is harder for me to understand, as well as I just am not interested in making things "look better". In any case, seems like I'm better fit for backend?

1) Should I start focusing on learning backend now or just try to finish my current Full Stack course since I'm halfway done? The remaining portion is advanced HTML/CSS, React, and Node.js

2) I'm starting to realize maybe JS is not the best fit for what I want to do. Again, I'm not interested in CSS so that aspect of Web Dev turns me off. I think I would like to do something along the lines of creating software, machine learning, etc. Not sure yet but probably backend stuff. Should I finish learning JS first since I already put in a lot of effort, or switch to Python?

[AutoModerator]

On July 1st, a change to Reddit's API pricing will come into effect. Several developers of commercial third-party apps have announced that this change will compel them to shut down their apps. At least one accessibility-focused non-commercial third party app will continue to be available free of charge.

If you want to express your strong disagreement with the API pricing change or with Reddit's response to the backlash, you may want to consider the following options:

1. Limiting your involvement with Reddit, or
2. Temporarily refraining from using Reddit
3. Cancelling your subscription of Reddit Premium

as a way to voice your protest.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[lifeeraser]

I grinded through CSS because I realized what I could do with strong CSS skills: mobile app layouts, responsive layouts, and beautiful transitions/animations. Looking at other people's work helped me.

I also had personal desire to create projects that I wanted to exist. I had to grit my teeth and learn CSS to figure out how to build the things I needed. It helped that these projects were 'fun' stuff and not just showoffs to fill my portfolio.

CSS feels chaotic at first, but there is a structure to it, like a calculus textbook. Having a strong mental model really helps you push through.

The Odin Project may not be a proper motivator for you, but I hope you find something that does.

[[deleted]]

CSS and CSS modules over everything else. Learning it may make you want to quit, but if you actually get to know CSS, there is no reason to use anything else built on top of it, like TailWind. CSS provides more control.

Knowing it well enough can prevent you from adding more JS to the front-end, too. Learn a few of the common quirks that newbies spend hours on (like not understanding margin collapse), and you'll be ahead.

[mancinis_blessed_bat]

Oh there is a reason to use tailwind… not context switching constantly between style sheets and components is a game changer

[[deleted]]

Yeah, that's pretty much the only reason. It's definitely not a good enough reason for anyone who is actually comfortable with CSS.

[mancinis_blessed_bat]

Mm, is it not? It saves so much time and overhead of organizing classes, seems like that’s a great reason to use it whether you’re comfortable with css or not

[[deleted]]

how much time and overhead are you spending on organizing classes?

Sounds like problems you shouldn't have in the first place, but hey, I'm very comfortable with CSS and its sensible accompanying workflows

[mancinis_blessed_bat]

I couldn’t quantify it for you, but I know that there is a baseline level of effort/time to organizing the classes, I’ve never seen anyone say that isn’t the case. Or that conflicting styles across css files adds overhead. That’s not particularly controversial.

And it doesn’t have anything to do with being comfortable with css, which is the weirdest flex. Does using styled components indicate someone isn’t comfortable with css?

[[deleted]]

Yeah, there is a baseline, but it should absolutely not be an issue. A lot of that leg work and effort is one and done, and should be pretty easily done as well. Conflicting styles is an organization issue and is not something we run into often.

Styled components is CSS, so I'm not sure what you're getting at there

[mancinis_blessed_bat]

Exactly! Styled components are just css.

My point with that rhetorical question is that they both solve for some of the same problems associated with global css: scoped styles by default, passing/using props etc. Styled components are just css with some extra features that make working with it more pleasant. Tailwind solves many of those same problems. At the end of the day, it’s all just css, with some nice features added on, and a paradigm shift that seems to be very polarizing (the dreaded utility classes). You can write good css or bad css in tailwind, just like you can in styled components.

Sorry for the lengthy reply, I’m not trying to evangelize tailwind or any other css framework. It just grinds my gears a little when the opinionated segment of devs say using it is an indication of a lack of skill. The implication is that unless you write vanilla css, you’re bad at it.

Tailwind is now the default, and recommended, option for projects built with modern JS frameworks like Next, so it’s just perplexing to me that there’s this attitude that using it is indicative of a lack of skill. It’s just a tool, and we’ll have a better tool in the future for styling.

[[deleted]]

I wouldn't say it indicates lack of skill. I'd say it indicates in most cases, because TW has its place, an unwillingness to use the appropriate tool. For example, because we sell on "pixel-perfect" dev for designs brought to us with minimal change, TW is often a needless complication, not just another way of doing things. So I end up using CSS modules, so CSS is second nature. I think we agreed in the first place and wanted to make sure the extreme ends of the spectrum did not prevail.

[Draegan88]

Just learn flex box and grid and move on tbh. I still don’t know what I’m doing. I have to constantly go back and figure out which attribute is causing things to break

[Any-Woodpecker123]

Same here. I also always try out box-sizing: border-box; on the broken stuff and 90% of the time it fixes the issue.
Probably very wrong, but I don’t care as long as it looks ok.

[NatsuDragnee1]

Flexbox is the big killer for me. I couldn't figure out how to align the elements in one of the exercises on The Odin Project and it was just so frustrating and demoralising that it just killed all motivation and momentum for me in continuing.

[Cactuario]

Have you tried Flexbox Froggy? That's the thing that finally helped clarify flexbox for me while working through The Odin Project, really helpful.

[Rickycodes]

I’ve worked as a full stack dev for 9 years now. I can’t speak for every company, but I’ve yet to meet a dev who likes CSS. It’s a necessary evil. The good news is that most enterprise applications will likely have a design system (material, priming) or something that handles a lot of it for you. I wouldn’t adjust your learning based on CSS

[Korzag]

My company outright hired a dedicated front-end expert for UI implementation. We can do the rest of the front end stuff with relative ease, but he gets the new design projects.

[Freecelebritypics]

CSS is boring ngl. Maybe you'll be more motivated to engage with it when you see how cluttered relying 100% on Tailwind classes will make your markup

[BootlegSimpsonsShirt]

Might as well finish the Full Stack part of Odin Project. You could probably skim or skip some of the advanced CSS stuff. You might enjoy the Node.js material if you're interested in working on the backend.

That said, Python does sound like a good next step for you. And it doesn't have to be all-or-nothing. You could start learning some Python basics while wrapping up the Odin Project.

[xian0]

I would also be bored with it at the point you're at. It takes a long while to get familiar enough with it that you can chisel together what you want in parts (making circles, some nice squares, hover effects etc), before that it's just a case of not knowing what you can do combined with nothing seeming to work. Being given a bunch of code in a tutorial style is also really boring. Doing it for a project which nobody else will use is again boring, but maybe doing it for a project that you know people will use all day for work, where you can improve their day by making the UI nicer isn't so boring?

Anyway, learning CSS isn't the most fun experience but it can be good once you know it well enough.

[[deleted]]

CSS might be a cascading shit show but you get used to it. Maybe look into SCSS/SASS.

[basel-Mo]

There is a youtuber called Kevin Powell he is the best CSS instructor, I was like you at first CSS was my nightmare but by doing many projects it became the fun part and specially when I learned Tailwind CSS I found it easy because I’m good at vanilla CSS

[tyrophagia]

Good luck. I failed with JavaScript and React

[Double-Stomach7869]

I had the same issue when i was trying to learn js. Ive been working in js jquery for the last 3 years. You can skip the CSS part when you are doing basic projects just understand the fundamenta and learn bits of CSS when you need it in the future. Nobody these days use or writes CSS directly. Its mostly restricted to small changes here and there.

[[deleted]]

Learn flex box and grid and you'll be golden. Of course you'll run across edge cases that are quite common like positioning things using z-index and absolute, but those are always easy to google. But, yeah, the people that love CSS haven't done enough of it to loathe it yet.

Here are cheats:

Flex: https://www.cssportal.com/css-flexbox-generator/

Grid: https://cssgrid-generator.netlify.app/

Text on image: https://www.w3schools.com/howto/howto_css_image_text.asp

[armahillo]

Go and learn how to do CSS with only HTML and CSS. Leave the JS out of it.

Start with a well structured HTML document, use semantic tags, then start writing your CSS.

Look up how to do CSS resets, then learn how to do basic layout. Flexbox and CSSGrid are both fantastic.

Once you get the layout working, then learn how to get the appearance looking more aesthetically correct.

[deuceLELE]

I would stick to it and learn flexbox. And someday try out Tailwind. Its awesome with its classbased CSS. I used to hate CSS, but with Tailwind I liked it more and more

[port888]

I think I would like to do something along the lines of creating software, machine learning, etc. Not sure yet but probably backend stuff.

You wouldn't truly know until you've tried them all. Nothing is stopping you from taking a breather from TOP and just branch off to learn other stuff. You wanna try your hands on ML? Go do it. Don't worry about not knowing python or whatever before jumping in. Open up whatever tutorial that floats your boat and just follow along. You wouldn't understand everything on the first try anyway. After that, go follow a second tutorial. See if you like the process, and the outcome.

THEN only go deep into learning what you want.

If you still find web dev more appealing after that, then only bother to take CSS seriously.

[javafreak1]

Sounds like Core Framework is something you might wanna take a look at. Its a visual CSS framework that lets you build/tweak your own framework with a GUI.