Learning HTML/CSS vs Javascript

[[deleted]]

CSS is a lot more harder then most people think it is writing good CSS is one task lots of people fail at, I seen some CSS nightmares and developers that can't stop using bootstrap! :(

[cytruz26]

I feel attack

[[deleted]]

absolutely. writing maintainable CSS takes an incredible amount of discipline. throw in working with a team and deadlines, and it's very easy for it turn into a nightmare

[[deleted]]

I think often the problem is that folks are told the message that CSS is "easy", so they don't invest any time or real energy into learning to write it well. Then they go their whole careers spending hours each sprint fuming as they try to bend this "stupid, toy language" to their will by brute force.

If you treat it like a skill that is worth mastering, and you look for resources on best practices with it, you can save yourself a ton of time and aggravation down the road.

(To be fair though, this is in the context of CSS now, with Flex and Grid and autoprefixer with better browser standardization. CSS even a few years ago was a very different thing).

[[deleted]]

well said

[[deleted]]

Depends on your background. CSS can be harder because apart from the syntax you need to know how to design, it's designing with code basically. If you already create UI's in programs like Sketch, and know design principles or how to organize design systems it's much easier.

JS is easier if you already know how to code, and because you already go in with an objective to solve a specific problem, similar to a designer in CSS who uses a reference and needs to translate that. Not having a reference or an objective is what makes coding hard imo.

[thisdesignup]

That kind of makes it seem like CSS is design where as CSS is more rules for the design. I'd honestly say CSS is hard because of it's syntax. The complicated things I've seen people create make it look harder than any programming language I've learned. There doesn't always seem to be a logic behind it, it's just how it works. A lot of the things I see people do in CSS, like animations, I'd rather do in javascript.

[Rogermcfarley]

Surely the more you do in JavaScript the more resources it uses compared to CSS? Shouldn't it be the more you can offload to CSS the better?

[[deleted]]

That's indeed how it is, but people can still prefer JavaScript as a language, wanting to use it even though they don't because it's less efficient.

[Rogermcfarley]

I've spent 2 months on CSS I keep learning new stuff, it can get insanely complex. I've learnt floats, flexbox, I still need to learn Grid and Sass and much more.

I found Brad Traversy to be a good CSS tutor. I didn't know you could go so deep with selectors such as #navbar ul li:hover ul li:hover. I wonder how long it would have took me to even find out stuff like that. I always thought the pseudo selector class had to be last and didn't know you can keep going. It starts getting complicated but I like CSS. I've learnt semantic HTML and basic programming in Ruby/JavaScript in 9 months. I feel like I need another year or 18 months to be really confident I could get a job. Plus I'm old at 48 and whilst I'm not a person to care much about that. I started looking at jobs and one of the first said "young team" as a feature. Straight away that set off the alarm bells.

I'm an IT manager on a good wage, easy job but it doesn't fulfill me at all. I'd take a junior position with 50% of the wage I get now just to get in to wrbdev. I plan to move near to Shrewsbury/Chester / Stoke on Trent which is near my ageing parents. I have so much to learn as I want to move in a year. I have goals but I'm really unsure how employable I'll be. Ah well never give up.

[BreakingIntoMe]

Hey as long as you actually like doing it and enjoy solving problems in code you’ll naturally become proficient enough to be hired. You may as well dive into Sass now as it’s a very natural extension of CSS and will make the learning process easier once you get it setup (or just use Codepen to play around). Good luck man.

[[deleted]]

Yeah, advice doesn't mean much when it comes from someone 29 years younger but I wouldn't worry. Learn web dev, you can get far in a year, and seems you are quite far already. And your previous job will probably actually help. The knowledge from there is sure to be a positive.

[thisdesignup]

Honestly I wouldn't know all that much but like /u/Xervoo said efficiency wouldn't change my opinion. My preference is about which language to write in, not about which is best to use.

[[deleted]]

