This blog is the brief description and introduction to development of Web application and the two most important parts of web application development i.e., Web design & Web development.
Following are two aspects of website building :
- Web designing
- Web development
Web Designing 🀄
Web designing deals with the layout and designing part of websites. Web design consists of many ingredients for the recipe of any web application. It contains logos of any brand, making your personalized avatar, adding suitable fonts and beautiful colors to it and many more. It is the domain which is concerned with the layout of the application, how the website will look like, it is the front most part of the application which attracts the user to use the application. It contains all the animation and visualization which will be displayed on the screen when anyone visits the website.
Web design is the foremost part of any website because it creates a direct impact on users. It is something which users will see directly while using the website. Web design mainly includes two most important domains :
- UI (User Interface)
- UX (User Experience)
UI (User Interface) 🏔
User interface is the wholesome domain of designing the interface of application or any software. It is the layout and graphics which is shown on the website. It consists of every small item which is displayed like buttons, hyperlinks, images, tabs, logos, colors, fonts, text, text-alignment, shapes, icons, and many more which the user interacts with. It includes screen layout, animations and visualizations. It also includes the graphics and the work of the UI designer is to make sure that the application should look attractive and beautiful. UI designer take care of the shapes and sizes of different items like how a button will look like, whether to make the button of small size, or of medium size, which color will be more suitable to the logo, which text style will be the best to the text, which position is the best for image etc. All these are the components of UI.
UX (User Experience) 🌆
UX or User Experience is another specialization of web design which tells the experience of the user while interacting with the websites or any application. It determines how the user will interact with the application. It tells the user whether it is easy to use the application, whether it is friendly to interact with the application or does it feel like boring to use it or very uncomfortable while operating it. So these types of experiences with the application make UX designers think about the interaction of users and how much the application is user friendly, how much it is easy to use the website. UX designers determine how the different tabs will coordinate to each other, how different hyperlinks will navigate, how one page of the website is interacting with another one. UX deals with how the connection will be made so that when the user clicks the button, what should be displayed on the screen, what error message should be prompted while entering the wrong password in the login, these are the components of UX.
UI designers decide how the interface will look like whereas UX designers decide how the same interface will operate.
Web Development 👨🏽💻
Web development puts life to the website. It is more of the technical aspect of website building. It focuses more on the coding part of website building. It is the coding of every component of a website and giving life to it to operate. It is done by scripting and markup languages like HTML, CSS, Javascript, php, django, node js, react js, vue js, angular js, express js, perl, ruby etc. which helps in building front end which is visible to user while interacting with the website and back end which is not shown but responsible for each and every activity performed on the website.
Following are the two categories of web development, just like UI and UX are the two specializations of web design :
- Front end
- Back end
Front End web development 🖼
Front end is the part of the website which the user can see on the screen. In terms of development, front end refers to the user interface, and front end development is the developing the user interface for the website of whose design is given by the UI designer. After receiving the website design from UI designer, now the front end developer will code that design and make it to use to see the interface. They make sure that the interface should look the same as given by the UI designer.
Front end development is the building and developing of the client-side by using markup and scripting languages like HTML, CSS, and Javascript.
HTML
HTML stands for Hypertext Markup Language which is used as the foremost and basic language for building the layout structure of the website. It defines all the components which are to be shown on the website like image, text, table, Heading, any type of form, hyperlink, button, navigation tab, headers, footers etc. Basically, it generates the layout structure of the website, how it will look like and the content which is to be displayed on the screen.
CSS
CSS stands for Cascading Style Sheets which is used for designing the elements of an application generated by HTML. It makes the site attractive by adding the color to the text, adding the font style to the font, font-size, aligning the text, typography. It is also responsible for animations and visualizations part of the websites. It also focuses on responsiveness of the websites i.e., how it will look like on the devices of different sizes like whether the application will look the same way on laptop screen as on mobile devices or tablets.
Javascript
Javascript gives life to the website, through HTML only static websites can be generated, but to give a dynamic look to the website, Javascript comes into picture. It is the javascript who decides how to alter the theme when the user clicks on the dark theme option. Javascript is such a powerful language that it can not only support front end but back end too, on the server side also javascript plays an important role. Some of the famous javascript frameworks are angular, vue, and react. React js is the most popular amongst all, developed by Facebook. Angular js is another front-end web framework developed by Google.
Back End web development 🔙
Back end means the same as the name suggests i.e., behind the screen. It refers to the development of a web application from behind the screen of the device, back end refers to the server side development. Server means the entity which provides data on request. If you want to retrieve data then you have to connect your web application through a server. For example if your web application wants any data to operate on, then it needs to take data from a server. Let's take an example, when you log in into Gmail, it asks you to enter your mail ID and password, so after entering your password, it goes to Google server and verifies it from there, if it is valid, then you successfully able to login but if founds to be invalid, then it simply displays a error message in your browser. So that's how it worked at the backend and went to the server and validated the data.
Even when you search anything in any search engine for instance google chrome, it first go the server and retrieve the data from there and it come again to your local machine's search engine in the form of HTML, CSS, Javascript, and then you see your searched thing in your browser.
Suppose if you are developing your website and you have put an option to log in, then you will have to save the customers' data like username or/and password, for that purpose, you will have to store their data in some database which is also the part of back end or server-side.
There are many languages which supports backend development like java, ruby on rails, c#, python, javascript, any many more. Django is one of the most popular python frameworks which is available for back end web development, developed by Django software. There are Node js, express js in javascript which are back end web frameworks and libraries supportive for web development.
Thank you for reading my blog 😀 Feel free to like share and comment
Connect with me 👋
Console.log("Happy Learning")
Code.getElementbyEntity("Errors").innerHTML = "Happy Coding !!!"
Top comments (0)