FRONT END WEB DEVELOPMENT - PART 1.0 | THE 101 GUIDE

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.Source Google


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

Source Google* HTML consists of series of elements. * HTML elements are represented by tags. * For example to represent some content in paragraph, we use p element inside a tag i.e. <p>….</p>. Such elements have an opening and closing tags. * Now some elements are inside self closing tags which do not have content inside them like <br> for line break or <hr> to make a horizontal line. (SELF CLOSING TAG is an an xml type of shorthand notation).

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.

Source Google


BASIC HTML DOCUMENT STRUCTURE

Source Google

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.Source Google


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:Source Google

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.Source Google


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.Source Google

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.Veena Chaddha


VEENA CHADDHA

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
Hey, wait!

Before you dive into the exciting Article, wanna join our newsletter list, We promise we will not spam