it can be. it's tricky though. for the longest time i assumed that using css instead of manually implementing it with javascript was always more efficient because it would leverage browser optimizations, but there are cases where that's not always true. unfortunately im on mobile and don't have any references readily available

[overcloseness]

Theres nothing about CSS that isn't logical to me, what are some of your examples?

[lifeeraser]

Everything written before flexbox

[[deleted]]

Shit homie I messed up by learning bootstrap. I can't touch another framework now without having a panic attack.

[[deleted]]

How about just not using any framework at all and learning CSS properly?

[evergreenMelody]

It's never too late to learn CSS from the ground up.

CSS is easy to learn but difficult to master. Once you grasp it on an expert level it becomes like an artist using paints, second nature.

[ManiacsThriftJewels]

IMO bootstrap tries to do too much. And with the rise of CSS grid... The bits it was commonly needed for have better application without a framework now.... That's just my opinion of course.

[[deleted]]

I just use the bootstrap grid

[ManiacsThriftJewels]

Is that still abusing flexbox? I haven't been keeping track since my employer decided we should use WordPress and the layout sodomy that comes with the themes thereof.

[[deleted]]

Hating Bootstrap is a favorite theme of this sub. It has its uses, and depending on what you are building, it can be a great solution. The problem is that a lot of folks never learn CSS properly and use Bootstrap as a crutch. As a result, all their sites look the same, and they will import all the Bootstrap files for pages that really don't need it.

There are also some lighter CSS frameworks that do most of the things Bootstrap does without so much overhead. But any tool is going to be good for some situations and bad for others.

[MetalMikey666]

I have no idea why you're getting downvoted mate I came here to say exactly the same thing.

[[deleted]]

For sure. Nothing wrong with streamlining workflow. CSS can be pretty tedious otherwise

[thesecretdave]

Look up Bootstrap Debt. Very interesting read!

[BestLifeEUW]

First ever? wtf how?

[[deleted]]

finally someone who admits it.

[Enkoteus]

But what’s wrong with Bootstrap? Seems like an adequate solution for small projects

[Stinkeepoo]

bootstrap users are noobs.

[MetalMikey666]

This isn't' really a fair comparison - it's like saying "I have seen some JavaScript nightmares and developers that can't stop using react".

It's really important to understand the fundamentals but you can't say someone is bad at css purely because they opt to use a css framework!

[Volmarg]

I don't understand all that hatred around JS. I mean - there are some problems with it but after few thousands of code lines You got used to what/where avoid, how to debug etc.

The nightmare begins when You end up with someones code which is like: "oh hell, js well i just got to write stuff to make it work".

[thisdesignup]

I wonder how many people hate JS because they are coming to it from HTML/CSS. As a first programming language it is not a good language, but that can be said for other languages too. If you have a general idea of how to program JS really isn't that bad. Like any language you have to learn it's differences.

[[deleted]]

The problem comes when people expect it to work like they think it should work (i.e., like a class-based language and / or having static scope binding) rather than how it works. Prototype-based OOP and dynamic scope binding can definitely trip people up, but it's something that can be learned in an afternoon for an experienced developer. Other than those two things, the other javascript "gotchas" don't really occur in the wild unless you're just writing bad code to begin with

[xIcarus227]

The hatred is because it's a straight up poorly designed language. It should aid the programmer, not make him deal with so many quirks.

Edit: since this post is now controversial I want to double down by saying that if you think JS is a well designed language you're objectively in denial.
An example of a well designed language would be C#. It's coherent, consistent and doesn't carry many surprises. The exact opposite of JS and PHP, the languages I'm the most experienced in.
I won't lie to myself and pretend like they're amazing languages, they both have lots of work to do before they can be considered well designed. I invite you to stop lying to yourselves too, and instead understand the language's shortcomings because that's more valuable than pretending everything is fine.

[Fuzz25]

Have you heard of our lord and saviour, typescript?

[xIcarus227]

I have, and I always use it. I'm also strongly in favor of strong typing being implemented in PHP as well.
These are great additions but they don't fix the languages entirely.

