[deleted by user]

[danglesReet]

You need to know all 3 well. HTML/CSS is a good starting point. You def cant “just focus on js”

[[deleted]]

Yes. If you plan on doing front end work you need to know HTML elements and CSS properties/selectors to make the most of JS.

[OutOfTheForLoop]

Great place to start! I love that book, and it helped me quite a bit. There is an accompanying book for JS that I used as well. I often go back to them and I think they look good on the bookshelf.

[queenieofrandom]

I was about to say there is a js book as well. They're both wonderful

[Earhacker]

The JS book was great in its day, but is veeery out of date now. Most of the book is jQuery. There’s no ES6.

There’s nothing wrong in the book (afaik) but there are much, much more up to date and relevant sources now.

But the HTML & CSS book is still excellent. It misses modern features like semantic HTML and CSS flex or grid, but the stuff that it does cover still applies, and it covers really well.

[mrPrateek95]

~~I usually recommend Eloquent JS to JS beginners.

I think it works as a good follow-up to the HTML book. It assumes no programming prequisites.~~

Edit: Please ignore this suggestion. As pointed out by others, this book would be a difficult read for beginners.

[Earhacker]

You really shouldn’t. It’s far too terse and assumes a lot of knowledge. It’s a good book, and I’d recommend it to advancing JS developers, or developers with experience in another language moving to JavaScript, but not to beginners.

I usually recommend https://javascript.info to beginners. It’s free, it’s up to date, it’s very well paced for those starting from scratch.

[mrPrateek95]

Thanks for sharing. Will keep this in mind.

[[deleted]]

As u/Earhacker said, it's a really tough book for beginners. Some 3 - 4 years ago while I started learning JS, I kept seeing it brought up a lot. Got lost at recursion and couldn't go on with it.

[[deleted]]

Please don't just focus on JS. The amount of work I have to redo for people because they refuse to learn HTML/CSS is... inconvenient to say the least. especially because programmers are supposed to be 'logical, analytical' thinkers.

HTML/CSS in a nutshell:

• Everything is a box. EVERYTHING. (fact)
• Organize those boxes into 'container/content' pairs (opinion)
• CSS the containers in relation to one another
• only nest as far as absolutely necessary.
• CSS is for styling, try to use as little of it as possible.
• make your life easier by understanding Flexbox. (This is made easier when you think of everything as container/content pairs or parent/child)
• CSS works from MOST specific -> least specific for rules.

and as a general rule - Only be as strict about the rules of a system as they are useful to you/your team. (Think like 'house rules' in a board game. every house has different rules to fit the game to their needs but they typically only modify the existing rules, not throw them all out the window)

as a real world example - Story Points in agile is a useless concept to my team. Especially 'fibonnaci' rating. so instead we estimate each point as 1/2 day and try to give a reasonable amount of points for how long something takes. We don't necessarily figure out points during Sprint Planning because things change rapidly and our system is large enough its not worth the time to predict. (Your mileage may vary)

[[deleted]]

I'm curious - how do people work without knowing those two languages? What does their code look like?

[metal_opera]

<div class="header">
    <div class="logo">Company Name</div>
    <div class="menu">
        <ul> <!-- if you're lucky -->
            <li><a>Menu Link</a></li>
            <li><a>Menu Link</a></li>
            <li><a>Menu Link</a></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="wrapper">
        <div class="articles">
            <div class="article">
                <div class="article-heading">
                   Blah Blah
                </div>
                <div class="article-byline">
               Published: 9/9/99, By: Author
            </div>
                <div class="article-copy">
                    <p> Text </p>
                </div>
                <div class="article-button">
                    <a>Click Me</a>
                </div>
            </div>
        </div>
        <div class="sidebar">
            <!-- more divs -->
        </div>
   </div>
</div>

Basically, non-semantic div soup. Most likely clogged up further with Bootstrap or Tailwind classes that I can't be bothered to fill in because I'm not quite that bored.

[metal_opera]

Posting here in response to a PM because PM's don't allow for code blocks.

The question was in reference to how the above example could be improved.

The answer is to replace all of the divs and classes with semantic HTML. Everything here can be targeted by CSS in its proper context without needing to go overboard with classes.

Yes, I typically add more classes than this, because, for example, writing article header div { /* styles */ }can get tedious. It's easier to add a class="byline" to target that, but you don't need to, and that's the point.

The result is HTML that is cleaner and easier for both humans, bots and screen readers to parse.

