Document

If you are developer or you might be coding. But here I’m going to discus some points how actually website works. Basic requirement to structure the layout website is to build **Front-End** logic. You need to learn these languages. 1. **HTML :** works as the body of the website. 2. **CSS :** works as the beauty of the website. 3. **JavaScript :** works as the brain of the website. ### Example: To understand more simple way let’s take example we have seen cars, it has the metallic body works as HTML part, It’s colour, design, beautification are CSS part and It’s main functions like engine, accelerator, break and clutch are JavaScript part which works as interior logic of the car. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnru7t0fi0xbsce8dacr.png) ### 1. HTML - HTML stands for **Hypertext Markup Language**. - It is basically a standard markup language for giving a static skeleton to web application and websites. - Its a well standardized system. ### 2. CSS - **Cascading Style sheets** which is known as CSS is a style sheet language that used to handle the presentation of the web page containing HTML. - CSS is used to add styling to that bare bone page created using HTML. - It makes our websites beautiful and modern looking. ### 3. JavaScript - **JavaScript** (JS) is a high-level dynamic interpreted programming language. - It allows client-side scripting to create completely dynamic web applications and websites. - JavaScript is used to program logic for the page layout - Example- What happen when a user hovers on a text, When to hide or show elements etc. ## Server Interaction You might be thinking when we write the URLs in the browser (www.google.com) where it goes, URL simply sends the request to **DNS Server** that translates human readable address (www.google.com) to a machine readable IP address (234.83.16.235). This DNS server sends the request to the **Main Server** (a web-host where your site lives on the internet) responds to your browser the you see the contents of web page. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41bt4862iiv3iqb8w2ei.png) ## Installation - **_[Download](https://code.visualstudio.com/download)_** and Install VS Code. - Add Extension **_[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)_**. ## Basic Structure 1. **Create Project :** Open directory in VS Code Editor. Create new file `.html`, `.css` and `.js` 2. **Boiler Plate :** Press ! + Enter 3. **Edit Settings :** Set shortcuts to make easy and fast coding. - Copy the line - Move wheal zoom etc. ```html Document ``` ## Back End After that you need to know about Back-End Logic. In Back-End we (developer) write the logic where all data are fetched from your database (a cloud data storage) and every interact done by the user are reflect the database these are done by several languages for ex: **Python**, **JavaScript** and **PHP** etc. ## Framework These all three have **Framework** (a structured based template where lots of libraries and modules) are provided to serve easily. - **PHP :** has provide Laravel. - **Python :** has provide **Django** (used for large scale) and **Flask**. - **JavaScript :** has provide **NodeJS** and **ExpressJS**. That’s all, Good Bye, Happy Coding.

mdirfan

Beginner knowledge | how website works?

Join Our Newsletter. No Spam, Only the good stuff.