You can get pretty close, but if the site uses PHP, ASP.NET, or some other form of server-side html rendering, you'll never be able to completely reproduce a copy of it. This is because that server-side rendering code is just that, only on the server, and it is never sent down to the browser.
But if you want to ignore all that, you can certainly assume the html that comes back is static and work from there. The first request made to a website (once all redirects are done) is always a single response containing an html page. The browser then renders this html onto the window. It will download and run any scripts (js) when it hits a script tag. The scripts are run in-place, even if the whole html page hasn't been rendered yet. This is why web frameworks like Angular or React will recommend putting the script tags after the main content container has been rendered. The process is similar for style sheets. Each style tag will download a style sheet and compile it.
The great thing is that all this is laid out in order in the network tab of your browser's developer tools. You can view each http request made to the website's server, including the latency, full request contents, and full response contents, and a bunch of other helpful information. I'm not sure how it works for Firefox or other browsers, but if you're on Chrome you can open the developer tools by hitting F12 on Windows or Alt+Shift+I on Mac. There's a bunch of other really cool stuff you can see as well.
echo "foo";, the echo code gets executed on the server itself, and you see only the "foo" in the HTML you get. If you want to get PHP, you should test the functionality of the webpage, and hand-code the PHP accordingly.
You do not need to reverse-engineer CSS. You can simply copy it from the HTML if it's inline, and cURL the CSS from the link element, or simply use Chrome's dev tools to find the location and source.