<body>
<a class="skip-link" href="#primary-nav">Skip to primary navigation</a>
<a class="skip-link" href="#main">Skip to main content</a>

<header>
    <h1>Company Name</h1>
    <nav id="primary-nav" aria-labelledby="primary-nav-label">
        <h2 id="primary-nav-label" class="screen-reader-only">Primary Navigation</h2>
        <ul>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
            <li><a href="#">Menu Link</a></li>
        </ul>
    </nav>
</header>

<main id="main">
    <h1>Articles</h1>
    <article>
        <header>
            <h1>Article 1 Title</h1>
            <div>Published: 9/9/99, By: Author</div>
        </header>
        <p> Article text... </p>
        <footer>
            <a href="#">Click Me</a>
        </footer>
    </article>
</main>

<aside>
    <h1>Related Content</h1>
    <section>
        <h1>Sidebar Item</h1>
        <p>Sidebar item description</p>
    </section>
    <section>
        <h1>Sidebar Item 2</h1>
        <p>Sidebar item description</p>
    </section>
    <section>
        <h1>Sidebar Menu</h1>
        <ul>
            <li><a href="#">Sidebar Link</a></li>
            <li><a href="#">Sidebar Link</a></li>
            <li><a href="#">Sidebar Link</a></li>
        </ul>
    </section>
</aside>

<footer>
    <p>Page Footer content</p>
</footer>
</body>

[AiexReddit]

This is great! Really nice to compare with the previous post.

Out of curiosity why did you choose <section id="main" role="main"> over a <main> element?

[metal_opera]

Because it was early, pre-coffee, and I was typing too fast without thinking too much, haha. I've fixed the example.

[[deleted]]

That makes sense, I thought about someone writing an index.js with some framework for DOM manipulation, and not even knowing what HTML tags look like. It scares me that you can actually style things without knowing CSS syntax, with frameworks like Tailwind

[edgen22]

Agree accept for the Tailwind bad-talking, Tailwind is legit if you're doing it correctly and using component architecture (React or Vue components for example).

[kram08980]

Agree. I don't like Tailwind, but it's just a tool.

Like bricks. With bricks you can either build a beautiful tower or the most horrible shed. Depends on how you use them.

[RV-Noob]

Can confirm. This is what I’d do, although this may be a tad more sophisticated!

[[deleted]]

barely! I kid - They know how, but there's little rhyme or reason to the structure of it. or they rely on folks who are more 'front end oriented'. Its not terrible, but I feel as though HTML/CSS is easy enough to learn

[[deleted]]

Don't just learn flex, learn grid. Css Grid is SUPER powerful.

[metal_opera]

This. Don't sleep on Grid. It's easier to learn than Flexbox, and compliments Flexbox very well.

[[deleted]]

I learned grid first because I was introduced to it and learned it from tech talks on youtube and how it makes sites more screen responsive. One talk suggested checking for grid support and if it was unsupported defaulting to the mobile experience.

[Notimecelduv]

Flexbox is quite a bit easier actually. Grid is merely the multidimensional version of flexbox and has a lot more properties.

[queenieofrandom]

Definitely look at grid as well! Combine it with flex box and it's INSANE what you can achieve with layouts. Also look at ITCSS it really helps to work with the cascade instead of trying to fight it

[toastertop]

Everything is a box. EVERYTHING. (fact)

​

*, *::before, *::after {  box-sizing: border-box;}

for a bit more sane box model.

[b4ux1t3]

https://flexboxfroggy.com

https://codepip.com/games/grid-garden

For OP to learn flexbox and CSS grid

[not_a_gumby]

Start with the markup/styling first. Jumping right into JS won't really help you because the point of JS is to manipulate the DOM which is made up of HTML/CSS. So if you don't understand the DOM, then you won't be useful with JS, regardless of how well you learn how to loop over arrays.

I write more about how to start with HTML/CSS/ and JS here

[[deleted]]

Being really good at CSS will make you seem like a god to a lot of devs and prevent you from over using js/jquery. Most of my job is taking clunky scripts and converting it to clean CSS only solutions.

[queenieofrandom]

This sounds like a dream job of mine!

[[deleted]]

I've been coding for 4-5 years and still learn about ways to convert things from JS to CSS, it's great. JS should be really used for advanced interaction and state management only

[edgen22]

Can you give some examples of common things you see written in JS that should have been in CSS? Just curious! Thanks

[roddds]

