Web development basics (Part-3)
Download as PPT, PDF1 like89 views
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.
![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=[])](https://image.slidesharecdn.com/tutorial-4-210828155601/85/Web-development-basics-Part-3-17-320.jpg)
![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]]](https://image.slidesharecdn.com/tutorial-4-210828155601/85/Web-development-basics-Part-3-24-320.jpg)
Web development basics (Part-3)
- 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}`