DSC Charusat brings out a "Learning React" Series workshop for you all. So the first workshop of the series is on 19th Sept,20 (Saturday) and it will cover Basics of HTML, CSS and JS with ES6

1. HTML, CSS & JavaScript (ES6)
Learning React Series - I

2. Organizers
Jainam Mehta
Lead
Pratikraj Rajput
Tech Advisor

3. GitHub Code Link
https://github.com/charusat-
gdsc/event1-html-css-js

4. HTML
Link to our website:
https://dsccharusat.tech/

5. Some basic tags of HTML
● DOCTYPE - The declaration is not an HTML tag. It is an "information" to the browser about
what document type to expect.
● HEADER - The <header> element represents a container for introductory content or a set of
navigational links.
● FOOTER - The <footer> tag defines a footer for a document or section.
● META - The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data. Metadata is used by browsers (how to display content or reload
page), search engines (keywords), and other web services
● TITLE- The contents of a page title is very important for search engine optimization (SEO)! The
page title is used by search engine algorithms to decide the order when listing pages in search
results

6. Headers
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
● one or more heading elements (<h1> - <h6>)

7. Paragraph Tag
The <p> tag defines a paragraph.

8. Division Tag
The <div> tag defines a division or a section in an HTML document.
It is also used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript and
can be easily styled by using the class or id attribute.

9. Image Tag
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding
space for the referenced image.
alt - Alternate Text - used when Image cannot be fetched.

10. Block and Inline Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as
far as it can).
An inline element does not start on a new line and it only takes up as much width as necessary.

11. css

12. Inline, External & Internal CSS StyleSheets
With an external style sheet, you can change the look of an entire website by changing just one file!
An internal style sheet may be used if one single HTML page has a unique style. The internal style is
defined inside the <style> element, inside the head section.
An inline style may be used to apply a unique style for a single element. To use inline styles, add the
style attribute to the relevant element. The style attribute can contain any CSS property.

13. class and id
● ‘class’ attribute is used to define a class of HTML components. For eg: a class of form components.
These are especially useful when you need to reuse some styling or want to manipulate HTML
elements at mass.
● Can be accessed in JavaScript and CSS using .ClassName
● ‘id’ attribute is used to define a unique HTML component and must be unique across the entire
document.
● Can be accessed in JavaScript and CSS using #id

14. The HTML code that we will use
for all CSS Properties

15. CSS Box Model

16. Basic CSS Properties

17. Flexbox
CSS

18. Why to use Flexbox?
● Arrange items in better way
● Easy to use
● Responsive

19. Flexbox Basic Model

20. Link to Flexbox Code
https://github.com/charusat-
gdsc/event1-html-css-js/blob/Basic-
CSS/Flexbox/Flexbox.html

21. Javascript

22. Using Javascript in HTML
with <script></script> tag

23. console.log()

24. Variables in Javascript

25. Function in Javascript
● Name of the functions
● function()
● Block of code
● Calling
● Parameters (optional)
● Return (optional)

26. HTML DOM and Manipulation using JS
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM is a standard object model and programming interface
for HTML. It defines:
● The HTML elements as objects
● The properties of all HTML elements
● The methods to access all HTML elements
● The events for all HTML elements
In other words: The HTML DOM is a standard for
how to get, change, add, or delete HTML elements.

27. Event Handling
● Two most prominent methods to add event listeners to the HTML
elements.

28. Adding Element Dynamically
Can create a new element by using the document.createElement() function
and appending that element with the node that you like. createElement()
basically creates a new Node that can be appended anywhere you like in your
HTML document.

29. ES6 Introduction and Outline
ES6 or ECMAScript 6 is a scripting language specification which is standardized by ECMAScript
International.
ES6 allows you to make the code more modern and readable. By using ES6 features, we write less
and do more, so the term 'Write less, do more' suits ES6. ES6 introduces you many great features
such as scope variable, arrow functions, template strings, class destructions, modules, etc.
● Arrow Functions
● Variables
● Destructuring
● Classes and Objects

30. JavaScript Classes

31. Arrays in Javascript
● Want to hear something cool about
JavaScript arrays ?
JavaScript arrays allows us to store multiple
values of different data-types under a single
array into a variable.

33. Filter in Javascript
The filter() method creates a new
array with all elements that pass the
test implemented by the provided
function.

35. Array Map Function
Map functions are used for element manipulation inside your array.
They map the previous value of the array with the value which you return
inside your callback function.

36. Arrow Functions
Javascript (ES6)

37. Why to use Arrow Function?
● Simplifies the code
● Easy to use
● Creating anonymous function

38. Arrow Function Syntax

39. It’s time for some animations…
● You don’t need javascript to do animations!
● The following properties are used by animations:
○ @keyframes
○ animation-name
○ animation-duration
○ animation-delay
○ animation-iteration-count
○ animation-direction
https://github.com/charusat-gdsc/event1-html-css-
js/blob/master/CSS%20Animation/Animation.html

40. Now time for JS SoundBoard…
● Learn how to insert audio to your HTML page using JS
● Using <audio> tag
https://github.com/charusat-gdsc/event1-html-css-
js/tree/master/JavaScript%20Soundboard

41. Thank You!