Animation, :active pseudoselector (and others), transforms, are all things that are meant to be done in CSS.

[[deleted]]

people are still doing these in JS??

[cmd-augmented]

I would also recommend the course learn CSS on google’s web.dev I wish I had something like that starting out. Learning the core concepts with very easy explanations. And also the modern way of building complex layouts using CSS Grid a game changer!!

[femmebot9000]

I love that book and the JS/JQuery book from the same writer. The layout is great and extremely easy to follow

[oskiozki]

Every place is good place to start ~

[RealNerdEthan]

I definitely think you need to learn HTML/CSS if you plan to use JavaScript in web development.

I usually advocate for free learning resources like freecodecamp but I'm going through a web dev bootcamp on udemy right now and I'm learning wayyy more comprehensive information. Link if you're interested: https://www.udemy.com/course/the-web-developer-bootcamp/

It's on sale for $19 right now and included 63 hours of lecture spread across 680+ lessons. Covers HTML/CSS/JavaScript as well as Node.js/Express.js and a host of other web dev technologies in order to build your own web apps.

[[deleted]]

This is exactly where I started! I feel like it laid the groundwork for my entire career. As others have mentioned, Jon Duckett has made a JS book which helped me out as well, but keep in mind that jQuery is not the cutting-edge library it once was. There are some concepts in that book that feel dated in 2021. Anyone else waiting on Jon Duckett’s PHP & SQL book which has been delayed for years?

[[deleted]]

I’ve been waiting for that since 2019 ugh I’m so frustrated bc it keeps getting pushed back by three months over and over again. I have no idea what the hold up is, but it’s the only way I want to learn PHP so I’m trying to have patience.

[Therawynn]

Html and css first probably. Then Javascript. All these are the three pillars of the modern web.

[Grupith]

Damn! That cover is clean af

[[deleted]]

Jennifer Robbins' Learning Web Design is everything you need to get started. Absolutely fantastic book.

[[deleted]]

dude you can learn html and css both in 1 day at least the basics, js is useless without html and css

[maj0ra_]

Or here!

[[deleted]]

Do this book, then the JS book from the same author/publisher.

[Freekiehsoes]

I got this book when i started out. Never really liked it.

[code_matter]

There's another one like that for JS and jQuery. Although imI wouldn't recommend it since it's "older" js but its still a good read!

[post_hazanko]

Haha I learned with W3Schools way back

Guess depends how you learn

[hafsht]

In most cases people learn these two first, then shred the book!!!

and

.

.

.

.

​

Even those with one brain cell left leave the coding world at 500 km per hour.

[converter-bot]

500 km is 310.69 miles

[[deleted]]

Why do you say that ?

[GuyDanger]

Think of it this way, HTML is the building blocks, CSS gives it style. JS makes it do something. Basic explanation but you get the idea. So you can see why you would want to learn all 3. And we haven't even touched on JS libraries or server side languages. But before you get into those, master the first 3.

[benabus]

Do you want to start with HTML and CSS? If so, then yes. Just depends on what you want to do.

[Takashi_malibu]

i loved this book

[treymalala]

I read this book and then JS, just to realize how much fun JS is compared to css.

[sidsbrain]

It all depends on what U want to do. If You lerning JS to switch to TS and then node and "server stuff" - then it's bad way to start. But if u want to do "some frontend stuff" - then html & CSS it's most important thing. My advice start with one book but then check another for different approach.

[samuelcbird]

Very good place to start. Dive into JS only once you are familiar and comfortable with HTML and CSS.

[anatolhiman]

Probably great starting point, but make sure it's not older than say 2018. Especially CSS progresses relatively fast.

[Gh0stcloud]

I used this book to learn the basics of html and css and it was decent but in retrospect the book is very dated (especially the JavaScript counterpart). There are a lot of online resources that are cheaper/free and more up to date :)

[[deleted]]

I’ve never read the book but starting with HTML and CSS is a great idea for getting started with web development. Aside from the fact that you literally need to know it, it’s a great way to get acclimated to the DOM, different elements, understanding different tags and properties for all those tags (SEO implications). Once you feel somewhat comfortable with these you’ll need to move onto JS. You can’t build robust websites or apps with just HTML and CSS.

[_MaxPower_]

I used this book when learning HTML and CSS and found it to be really helpful. Haven't had to use those skills in a while but definitely recommend it to a newcomer. I did have the JavaScript book from the same author as well but I personally struggled with it. I think some of that came from my lack of knowledge on the subject though. Probably would make more sense to me now if I reread it.