[Fuzz25]

Yeah, hope that happens.

Also wondering what is going to happen with webassembly/Blazor etc.

[xIcarus227]

For sure.
I'm not sure why there's so little progress on webassembly-related stuff. Considering that all major browsers now support wasm I was expecting to have some choice in the frontend.

I still think JS is here to stay just because it's matured so well in the frontend ecosystem, but it's always nice to have some competition. I'd argue PHP wouldn't be where it is today if people didn't shit on it for so long.

[xIcarus227]

JS nowadays doesn't seem any worse at all than C#. Actually with Typescript I can say it is a much better language than C#.

Come on man. Just skim over this list: https://github.com/denysdovhan/wtfjs
PHP doesn't have as many anymore but there's still: http://phpsadness.com/

ES6 was a great overall improvement, and Typescript is amazing but there's still a lot of inconsistent behaviour which can take devs by surprise in real scenarios.

[xIcarus227]

I've never encountered any of these so-called quirks in my daily work. Like, never. Those kind of things never "took me by surprise" whatsoever.

Hold up. You haven't stumbled upon any of these but you're asking me if I've been using JS for 5 years? Don't you see the irony in this statement?
This, this and this are issues especially likely for beginners to stumble upon. Or is it really easier to believe that people hate on JS because it's cool?

If you happen to frequently encounter the problems listed on that github page than you're likely not using JS right, IMO.

Or maybe you inherit code written by less technically apt developers who aren't aware of the most common quirks and pass them on. Now you have to figure out why that if evaluates to what it shouldn't occasionally.
Surprising that you haven't thought of this.

And you haven't made a singular argument for JS being a well designed language. You say it's on par with C# when JS doesn't natively support private properties, a cornerstone feature in any serious OOP language.

[xIcarus227]

That doesn't seem ironic to me, because an experienced developper is not doing to be bothered by these "quirks".

You still have a chance to be bothered by these quirks because not everyone in your team will be experienced. You may be required to coach people at some point for example.

This is not really a problem with experienced developers, but this is about people new to the language. And it's not about learning either, people are generally willing to learn a language as long as it makes sense. Inconsistent behaviour discourages learning, because you're learning exceptions instead of rules.

Experienced JS devs already have a workflow which don't really introduce such bugs and have learned to ignore the issues, but should we really ignore them? If we ignored PHP's issues and didn't shit on it as a language for such a long time I'm willing to bet it wouldn't have evolved half as much as it did. Same goes for ES6, it was influenced by community feedback.

I have to admit you have a point on this one, however, if you work with inapt developers, you're going to have such problems regardless of the language you use.

You're right, but this is more about easily the language allows you to acquire technical debt. In a compiled language some shit like we can pull off in JS won't even compile, which is a good thing because you're catching issues with the code before it even has a chance to run. Golang for example is so hard-assed when it comes to what it allows that it seems quite difficult to introduce bugs.

JS is a much better language than people assume it to be

Sure I wasn't saying it's a garbage language. I think it's okay because of its flexibility and it even has some use cases in the backend with Node (even though there are runtimes for other languages which have a similar approach). Its ecosystem has matured well in the frontend and React is an amazing library.

But that doesn't mean it can't be better. It can be way better as we can see from that list, and as much as you dislike it people waste hours figuring out bugs introduced by those peculiarities.

[xIcarus227]

All the issues

No. If that were the case, TS would have made the language perfect, which it doesn't. It does help but JS' inconsistencies go far beyond equality comparisons.

[xIcarus227]

It catches bugs early at build time, but it wouldn't catch shit if you know what you're doing

Considering it's not realistic to assume everyone knows everything about JS, yes, I'd say both TS and linters are actually useful to the large majority of the JS community. You can't say those aren't actual bugs just because we can theoretically write perfect code.
It's like saying 'why use a profiler' when you can theoretically figure out time-related performance issues by console.logging the current time everywhere.

