FRONT END WEB DEVELOPMENT - PART 1.0 | The 101 Guide
Businesses hire web developers to create websites for their organisations. They are now a critical component for any business to stay competitive. Take a look on how to create customized web pages using HTML, CSS and JavaScript and get an essence of Front End Development
Have you ever thought of creating your own website or making one for a business. Are you looking forward to develop web applications. If yes, then you are at the right place to start with. Learn how to create customized web-pages using HTML, CSS and JavaScript and get an essence of Front End Web Development which we would discuss here in this series.
Businesses hire web developers to create websites for their organizations. They are now a critical component for any business to stay competitive. A website has a front-end and a back-end. The front end is what users see and interact with when they open a website i.e. the structure of the web page, its layout pattern, text styling, drop-down menus, interactive graphics, etc. The back-end comprises a server, an application and a database for storing data.
In the following series you would learn HTML5, CSS3, Twitter Bootstrap CSS Framework, which is the most widely used CSS framework today. Here we would cover JavaScript as a programming language of the web and the use of Ajax to retrieve data from the server and then dynamically update the content without reloading the whole page.
Introduction
Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.
Three Technologies that drive the web: * HTML (Structure) - provides structure to a website * CSS (Style) - makes a website look prettier(by the use of colors, formatting, text styling) * JavaScript (Behavior) - adds functionality and makes it user interactive.
Tools you need to install
- Google Chrome Browser (which already comes with chrome developer tool CDT)
- Sublime Text 3
- Git/GitHub
- Node.js
- Browser Sync
NOTE - Browser Sync gets installed using the Node.js package manager (NPM) installer so you need to install Node.js first before installing browser sync..
Role of HTML5
HTML stands for Hyper Text MarkUp Language. Hypertext is text which contains links to other texts and that’s basically the entire web, right? Markup means to mark something up, to annotate. So what HTML does is it annotates the content to tell the browser, or to tell some other machine out there, some other program out there, what this content is i.e. whether a heading, a paragraph ,a list,etc.
HTML is not case sensitive.
TIP : - Validate your html code on the w3c web validator site and keep a track of HTML5 standards (you can check for newly introduced attributes), SVG standards, CSS standards, JavaScript APIs in the web space to be able to tell you which browser supports what on [caniuse.com]().
Anatomy of an HTML Tag
Attributes:
- Every HTML element can have predefined attributes.
- An Attribute is a name value pair, which is kind of a meta data about the element itself that it’s being applied to.
- Attributes are specified only on opening tag.
Basic HTML Document Structure
Declaration : - <!Doctype html>
This declaration is used by the browser to distinguish between the compliant and non-compliant web pages. Compliant web pages are those which follow the HTML5 standards as proposed by W3C. * After the declaration, we have an html tag which contains the entire html document. It contains the head and body tags respectively. * The head tag contains items that describe the main content of the page. Things like what character coding should the browser use for the main content. It can contain authors description of the page, page title, and whatever other external resources are needed to render the page properly, among other things. * It’s always a good idea to specify the character set that the browser should know how to interpret the content of the webpage. The most commonly used character set is UTF 8. Also note that the meta tag is a stand alone tag. * Body tag contains the main contents of the web page i.e. paragraph elements, section, headings, links, lists, etc.
NOTE- The tag which opens first gets closed at the last. So if a paragraph tag opens within a section tag, the you should first close the paragraph tag then the section tag.
HTML Content Model
Content Model tell us which element is to be nested within which. HTML 5 split the two basic content models into seven categories.
The two basic types of content models are: 1. Block Level 2. Inline Level
Difference between block level and inline content models are:
Tip:- Refer to the W3C website to check which element comes under which category of content model in HTML 5 to understanding the nesting levels of elements.
Some new features of HTML5
HTML5 offers new semantic elements to define different parts of a web page which will help you to create your web pages easily.
It allows the browser to display certain characters it would otherwise interpret as part of HTML code and not something display to the user.
To provide characters which are not available on keyboard. For e.g. & copy for copyright symbol.
To safeguard against more limited character encoding e.g. & quot which might turn to some wierd character in some other character set.
HTML TAGS:
Keep up with the series to know about the most commonly used tags in the next part.
About the author
Veena Chaddha is a student at SRM University, pursuing a btech degree in computer science engineering. She is an avid learner and a tech enthusiast. Her skills are HTML, CSS, Bootstrap, Nodejs , Flutter and is looking forward to be a software developer. She is well versed in English and has good communication skills.
Reviews
If You find it interesting!! we would really like to hear from you.
Ping us at Instagram/@the.blur.code
If you want articles on Any topics dm us on insta.
Thanks for reading!!
Happy Coding
