Git Product home page Git Product logo

webdsc23's Introduction

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

webdsc23's People

Contributors

sobhanbera avatar vidhanshu avatar

Stargazers

Kumar Narendra Kodi avatar Girish Jagadish Sonune  avatar  avatar Manish Patle avatar Aman Brijbhushan Tiwari avatar

Watchers

 avatar  avatar Ayush Chaware avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.