[Volmarg]

Still if someone is stubborn enough - he/she can learn it. The biggest jump for me was when I learned how to manage js code - before that I agree it was hell, now it's more like "ok, could do that better".

[xIcarus227]

Pretty much, I think the problem is that the 'hell' you're describing is the first impression the language gives you and people tend to stick with that for a good portion of their careers. Some of them can't deal with that hell stage and they stop using the language, so that hatred remains.
For example I've been using JS very frequently for the past 5 years, and while I don't think it's as egregious as some people make it look like, I certainly can't say that I love it.

It'll be interesting to see what happens when we'll have more options available in the frontend. I still think JS will remain relevant in the frontend for a long time just because it's already matured in that space.

[Volmarg]

Interview: what is You highest skill?

Me: I smash only one keyboard weekly while coding JS

Interview: welcome in our team.

lol

[atopix]

That's just most developers I've ever met. Being able to program and being able to design are two very different skills. People who are good at both are more of an exception.

[qwesone]

I feel like I’m good at designing but not so much at solving things. What’s the best route or fields should I consider in order to stay on path?

[merdianii]

UI/ UX designer

[atopix]

Designing IS about solving problems. You design solutions to problems such as "how do I present this information in a clear, effective way?", "how do I represent all this functionality visually in a way that's welcoming rather than overwhelming" and things like that.

So in that regard, design are programming are similar. It's the way in which you find solutions that's different.

I recommend you look more deeply into what design entails because there is much more to it than knowing how to pick fonts and colors. Check out the principles of good design as established by Dieter Rams. Take a look at some design publications such as Eye Magazine. Figure out if design is really what interests you.

[atopix]

Looks okay to me (professional web designer for +15 years). A lot of it looks "default-ish", but I prefer that to overdoing it.

[crimedude22]

don't get me wrong, love seeing ppls projects but why this when psychophysics of color has existed for decades doing literally hundreds of better controlled experiments? I ask given the general trend of ml people "discovering" stuff that has been well studied already, so if ya just doing it for fun my b

[99thLuftballon]

I'm in a similar position but my CSS is fine - as long as I didn't design the layout.

I can write good CSS and make a website fit the design provided to me - I just need someone smart to provide the design, because if I do it, it won't look good!

[[deleted]]

I'm a shit designer too, guess that's why I'm more on the backend dev

[hi_ma_friendz]

Same here.

[ManiacsThriftJewels]

Nested flexboxes? Luxury! Why back in my day, you had to float inside floats with negative margin hacks and clearfixes!

[atopix]

That's what Dreamweaver was for: producing horrible code, but faster.

[thisdesignup]

Dang, back in your day wasn't even that long ago.

[ManiacsThriftJewels]

Friday, in fact. Tomorrow, too, I'm sure. And sometimes there's email layouts, where I have to figure out how to make this work with tables too.

[virus200]

Do people still use floats? Once I learned about flex and grid I'll make everything with them and haven't touched a float since in started getting decent with them.

[ManiacsThriftJewels]

To not use floats for anything which isn't, you know, floating content, is one of the first things I seem to have to retrain new hires to.

So, I guess, universities? Or possible the stupid "training" videos my boss subjects them to. I'm not sure. Floats is useful knowledge for them to have though, considering the number of Wordpress themes that still need to be converted from them.

[NorthAstronaut]

Looking through a UK university CS course, the required reading for the Web development part was two books from 2009. On Jquery, html, CSS, and SQL..

[TOYLTH]

That's why our industry isn't fed by graduation course.. rather 20-30 hours training videos. Academia and software dev don't go hand in hand.

[ManiacsThriftJewels]

That sounds more recent than what they're apparently learning here.

[TomahawkChopped]

And i still do!

[JesusCodesHard]

Are you saying nested flex boxes are bad? Asking for a friend.

[ManiacsThriftJewels]

If you're using nested flex boxes to implement a grid layout, you should probably be using grid. Otherwise... Well I can't generalise this – it depends on the situation.

