I'm Kulasekaran

Mechatronics Engineer

HTML - Hyper Text Markup Language

Introduction to HTML

  1. HTML
    • Websites are made of HTML, CSS and JS files. A website can't function with CSS or JS files alone.
    • But a website can work be made with HTML file alone.
    • HTML = Hyper Text Markup Language
    • HyperText = Parts of text that link to other documents
    • Markup Language = HTML Tags. People used to mark parts of a text with certain rules to denote which needs to be italicized, bold, etc., similarly HTML is a markup language that uses HTML tags to do the same.

Anatomy of HTML Tag

  1. Self closing tags
    • Some tags require both start and end tag. But some are self closing meaning they don't require a closing tag
    • For example: the <br> tag
  2. HTML attributes
    • Attributes lets us specify some rules about the function or appearance of the tag.
    • For example, the <hr> is called a Horizontal rule tag that creates a horizontal line. with the attribute called size we can define the thickness of the horizontal line
    • <hr size="3"> will make the line 3 pixel thinkness
    • <hr> is also a Self closing tag
  3. devdocs.io
  4. codeopen.io
  5. developer.mozilla.org
  6. Commenting in HTML
    • Use "<!-- -->" to comment
    • For Multiline comment, use the "-->" on a different line and type the text in between them

The HTML Boilerplate

  1. Doctype
    • The <!DOCTYPE html> tells the browser which version of html the file was written in. The latest version is the html5 and the above line denotes html5
  2. html tag
    • Every element in the html file will be inside the <html> </html> tag. Actually the contents go inside the body tag and the body tag is inside the html tag itself
    • html tag has an attribute called lang which denotes in which language the text content of the website is written in. For example, <html> lang="en" denotes that the language is in english
    • Its not important for those who can see and read the page. But it's important for the people who can't as they rely on some computer narrating tools, which requires to know in which language the content is in for the correct pronounciation
  3. Head tag
    • Important information required for the website is placed inside <head> </head> tag, but its not visible to the user
      1. <meta charset="UTF-8">
        • For example, it includes the <meta charset="UTF-8"> to denote which charset that the text in the file should use so that the browser can render them correctly. Some character sets may include emojis and some may not. So, it is good practice to always include and use the right charset for the website
      2. <title>
        • The title tag denotes the title of the page. Its the text that gets displayed in the tabs of the browser.
    • There are other things that can go inside the head tag, its not discussed here
  4. Body tag
    • This is where the content of the website goes

Structuring text in HTML

  1. <P> tag
  2. <i> tag vs. <em> tag
    • The i and em tags both are used to italicize the words. But the em tag not only italicizes but also tells the system narrator to emphasize the word while it being read
  3. <b> tag vs <strong> tag
    • Similar to the i and the em tags, strong and b tags both are used the make the text inside them stand out by bolding them
    • But strong is a logical state and b is a physical state.

HTML lists

  1. Unordered lists (<ul>)
  2. Ordered lists (<ol>)

HTML Image elements

  1. <img> tag
    • the <img> tag requires an attribute called src which is called as source, which is the locaction of the image that needs to be displayed
    • The source can be an online link or a computer directory
    • In the case of a computer directory, if the .html file as well as the image are in the same directory, then only file name along with the extension (for eg. src="Wallpaper.png") is enough
    • But if they are in different directory, then the full path of the image is to be entered
    • Apart from the src attribute, there is another attribute called as alt which stands for alternative text which is used to display a text in case if a browser can't locate or render the image
    • the alt tag also helps in search optimization and increases ranking of the website by making it easier for google to fetch relevant information
    • Also provide an attribute called title="" to get a text displayed when cursor is hovered over the image

HTML Links and Anchor Tags

  1. The <a> (Anchor) tag
    • <a> tag is used to include links in the website. It requires an attribute called href which contains the link
    • after the href attribute, type in the text that needs to be displayed for that link
    • For example: <a href="https://Google.com">Google's Home Page</a> will look like this: Google's Home Page

HTML Tables

  1. <table> tag
    • attribute: border="1" - creates a border of 1 pixel thickness
    • <tr> - Table row - creates a table row
    • <td> - Table data - contains the cell data
    • <thead> - Table Head
      • <th> - Table head cell
      • <th> elements work even without being inside the <thead> tag as most browsers know where th elements need to be
      • Then the reason or use of these table head is in situations where we would want to stylize the table headers and data in a different way
      • Rowspan and Colspan - attirbutes that denote the width and height of the cell respectively in terms of cells
    • <tbody> - Table Body - contains all the data of the table
    • <tfoot> - Table Foot

