web-with-gdsc-html

Session - 1 HTML

VS code download link:

https://code.visualstudio.com/download

VS code installation steps:

https://medium.com/nerd-for-tech/install-visual-studio-code-fe3908c5cf15

Extensions to be downloaded

1. Live server
2. Html snippets

Summary

What is HTML?

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content

Part - 1 (Basics)

• Difference b/w html, css & js
• Basic structure of HTML document
• What is a tag, attribute, and element.
• Headings and paragraphs
• Various text formatting tags (strong, b, i, em, pre, code, kbd, hr, big, small)
• Anchor tag
• Image tag

Part - 2 (Page layouting & Intermediate html)

• Block and Inline elements
• Types of tags
  • Semantic
  • Non-semantic

Part - 3 (Page layouting & Intermediate html)

• List
• Table
• Form
• Iframe

Session - 2 CSS

Summary

What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on website.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once

Part - 1 (Basics)

• Syntax of css
• Three ways to insert CSS
  • Inline
  • Internal
  • External
• Selectors
• Id & class, universal & grouping
• Combinator selectors
• Pseudo class selectors
• Pseudo element selectors

Part - 2 (Intermediate)

• Text properties
• CSS font properties
• CSS background properties
• Specificity, !important & calc(), max(), min()
• Borders

Part - 3 (Advance)

• Margin, padding & box model
• CSS units (px, em, rem, %, vw, vh)
• Lists and table CSS
• Scrollbars
  • overflow property

Session - 3 CSS

Summary

What is Layouting?

• Layouting can be defined as a structuring the content on the webpage
• There are various layouting system in the css for example: float, flex-box, grid.

Topics discussed

• CSS positions
• CSS flexbox
• CSS grid
• Responsive web design
  • media queries
• CSS Animations