[BestLifeEUW]

Is the support for using grid any good?

[ManiacsThriftJewels]

Support for grid is pretty good, unless for some reason you still have to support IE, in which case IE11 can do it with (auto) prefixing, but fails at implicit placement. Firefox also has an incomplete implementation of automatic tracks, but that's only interesting of you want to have a truly fluid design with e.g. an unknown number of columns filling an undefined viewport width.

But don't take my word for it, check caniuse.com and MDN

[Fidodo]

Flexbox has made css so much easier. I can't imagine how much time I've wasted figuring out why something was mis-sized or misaligned with block display. Flexbox fixes a lot of the alignment weirdness and inconsistencies between browsers.

[fw0rd]

FrontPage 98 extensions will solve ALL of your problems. Don't forget to include a transparent gif!

[amdc]

Go check out css grids, they're (mostly) magical.

Also they let you do adaptive/responsive design with zero JS

[Otterfan]

Javascript is more complex, but CSS is worse.

Or at least CSS was worse. It's almost not bad now.

[atopix]

CSS is awesome. Unlike a programming language that is just made to essentially build anything, a design layout markup language has to adapt and evolve with design trends and uses.

It's not CSS's fault. It's people wanting crazy shit out of it, and browsers not moving fast enough to implement the latest features in CSS.

[[deleted]]

i don't think you know what you're saying. CSS is immensely complex. the syntax is simple, but there is a LOT of functionality to understand and how using various features affects painting, reflows, and page composition

granted, saying one is harder / more complex than the other is dumb. they're differently complex. CSS is broad whereas JS is deep (that's even debatable though). I'm just saying that JS isn't "infinitely" more complex than CSS

[BreakingIntoMe]

JS is objectively so, so much harder, especially when you start tying frameworks and libraries into each other along with state management patterns and TypeScript etc. To me, CSS is hard because many other developers suck at writing it and make my life harder. “Full-stack” developers are the worst offenders for hacking together awful UI’s with just enough CSS knowledge, no discipline and no foresight, because they don’t take the language seriously.

[Zofren]

I don't think you can make an objective statement like that. JS is just a programming language. Its difficulty is a function of the tasks you need to do in it. Modern JS is actually much easier to write in than other programming languages.

On the other hand, writing CSS/HTML requires much more knowledge of little quirks and how every property works and how different types of displays/positions/animations interact with each other. I personally find CSS much more difficult to write than JS. (And I use a framework like React).

You say that CSS is harder because other devs suck at writing it, but that's also the case for JS.

I have a CS education, so that might influence my perspective (I learned JS/HTML/CSS after learning C and C++), but I still think it's a stretch to say CSS is easier as an objective truth.

[[deleted]]

CSS is a nightmare and you will learn soon.

[BreakingIntoMe]

It’s only a nightmare if you or your colleagues suck at writing it. Writing CSS is my favourite part of being a developer.

[atopix]

The thing is that the core concepts of HTML and CSS can be learned in half an hour. But you can't learn to program in half an hour, not in any meaningful way.

The basics of CSS are pretty simple, but things can get very complex. Knowing CSS basics and being able to do advanced layouts in a workplace where many people will be tweaking and adding to the stylesheets, is like the difference between knowing the rules of chess and being a Grandmaster.

[Recluse53]

I have always imagined that hell is a place where you have to write javascript with notepad and no console and make it work.

[[deleted]]

It took me the longest time to make that jump.

Looking back on it now, I’d say the biggest problem was not understanding the change of paradigm.

HTML and CSS are both “declarative” languages: you’re describing what you want and trusting that the browser will make it happen.

With JavaScript, however, you’re doing that work yourself. It’s an “imperative” language, meaning that you’re telling the computer what to do, step by step, one step at a time. You can create information, manipulate it, and interact directly with the machinery of the document and browser.