Using HTML Tables for Layout

HTML Forms

  1. <form> tag
    1. <label> tag
      • It's the name of the details that are asked in a typical form: Name, D.O.B. These are called labels
    2. <input> tag
      • type attribute - what datatype must be entered in the input box. submit is also a type.
      • name attribute
      • value attribute - the data itself
      • For more attributes of the input tag, visit: Other input types

Forms in Practice

  1. Text Area
    • Text area has two required attributes called rows and columns which is nothing but the length and width of the text area
    • The text area can be modified from the browswer itself, the rows and cols data denote the initial size of that text area
  2. The form tag has an attribute called action which says what to do when an action like clicking the submit button is performed
  3. The email input type of the form tag automatically checks whether a valid email address was typed
  4. there is an action called mailto which opens up the default mail client with the input that was typed in. This also requires the method="post
  5. For example: action="mailto:kulasekaranslrk@gmail.com" method="post"
  6. There is another form attribute called enctype, which stands for encoding type, which like the UTF-8 in our html document, specifies in what type the form data must be encoded. By specifying this, when using the form, the data will have only the plain text that was typed onto the form (it won't have the extra symbols that will be there when not specified)

Publishing website in GitHub

  1. Create a public repository and add the html files
  2. The website's html file must be named "index.html". This is mandatory otherwise the website will not work.
  3. Make sure all the data sources are pointing the right directory, otherwise they won't show up in the website
  4. Once the files are uploaded, go the repo setting --> Pages --> source --> choose the branch --> save
  5. github will take some time and then refresh the page. There will be a link shown. This link can be shared with anyone and they can see the website without needing any of the files

CSS - Cascading Style Sheet

33. Introduction to CSS

Inline CSS

  1. Changing Background color using css
    • use "background-colo: colorname;" inside the body tag of the html document to change the background color of the whole page
    • Visit this link: changing Bg-color using css to learn more about this backgroud-color attribute
    • You can also change the background color with hexvalue, RGB, HSL, control transparency of the background color by including the alpha channel, etc.,
    • Visit Colorhunt.co website to find interesting color palettes created and liked by artists and fetch their hex values
    • Install the vscode extension called pigment to visualize the color when you type its value in the editor
    • Also visit Css Color mdn site to know what name of the color to specify according to its hexvalue

Internal CSS

  1. Internal CSS
    • Create <style> </style> inside the head section of the html
    • Inside this <style> </style> specific sections of the page can be edited.
    • For Example, to change the bg colors of the level 1 headings alone, type h1{background-color:colorname}
    • Visit: Border-style
    • The customizations above mentioned only applies to the html file that is being worked on. To make it global, that is, to make it get applied to all its sister pages, it needs to be in a external css

External CSS

  1. Creating an external stylesheet
    • Create a folder named css in the root folder of the html files
    • Create a file named styles.css
    • Cut and paste the data inside the <style> </style> into the styles.css file
    • Now on every html document's head section, add a link tag
    • This link tag has two attributes: rel meaning relation and href
    • set the rel="stylesheet" and href="css/styles.css"
    • This will modify the appearance of all the html files that has this link in their head section

Debugging in CSS

The Anatomy of CSS Syntax

CSS Selectors

  1. Class Selectors
    • EmojiPedia
    • The above site lets users use different kinds of emoji from various operating systems
    • When an img customization is present in a styles.css file, that customization will get applied to all the images that is on the website
    • To apply different customization to different types of images, For eg: Having the Background color of images that has a dog as red and having the background color of images that has a cat as green, we need to include a class attribute inside the img tag and then target customizations based on classes and not on tags
    • Lets have two classes as dogs and cats
    • In the styles.css file, add .dogs{background-color:red;} and .cats{background-color:green;}
    • The dot(.) in front represent that the following is a class and not a tag
    • Note: commenting in CSS is done within /* */. Have them on different line for multiline commenting.

Classes vs. Ids

  1. Id selectors
    • Use the # symbol to target Ids
    • Note:The customization based on Classes and Ids will override that of the general tag customization. Meaning, Even if for example, an img tag customization is already present, a specific class customization of the img will override the general one
    • The difference between classes and ids is that, classes can be instanced at more than one places. But Ids cane be instanced only once
    • For example, if there is a h1 tag with the id="heading", then this id="heading" can't be instanced anywhere else on the code. But the classes="dogs" can be instanced any number of time
    • They both are used to specifically target the customization across the elements. But classes target a specifig group of elements whereas Ids target a single unique element
    • A tag can have more than one class name. for example, If all the dog class images needs to be circular, it can be done as: class="dogs circular" And then can be targeted as: .circular{border-radius:100%;}
    • But a tag can't have two Ids. If more than one id was included, it won't be considered as a valid id and its customizations will not get applied. This is another difference between classes and ids
    • One of the uses of class is for easier and simple navigation inside the same page. In many website, there will be a bar at the top with different sections like: Home, contacts, downloads, etc., These sections can have their separate html pages or its content can be on the same page as them.
    • For example, when the contents are on the same page, for easier navigation, in the href of these sections, the id of these contents can be provided and so when clicked upon, the page will automatically scroll to the position of these section. This is another advantage of using ID
  2. psuedo classes
    • The psuedo classes are used to perfom a change in the element when the user, say for example, hovers the mounse pointer over an element (but not clicking it)
    • Note: The psudo classes begin with a colon(:) in front. The syntax is tag name:pseudo class
    • For example, There is a pseudo class called :hover. It can be used to make changes to an element only when it is being hovered. To do this:
      1. Go to styles.css
      2. img:hover{background-color:blue;}
    • This will change the background of the image to blue only when the mouse cursor is brought on top of any image.
    • Note: The hover customization doesn't work if an inline CSS syling is present as it has the most precedence
    • Check this: site to learn more about different pseudo classes available

Intermediate CSS

Favicons

HTML Divs

  1. The Div element
    • Its called the Content division element, which divides the page into several divisions and let's customizing the layout of each of them separately
    • Div is an HTML element and it doesn't do much of anything without CSS
    • Div by default has a height of 0px Unless anyother height is specified or has contents inside it

Box Model of Website styling

CSS Display Property

  1. Block elements
    • Block elements are those which take up the whole width of the viewport unlike imgaes.
    • So when two paragraphs are inserted, they naturally occur as in new lines, since paragraphs, headings, etc., are block elements
  1. Span Tag - Inline Block elements
    • To achieve that, a tag called span needs to be used
    • It is achieved as follows: <p> a <span class="pro">pro</span>grammer</p> and then the Css modification of the class pro
    • Span tag will be very useful in formatting one part of the text. Just like the div tag, span tag don't do very much unless they are used in conjunction with css
    • Some common inline elements:
      • spans
      • images
      • Anchors
    • Spans seem like they have the advantage since they can be stacked next to each other unlike the block elements, so one may think that why block elements are needed anyway
    • The reason is that, unlike block elements, Inline block element's width can't be adjusted
    • On the other hand, even if the width of the block element's are adjustable, it still doesn't let other elements to sit next to it
    • chaning the display value of a block element to inline doesn't do any good because the width can't be changed once it becomes inline
  2. Inline-block elements
    • This is where Inline - block elements come in which give in the best of both worlds
    • They can be stacked next to each other and still their widths can be modified
  3. None elements
    • This display type is like it deletes the element with the display property as none
    • Imagine a situation in which a quiz is being attended on a site. To hide/show the answer at the click of a button can be made by changing the display property to none and back

CSS Static and Relative positioning

  1. Position property
    1. Static
      • The default positioning of all elements
    2. Relative
      • This positions the element relative to how it would have been positioned had it been static. Say an img would have appeared at 0 margin on the left. if its attribute was changed to position: relative; left: 30px;. Then the image would appear with a gap of 30px on the left
      • Just by changing the position of an element to relative, no changes will be made unless it is accompanied with one of the four coordinates that mention the change
      • The coordinates order is: Top, Bottom, Left, Right
      • NOTE:When an element gets pushed due to relative positioning, it doesn't affect the position of any other element when it gets shifted.
      • NOTE:Even after the element's change in position, its old posiition is still occupied by the same element. Its like the element hid itself in its original position and moved its copy to the new position, that is relative to the old one
    3. Absolute
    4. Fixed

Absolute Positioning

  1. Absolute Positioning
    • In abosulte positioning an element is positioned with respect to its parent
    • For example, if an image was contained within a div, and the img's position was absolute and had right: 30px; then the img will be shifted to position such that it has 30px right margin from the right end of the div's box
    • Unlike relative positioning, which leaves a ghost of the element behind so it won't affect the other element's positions, absolute positioning does affect the position of other elements when an element gets moved
  2. Fixed Positioning
    • When an element's position is fixed, it will be still visible even when scrolling throught the page. Like the top bars or the side bars that has the items like contacts, profile being visible even when the page is scrolled down

The dark art of centering elements

  1. Text align property
    • In the external css, inside the body tag selector, put text-align:center;
    • This will make all the Inline-block elements like images and the full width block elements like the texts to be aligned at the center of the webpage

Font styling in CSS

  1. Common CSS Font families
    1. Cursive
    2. Fantasy
    3. inherit
    4. monospace
      • This is used mostly for coding as in this font all the letters of a word will be of equal width.
    5. sans-serif
    6. Letter don't have tiny feet linke structures
    7. The default sans-serif font for most browswers is the arial font
    8. serif
      • For most browsers, the default serif is the Times font
      • Letters have tiny feet like structures
  1. Font embedding
    • But there is a way to use the font that seems good and still make it get displayed whether or not the user's system's able to render it.
    • Use: Google fonts
    • To embed the font, copy the font's link on the site and past it in the head section of the html file
    • Then go into the css section and paste the text in the CSS rules to specify box in the site, into the element's style

Adding content to the site

CSS Sizing

CSS Float and Clear

  1. Float
    • There is a div containing a pragraph and an image. The image is on top of the text.
    • By changing the float property of an img tag to, say left, the text which was at the bottom of the image, will now wrap around the image, meaning the image will float on the left, there will be text to the right of it and also to the bottom of it, if the paragraph's height is more than that of the image. Kind of what we see in school books
  2. Clear
    • This is opposite to what float does. Suppose if only heading is to be wrapped around an image and the paragraph should be at the bottom of the image, by changing the clear property of the text to clear:left will bring it down to the image

BOOTSTRAP FRONTEND FRAMEWORK

Introduction to Bootstrap

Bootstrap installation

Web Design 101 - Wireframign

  1. Wireframing
    • Wireframes are low fidelity representation of the website design. It is the first step that should be done when designing a website from scratch
    • It is meant to be done with pencil and paper and roughly sketch out the layout of where things should be
    • SneakPeekIt is a cool site that lets users download wireframe template sheet that can be printed out and drawn upon
    • Another way is to use the industry standard tool called Balsamiq . It is not a free tool.
  2. Mockup
    • This is kind of opposite of wireframing
    • Its like taking a screenshot of the website from the future

Boostrap NavBar

  1. Navigational bar
    • create a nav element by using <nav> </nav>
    • Give it a class name of navbar
    • Then create an unordered list inside the nav and give the list a class name of navbar-nav
      • Then create an item by using the li and give it a class name of nav-item
    • Finally create an anchor element inside the item and give it a class name of nav-link
    • As usual give the href of the anchor tag the appropriate link
    • An appropriate navbar has been created
    • But this navbar class will make the navbar items get stacked on top of each other as more elements are added into it. But that's not how a normal navbar looks like
    • to make the items get arranged next to each other, give an additional class name of navbar-expand-lg next to the already existing navbar class in the nav element
    • When using lg (large), the navbar will be horizontal on laptop like large width devices and will appear vertical when viewed in smarphone like low width devices
    • Instead of lg, which means large width devices like laptop, if md (medium) was used, then for both laptop and say tablets, the navbar will be horizontal and for smarphones it will be vertical
    • To make the navbar appear more clearly, a background class can be added along with the two already added classes. Add bg-light for a very subtle light background navbar
    • By default, the navbar items will look blue in color, and this can be changed by adding one more class called navbar-light to make them appear with black text color
  2. classes - colors
    • primary - blue
    • secondary - gray
    • success - green
    • danger - red
    • warning - yellow
    • info - light blue
    • light - white
    • dark - black
    • link - text will be blue with underline
  3. .navbar-brand
    • An element with the class as navbar-brand will appear on the top left corner of the page
  4. ms-auto
    • From all the above things, the navbar will look with the brand and the three links, all arranged one after the other. But this looks a bit clumsy. To push the links onto the right and keep the brand alone on the left, add a class to the ul tag of the navbar
    • Add ms-auto. This will create a margin from the start of the unordered list and auto means, it will push the contents to the right as much as possible. m - margin
  5. toggler
    • Now, the three links are on the righ the navbar with the brand on the left of the navbar. But when the screen size gets so small that its not possible to see all the four of them in a single line, the navbar will get bigger in height and make the links appear vertical
    • But it will be better if all the three links are visible inside a drop-down list. Well that's what a toggler is for
    • The toggler is a simple button with three horizontal lines. when clicked on it will show the contents inside it as a drop-down list
    • Add the following into the code:
      <button class = "navbar-toggler-icon" type="button" data-bs-toggle="collapse" data-bs-target="toplinks" aria-controls
      <span class="navbar-toggler-icon"></span>
      </button>
    • Then create a div around the contents that are needed to be collapsed upon and give the div a class name that is given in the data-bs-target inside the toggler, in this case it is toplinks
    • the fixed-top class can be used inside the navbar to make it fixed to the top so that it won't disappear while scrolling

Setting up our new project

Bootstrap grid system

  1. Class="row" and Class="column"
    • Bootstrap divides the columns into 12 parts. They can be used with class names as col-1 till col-12
    • Col-6 takes up 50.0% of the width
    • Col-4 takes up 33.3% of the width
    • Col-3 takes up 25.0% of the width
    • Col-2 takes up 20.0% of the width
    • But still, when changing the width of the screen, the columns stay the same and are not responsive
    • To make it responsive, mention the size in the class when creating the columns. For example, instead of col-6, mention it as col-md-6. This will keep two columns of size 6 next to each other when the screen is large and medium (laptop and tablet), and when screen is (small) phone sized, it will stack on top of one another

Bootstrap containers

  1. class="Container"
    • Create a div element with some text content inside it
    • Give the div a class name of container
    • Now, since the div has a class of container, it makes the div responsive when the the window is resized or when the content is viewed from different width devices
  2. Class="conatiner-fluid"
      3. fluid container's function is similar to that of the regular container, but fluid containers can take up 100% of the width, whereas the regular ones do not.

Bootstrap Buttons

Intermediate Bootstrap

Bootstrap Carousel

Bootstrap Cards

CSS Z-index stacking order

Media Query breakpoints

Code Refactoring - Be a better programmer

Combining CSS Selectors

<div class="container title">
<h1> Hello there </h1>
</div>

<div class="container">
<h1 class="title"> Hi it's me </h1>
</div>

<div class="container">
<h1> I'm Here !!! </h1>
<p> This is fun </p>
</div>

CSS selector priorities

Creating a Website that people love

Web design principles

  1. Color Theory
  2. Typography
  3. UI Design
  4. UX Design

Color theory

Typography

UX design

UI design

JAVASCRIPT

Introduction to JavaScript

Javascript alerts

Datatypes

  1. String
  2. Numbers
  3. Boolean

Variable

Naming conventions

String length

String slicing

Changing case

Functions

Karel the Robot

Intermediate Javascript

Conditional Statements

Arrays in Javascript

DOM - Document Object Model

Adding JS to website

  1. Inline
    • body onload="alert('hello');". The onload method is used to do something when the website laods up
  2. Internal
    • <script>alert('Hello');</script>. Using the script tab, snips of javascipt can be added anywhere in the document
  3. External
    • <script src=""></script>. Add the location of the .js file inside the src attribute
    • The position of adding the external css is important. If it was placed before the css, then the css won't get applied until the js code gets finished.

DOM

Selecting elements with JS

Chaning styles using JS instead of CSS

JS vs CSS

Text manipulation using JS

  1. InnerHTML method
    • Consider the code: <h1><strong>Hello</strong><h1>
    • In the above HTML, if document.querySelector("h1").innerHTML(); was used, then it would return "<strong>Hello</strong>"
    • So innerHTML can be used to add code on the fly
  2. textContent method
    • Whereas the textContent(); method would only return the "Hello"
    • textContent can be used to add / modify content on the fly

Manipulating attributes of HTML elements

Dice Game Challenge

Advanced Javascript & DOM Manipulation

Adding Event listeners

Drum kit

Higher Order functions

Playing audio in Website

Constructor function

Switch statement in JS

objects and methods

checking Key Presses

JQuery

What is jQuery

Incorporating jQuery into the website

Minification

© 2023 Kulasekaran.S