Introduction to Web Development and the Holy Trinity of it
Introduction and Holy Trinity of Web Development
- Front End Developer
- UI/UX designers
- Web Designer
Note: UI stands for User Interface while UX stands for User Experience. UI designers have to take care of the virtual aspects of the website’s design while the UX designers conducts user testing to ensure the smooth running of the website. One very common question among the aspiring web developers and job seekers is ‘What is the difference between a web developer and a web designer, and ‘How does one differ from another’.
- A web designer uses graphics and graphic design software like Adobe Photoshop, Illustrator or InDesign to create a look for the website. A strong grasp on a variety of concepts including color and typography, special relationships, audience and user experience is required to be a good web designer. So, the main work of a website designer is to create the most aesthetic look possible for a website using software like Adobe Photoshop, InDesign etc.
Back End: The part of the application that lives basically on the server is called the backend of the website. Since this part is accessible to the website visitors and users, hence it is also known as the server-side of the website. The main objective of the backend is to make sure that correct data is sent out to the browser at the user’s request. Although it is not an easy process and a lot has to be done to retrieve the information from the backend and then display it to the user on the front-end. Let’s take an example to make the things more clear; A student wants to get his semester result from his college’s website. After filling the required form (enrollment number, Date of Birth etc) he submits the submit button. After the submit button is pressed, the website starts matching the information entered by the user with the information stored in his database. If the information is found to be correct, the back-end collects and processes the data from the back-end and sends it to the front-end of the website where the result is eventually displayed to the student. Back-end developers use languages such as Java, PHP, Ruby on Rails, Python, and.Net to get the work done. Back-end development is very much required to create a dynamic website. Dynamic websites are those websites whose data keeps on updating itself with time. For example, When you log into your twitter account after a fair amount of time, you are automatically greeted with the latest updates from people you follow on your feed. They’re not going to be the same updates that you saw yesterday. How did the page change? There’s no chance that any company would recruit employees just to manually update the news feed. Actually, a script on the Twitter back-end would have received the updates and re-generated the front-end accordingly. Examples of dynamic sites include Facebook, Twitter, and Google Maps. The back-end has three parts to it: Server, Application, and Database. Note: Technologies like MySQL and MongoDB are used for the database management. Full Stack We can define full-stack developer as someone who is highly proficient in one of the two ends but can also handle working with the other end whenever necessary. Basically, the full stack developers are familiar with both front and back-end development. However, they may not have the same depth of knowledge as someone who specializes in either front end or back end. This is why sometimes they are referred to as the ‘Jack of both trades’.
The Holy Trinity of Web Development
- Every HTML document begins with a HTML document tag. Although this is not mandatory but it is a good convention to start the document with this below mentioned tag:
- <html> : Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends with </html> tag.
- <head> : The head tag comes next which contains all the header information of the web page or document like the title of the page and other miscellaneous information. These informations are enclosed within head tag which opens with <head> and ends with </head>. The contents will of this tag will be explained in the later sections of course.
- <title> : We can mention the title of a web page using the <title> tag. This is a header information and hence mentioned within the header tags. The tag begins with <title> and ends with </title>
- <body> : Next step is the most important of all the tags we have learned so far. The body tag contains the actual body of the page which will be visible to all the users. This opens with <body> and ends with </body>. Every content enclosed within this tag will be shown on the web page be it writings or images or audios or videos or even links. We will see later in the section how using various tags we may insert mentioned contents into our web pages.
The whole pattern of the code will look something like this:
This code won’t display anything. It just shows the basic pattern of how to write the HTML code and will name the title of the page as GeeksforGeeks. is the comment tag in HTML and it doesn’t read the line present inside this tag. CSS (Cascading Style Sheets): CSS is used to stylize the HTML contents present on a website. This includes modifying the page color, font-family, font-size, element positioning and more. There are three types of CSS:
- In a separate file (external)
- At the top of a web page document (internal)
- Right next to the text it decorates (inline)
External Style Sheets: Separate files having CSS instructions with the file extension (.css). The main advantage of using external style sheet is that you can change the whole website’s style at once, without rewriting or modifying the style tag every page. Thus saving a lot of time and energy. However, the external style sheet must be linked into the HTML file by using the tag between for making it work.
Internal Styles: Placed at the top of each web page document before any of the content is listed. The internal style CSS codes are written between the head tags in the of the HTML file itself. Internal styles are very easy to find and they are given the second highest priority, next to the external style sheets.
Inline Styles: Placed right where you need them, next to the text or graphics you wish to decorate. The inline styles can be inserted in the middle of the HTML code. This gives the real freedom to specify each web page element, however, can make the maintenance work of the website difficult.
But can a website have multiple style sheets? Yes, but there will be some rules that will be followed. Have a look at the following example. Assuming that an external style sheet name as gfg.css has the following style for the <h1> element:
If the internal style is defined after the link to the external style sheet (like given below), the <h1> elements will be “green”: Example:
However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be “orange”: Example:
- Less server interaction: The user input can be validated before sending the page off to the server. This saves server traffic, which in turn make the website faster to load.
- The visitors don’t have to wait for a page reload to see if they have forgotten to enter something. For example, the website instantly notifying the user about the corrections needed in form before it is submitted.
- Such interfaces can be created that will change the font-style or the font-color of a link, once the user hovers over them with a mouse.
Please Login to comment...