This document provides an overview of CSS and JavaScript concepts. It discusses CSS transitions, transforms, grid properties, and using media queries with CSS grid. For JavaScript, it covers data types, operators, strings, arrays, objects, functions, and loops. It also provides examples of transform properties, grid column/row definitions, spanning, min-max properties, and template areas in CSS grid.

1. Tutorial - 4
• CSS basic tricks:
⚬ Transition
⚬ Transform property
⚬ Basics of Grid
⚬ Rows & Graphs in Grid
⚬ Spanning multiple & Col in
Grid
⚬ Autofix & Min-Max
⚬ Creating layout using grid
⚬ Using Media with CSS Grid
• JavaScript
⚬ Introduction
⚬ Variables & Data types and operators
⚬ Strings in JS
⚬ String Function
⚬ Array 1D & MD
⚬ Array functions
⚬ If-else & Switch
⚬ Object in JS (basic to advance)
⚬ Functions in JS
⚬ this in JS
⚬ Alert, Prompt, Confirm, Consoles
⚬ Loops
￭ For, while, do-while

2. Yesterday's revision
• Visibility and z index
• Flexbox
• em, rem, vh and vw
• media queries
• selectors
• nth child
• before and after pseudo selectors
• box shadow & Text shadow
• variables & custom properties
• creating animation & transition

3. Transform
• transform helps to add more animations to your
element on DOM
• Some basic properties are:
⚬ transform: rotate(360deg);
￭ This rotate the element by 360 deg
⚬ transform: skew(40deg);
￭ This will make your elemnt skewed
⚬ transform: scale(2);
￭ Zoom in effect is applied by it

4. Some basic properties of transform (cont...):
• transform: translateX(123px);
⚬ Move element on X-axis
• transform: translateY(123px);
⚬ Move element on Y-axis
• transform: translate(123px, 123px);
⚬ Move element on both the axis
Just to support all above properties with an ease we use
transition property:
• transition: all 0.5s ease-in-out;

5. Grid system
• It'll help us to create the grid layout & eventually helpful in
development of layouts while developing responsive website
• NOTE: you have to apply now ---- display: grid
• some commonly used grid properties are:
⚬ grid-template-columns: 300px auto 100px;
￭ defines the width of columns of grid
⚬ grid-template-columns: 1fr 4fr 1fr;
￭ defines col width but in ratios e.g.: 1:4:1
⚬ grid-template-columns: repeat(3, auto);
￭ defines the width as "auto" for 3 columns , basically its kind of
looping function
⚬ grid-gap: 2rem;
￭ gives margin between all columns

6. Up-till now we have seen grid properties w.r.t. col now
we'll be looking into grid properties w.r.t. rows
• grid-template-rows: 1fr 1fr 4fr;
⚬ divide row wise in ratios
• grid-auto-rows: 2fr;
⚬ when we have many rows and we just want same
grid row size to all then we use grid-auto-rows

7. Grid with spanning
• Spanning means you'll be using grid design in a
combined format
• major properties to achieve spanning in grid
are:
⚬ grid-column-start , grid-row-start
￭ while combining grids it helps to define
starting point w.r.t col & rows

8. Grid spanning (cont...)
⚬ grid-column-end, grid-row-end
￭ defines the ending of spanning
⚬ grid-column: 1 / span 3;
￭ shorthand for col spanning
⚬ grid-row: 1 / span 3;
￭ shorthand for row spanning

9. Grid- minmax property
• property used here is:
⚬ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
• It is use full to build responsive layouts where we specify that
minimum certain width should be provided and maximum certain
width is provided
⚬ It's kind of similar to what we did in media-
query

10. Grid Template Area
• Why we use it:
⚬ to easily build the layouts area-wise
• Uptill now we have seen grid-template-row &
grid-template-columns now we are looking into
grid-template-area
• e.g:
⚬ grid-template-areas:
⚬ 'navbar navbar navbar navbar'
⚬ 'section section section aside'
⚬ 'footer footer footer footer ';

