Website are bunch of files that is stored in server wherein a user can access through a client also called as website.
Front-end and Back-end
Frontend is mainly concerned with the client side which focus on what you see, while backend is concerned with logic and functionality it is what not you see in websites.
Code Editor
Code editor is an IDE wherein you can code and create your websites.
Basic Front-End
HTML (Hypertext Markup Language)
Foundation of websites, and the main file type that will load in website. It is composed several tags, such as paragraph <p>, list <li>, headers <h1-6> and others
CSS (Cascading Style Sheets)
CSS is the main component that add styling to HTML tags on however you want them to looks
JS (JavaScript)
JavaScript is concerned with the functionality and how website will respond to what you want.
Tools
Package Managers
Package is collection of software which are utilities that other individuals already created and published. This helps you to speed up development process. Packages are installed using package managers which is mostly access using CLI (Command Line Interface)
Build Tools
These tools runs task and process files. This is also associated with compiling, building and other essential steps. Example are Gulp, Parcel.
Version Control
Version control is a system that tracks your progress which save your different version through the development lifecycle.
Additional Front-End
SASS
It helps you in writing CSS styles more intuitive and modular. It helps in creating reusable codes
Responsive Design
It focuses on creating design that will adjust depending on screen size which eliminates static elements.
JavaScript Frameworks
ReactJS, is a library created by Facebook. AngularJS is a large library created by Google, and VueJS is created by a former angular developer. Choosing a framework will be based on your preference and job.
Basic Back-end
Server
A computer wherein different website files is stored. Common server are run in Linux. There are also serverless setup that splits services with different third party vendors
Programming Language
There are several programming languages that helps render servers in webserver. Python, and NodeJS are the common web server pl.
Database
Database is mostly manage by script called SQL. Database are traditionally stored in Tables but there are NoSQL Db wherein it handles JSON data such as MongoDB
How to design a web application from start to finish
Write a Product Specification Features Document
If you are working with a client, product specs and features is mostly given to you. If you are working with your own product you must understand first the product specifications and list down all features you need in a document to further see your systems possible flaw, feel and look, and how it will run.
Create product map
Creating a product map gives you a quick glance on what product you are building. This also demonstrates your user journey in your product. It is also referred as information architecture.
Wireframe layout
Wireframe helps you to think how you will layout your page, and this kind of design mostly will not concern your client. This is an early sketch of what you are building as a product. It also focuses on usability of your product and not the design part.
Designing High-fidelity mockup
High-fidelity mockup combines the functionality and design that mostly will resemble the product. High-fidelity mockups is used to check the different combinations of user experience and user interface. This is also presented with the stakeholders to further improve the product based on their liking.
Prototyping/User-testing
Early stages of design must include prototyping and user-testing to see the pain points in the current design that can be addressed on later iterations in design phase. This also validates the preferred user journey. It also enables user based design since you can ask further comments from the user and how they feel navigating the design.