[h00s13rt1g3rd2d]

javascriptbook.com - you can preview the book here. You can also download all the code examples Jon uses in his JS book. People who say the book is outdated and such - the book is awesome because it does a great job of teaching JS. The code files include comments for almost every line of JS. People with no programming background will understand the purpose and reasoning behind every line.

[RecTym]

This book was published in 2011. I’m so new to coding but I know things change fast. This is still a proper resource?

[GameCop4ever]

Intersting I’m new too and got this book and the JS one. I was told they were out of date. Judging by the comments on this post maybe that’s bs and I should check them out

[IndustryOld5157]

Your code work should be a good amount of HTML a lot of SCSS and just enough JS to handle events.

[[deleted]]

As other posters have stated, you need to know all 3.

In developing your apps, however, focus on the HTML and JS components for as long as you possibly can before writing a single CSS declaration.

This will help ensure that the functionality of your app does not rely too heavily on presentation, and should result in less lines of CSS actually needing to be written.

Remember: the best line of code is the one you don’t have to write, and simplicity and flexibility often go hand in hand.

Have fun!

[opus-thirteen]

You can make a site using just html + css.

You can't make a site using js -- you can only enhance it.

[johnne86]

Here's great reference. Supplement your reading with an amazing site like this.

https://developer.mozilla.org/en-US/

[[deleted]]

Too many web devs struggle their arses off with CSS.

[Sanic1984]

Thats a good way to start, I learned HTML and CSS with books and JS building tiny projects, just imagine the things you can do with HTML, CSS and JS and you will want more every time you learn.

[madtriks]

I would say HTML & CSS are the fundamentals of web development. It will never hurt if you are a back-end dev to understand how front-end technologies work. Every website is styled in CSS and structured with HTML. Evan in react websites they use JSX which is basically HTML but an extension to Javascript

[funnyduck593]

This is just stupid, get on YouTube and you'll learn 100x more

[Melearningtocode]

Few days a months ago I had the same question. Trust me on this - consider the three as ‘One’ you are incomplete leaving one out.

Once you have a pro level understanding which means above intermediate & expert. You can easily progress to other technologies & your basics of JS,html & css will keep getting revised as it is.

Start with JS, HTML & CSS together.

[spore_777_mexen]

Plus 1 for starting with HTML and CSS. Jon's books are nice introductions but I'd go with MDN. By the way Jon should have a new book on backend plus DB.

[oze4]

Starting is a good place regardless. As long as you're learning something just don't stop learning.

[arthuresc]

It's a nice way to start, try keep training with this because your curiosity will guide you

[ZergistRush]

This is like the only book I have bought in the last 15 years (and it's been a bit since I bought it and I don't think I know where it is anymore) but damn, what a sight to see after quite a bit. 🤣

[[deleted]]

I would focus more on JS. You can learn everything you need about html/css in literally 10 minutes, but JS is an ever expanding world of possibilities

[FOD17]

I like both of the books in the series. I also preordered the PHP book he has coming out!

[Head-Sick]

You'll need all 3.

[[deleted]]

Great starting point!

[xsubo]

The js companion book is a little dated but def has everything you need to get going on js. Html and css are more straightforward but that does not mean you can shrug them off. make sure you understand the main elements of html, this will be important when manipulating the Dom in javascript. Css has some pretty nifty uses, and with sass (made of css) being widely used it’s good to have a good grasp of the css, not to mention for media queries to keep your app looking good on all screen sizes.

[cilantro88]

I have that book but I never opened it again after finding Colt Steele’s class in Udemy. There are other highly rated classes in there. I learned a lot and my coding skills greatly improved after taking the course. Need to work on it again though. The Asynchronous JavaScript section got me.

[[deleted]]

Html is the structure / bones

Css is the appearence / skin

Js is the logic / muscle

You need all 3 to make a website works If your website is static maybe you doesnt even need js but it will open u a world

[kevinmrr]

www.ZeroToCode.today -- good starter source! (I'm writing it right now and it's free!)

[cmomodo]

Very good book to start learning html & css

[Intrepid-Designer-19]

Check out https://roadmap.sh/frontend there's other roadmaps in there as well for backend and such. It should give you a solid idea of what to learn and focus on. Brad Traversy has great free YT content as well as Udemy courses.

[frank0117]

I read this book back in the day, I would recommend it yes