11. grid-area-template (cont...)
• grid-area-template must be provided a reference
by property named "grid-area" inside any
applied selector:
⚬ e.g:
￭ #navbar {
￭ grid-area: navbar;
￭ }
￭ #section {
￭ grid-area: section;
￭ }
￭ #aside {
￭ grid-area: aside;
￭ }
￭ footer {
￭ grid-area: footer;
￭ }

12. Grid with media query
Please lets code instead !!

13. JavaScrip
t

14. JavaScript (What, When, How, Why)
• What:
⚬ JavaScript is a scripting or programming
language that allows you to implement
complex features on web pages
• When
⚬ If you want to implement some logic to
your website then you use JS

15. • "JavaScript" is everywhere
⚬ It means doesn't matter its web
development or mobile development or in
IOT or on server side ,
￭ JavaScript can handle everything
⚬ On web it form base for many libraries like
React.js on Front-end and Node.js for
Backend even Node.js is used in IOT also
⚬ React Native is used for mobile
development

16. • Write javascript in HTML is possible via
<script> tag
• Most developer uses browser's devtool along
with its console for debugging and in general
while doing development
• NOTE: JavaScript is way more advance then
any other equally aged language like Java,
CPP or C
• Best combination in market is of MERN stack
⚬ Mongo-Express-React-Node

17. Datatypes &
operators
• JS has 7 types of datatypes only :
⚬ Number (x= 90)
⚬ String (x="hello world")
⚬ Boolean (x=true, y=false)
⚬ Object (x={first_name:"Hello"})
⚬ undefined (x=undefined)
⚬ null (x=null)
⚬ array (x=[])

18. Important links for datatypes in JS are:
• https://www.w3schools.com/js/js_datatypes.asp
• https://www.programiz.com/javascript/data-types
• primitive data types:
⚬ String, Number, Boolean, undefined & null
• reference or special or composite datatyes:
⚬ Array, Object and Functions

19. Operators in JS
• Following are the types of operators in JS
⚬ Assignment Operators
⚬ Arithmetic Operators
⚬ Comparison Operators
⚬ Logical Operators
⚬ Bitwise Operators
⚬ String Operators
⚬ Some special kind of Operators
• Lets jump to :
⚬ https://www.programiz.com/javascript/operators

20. Object in JavaScript
• Almost everything in JavaScript is either is object
or Primitives.
• Object form base for, function or class or
Number or Boolean or Date or Math or RegX or
Array , etc..
• e.g:
⚬ let person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};

21. How to create an object in JS:
• Using object literal
⚬ const person = {firstName:"John", lastName:"Doe",
age:50, eyeColor:"blue"};
• Using new keyword
⚬ const person = new Object();
⚬ person.firstName = "John";
⚬ person.lastName = "Doe";
⚬ person.age = 50;
⚬ person.eyeColor = "blue";

22. • Define an object constructor, and then create
objects of the constructed type.
⚬ function Person(first, last, age, eye) {
⚬ this.firstName = first;
⚬ this.lastName = last;
⚬ this.age = age;
⚬ this.eyeColor = eye;
⚬ }
• https://www.w3schools.com/js/js_object_constructo
rs.asp

23. • Create an object using Object.create()
⚬ var foo = new Foo();
⚬ var foo = Object.create(Foo.prototype);
Interview Question:
• Difference between new and Object.create
⚬ https://stackoverflow.com/questions/41
66616/understanding-the-difference-
between-object-create-and-new-
somefunction

24. Arrays in JavaScript
• 1-D arrays
⚬ const x = ['a', 1, false, -22]
• 2-D array:
⚬ const x = [[1,2], [2,3],67]
Question:
• const x = [1,2] + [2,3]
• const y = [[1,2],'90',[34]] + [[2,3],[5,5]]

25. Strings in JS
• const x = "a"
• const x1 = "aaaaa"
• const y = "a" + 121212
• const q = `aapppp${x}${y}`