Start out with your content or a reasonable facsimile of future content - ALL OF IT - in a flat text editor and arrange it as if HTML and CSS don't even exist!. Don't worry about formatting it, just type in your content with headings as if you were writing a flat professional document for text-only printing, with the alt-text for any content images representing said images.
Mark up that content semantically, saying what things ARE ( paragraphs, short lists of bullet points ) and enhancing the logical document structure with numbered headings and horizontal rules.
Remember unless you use HTML 5's idiotic, pointlessly redundant structural tags, your H1 is THE heading ( singular ) on your SITE (singular) that everything on every page is a subsection of. Same as how the title of a newspaper or book is at the top of every page or fold-pair. An H2 or HR indicates the start of major content subsections with the first H2 indicating the start of your main content area. H3 mean the start of a subsection of the H2 preceding it. H4 means the start of a subsection of the H3 preceding it, care to guess what H5 and H6 mean? They have structural meanings which is why going "up" in number you don't skip around willy-nilly, why pairing a H1 + H2 for title and tag line is ignorant nonsense, and they sure as hell don't mean "fonts in different weights and sizes" nor does HR mean "draw a line across the screen". Those are simply their default appearance for screen media, which is again NOT what HTML is even for in the first damned place.
As this is the semantics stage, you likely shouldn't be adding DIV or SPAN since they are semantically neutral existing just as hooks for saying "this might receive style" without saying what that style actually is. It also means no classes or ID's yet.
Basically on this step, if you choose any of your HTML tags based on what they look like instead of what they mean grammatically, structurally, and semantically, you're doing it ALL WRONG.
Using an external stylesheet bend the markup to your will to create the first (of many) screen media layouts. This means the <link> should at LEAST have media="screen" on it since your screen layout means dick to print, aural/speech, tty, etc, etc. This is why if you see a <link rel="stylesheet"> that lacks a media="" attribute, or sets media="all" what you are likely - as I say a lot - looking at developer ignorance, incompetence, and/or ineptitude!
The first layout for screen I suggest creating is the legacy desktop. A LOT of people will say "mobile first" but that is utterly backward thinking. Any mobile devices we care about supporting can be targeted and customized with media queries, whilst legacy desktop cannot... so why the blue blazes would you start with what you can customize, since then how does one even target non-media query capable devices? Makes no sense.
At this point you can also add any presentational images in the CSS, since images that are part of the template have ZERO business in your HTML as content. Thankfully the need for such images has dwindled as CSS has taken over.
Once that legacy screen layout is defined, narrow the screen width until the layout breaks. Figure out how many EM that is, and write your media queries to adjust the layout stripping off columns, adjusting paddings, and so forth. That's your breakpoint.
Lather, rinse, repeat step 3 until you're down as small as you think you'd need to support. Whist there are 192px wide devices, they have really disappeared from the mainstream so I treat a 256px display size ( 16em if you're on standard metric font-size ) as the minimum width to support.
Then and only then once you have a fully working responsive page, do you have any business even thinking about enhancing it further with JavaScript. If you needed JavaScript before this point, you've screwed up. If the layout or even basic page functionality doesn't gracefully degrade when JavaScript is blocked, unavailable, etc, then you've done it all wrong.