naomi@portfolio:~/notes/web-development-basics
secure
catweb-development-basics.md
// web development basics

an overview of fundamental web development concepts and technologies.


2024reference
webfundamentals
// content

# web development basics web development is the practice of building things for the internet. it sounds broad because it is — but it breaks down into a few clear layers that are worth understanding before you dive into any framework or tool. ## the three layers of the web every webpage you have ever visited is built on the same three things: - html — the structure. its the skeleton of a page. headings, paragraphs, images, links. - css — the presentation. its what makes things look the way they look. colours, layout, typography. - javascript — the behaviour. its what makes things interactive. clicks, animations, fetching data. you can build a real webpage with just html. css makes it not look terrible. javascript makes it feel alive. learn them in that order. ## client vs server this is the mental model that unlocks everything else. the client is the browser — what your user sees and interacts with. the server is the computer somewhere else that sends the page to the browser. some code runs on the client (javascript in the browser), some runs on the server (php, node, python etc), and some runs on both. knowing which is which saves a lot of confusion when things dont behave the way you expect. ## how a request works when you type a url and hit enter, a lot happens very fast: 1. your browser looks up the domain via dns to find the servers ip address 2. it sends an http request to that server asking for the page 3. the server processes the request and sends back html 4. your browser reads the html, then fetches any css and javascript it references 5. the page renders understanding this flow helps you debug things like slow load times, missing assets, or pages that look broken — because you know where in the chain to look. ## a note on frameworks once youre comfortable with html, css and javascript, frameworks start to make sense. react, vue, next.js — theyre all just tools built on top of the basics. the fundamentals dont expire. a solid understanding of how the web actually works will serve you better than knowing the api of any specific framework. start simple. get something in the browser. go from there.