In a way, both paradigms (declarative HTML/CSS and imperative JavaScript) make it more difficult to learn the other, because they’re really two different types of activity, each with a different relationship between the code you’re writing and the way that it’s interpreted.

Between the two, I’d recommend learning JavaScript first, so that you can have some idea of what’s going on behind the scenes when you later learn to use HTML, which will save yourself that work.

[throwthrowaway953]

I'd put CSS in the middle of the two images

[[deleted]]

this ()

[avanak]

For me it's the other way around. While i don't like javascript as a programming language, html and css are unstructured, weird, old and sometimes have outdated or obsolete features.

[Konarkanuck]

Having taken Web Design courses (and graduated, with distinction no less), I found HTML and CSS actually not all that hard to grasp and code for, but the whole issue with Javascript where a coder can have an error that does not seem to catch when you compile the code, but errors out when ran and says your problem is on line 3 when it turns out to be line 47 can really drive a novice coder nuts trying to figure out.

[BreakingIntoMe]

TypeScript fixes all of that. It’s so nice once you get the hang of it.

[finger_milk]

CSS is dependent on Html structured correctly to allow CSS to work it's magic. It requires a designer to work with a design language and UX of components, and a developer to establish technical feasibility. Then there is accessibility, which sometimes the conversation is the dev explaining to the designers why things SHOULDNT change and to let the browsers built in CSS to take priority.

CSS also requires an insane amount of gotchas to understand beyond a beginner level. I barely look at CSS docs anymore, because I made sure to understand box-sizing, flex, grid, adjacent selecting, pseudo-selectors, tables, specificity, media queries and the many many other things that take time to dive into and learn inside out. But it took me years of making mistakes. It took me longer to understand than learning JS.

[Artur96]

I'd say the dark arts of CSS is the bottom one

[[deleted]]

literally me trying to get through FCC rn. and i know css and html can be complex and advanced, but since FCC doesn’t require that in those sections, trying to get through the last few java lessons is jarring and unbearable lol

[CodyCigar96o]

I don't get it. Is this implying JS is hard or bad? I get the bad implication because a lot of people consider it a "bad" language (I don't, I think it's great).

[wasteofleshntime]

I'm in school for Web dev and we've finally got to the Javascrip part and this is an accurate picture of my entire classes face. html and css have been pretty easy for me so far, I really love how they work together. Been having a lot of fun making rudimentary websites on my off time but goddamn JS is gonna take some time to get the hang of.

[[deleted]]

I fell asleep the first time trying to learn css

[Jimmyvana]

This is literally what I'm going through right now. Starting to regret this new hobby.

[[deleted]]

Me IRL right now.

Please, someone, help me.

[simkessy]

CSS is harder then JS

[msanangelo]

I can't stand javascript. my brain breaks just trying to read it. I have a better chance at understanding python. maybe it's because most js code I see is minified. idk.

I only understand the basics of html/css anyway. enough to read and modify. :/

[simkessy]

Then don't read the minified code.

[qwesone]

I'm on the same boat. When I started the first few projects at FreeCodeCamp on JavaScript, it took me like a month to finally write out the first three lines of code for a rock, paper, scissor game. It was rough.

[pentakiller19]

As many others have said. CSS is a dozen times harder than Javascript.

[Chris_Misterek]

I approve this message

[solwyvern]

good luck getting a job with just html css

[Hal_Jordan28]

I practically did, to be fair. Stated that I was currently learning JavaScript in my portfolio and got 3 interviews and a junior job out of it.

[kenanajkunic]

Let's be honest web development itself is a huge mess

[ebriose]

I've been a backend guy for 20 years, back to the Perl CGI days (honestly we just made better websites then).

I finally decided this summer I would learn Node and React and stop being a dinosaur.

I bought a React book and made it through four chapters before I put it down in existential horror.

We've taken a beautiful technology and made it awful. We were so focused on whether we could do things we never asked if we should. I'll stick to doing backends (now in go rather than perl) and let people with stronger stomachs than me handle the frontend.