Front-end Technologies

• HTML
• CSS
• JavaScript
• Bootstrap framework
• Angular Framework
• ReactJS

Backend Technologies

• Node.js
  • express.js
  • nodemoon
  • cors
  • dotenv
• PHP
• C#
• Java
• Python

Databases

• MongoDB
• Mysql
• SQLite
• Firebase
• Postgressql
• Oracle

• VCS or (Source Code Management)
  • Distributed VCS
    • Git,Mercurial
  • Remote(central) VCS
    • Github,Bitbucket

Git

• git init
• git add filename
• git add filename1 filename5 filename100
• git add . or git add --all
• git status
• Do git configurations(set user.name and user.email)
• commit data with commit message
• Push the code into Github

HTML5

• Hyper Text Markup Language

• Semantic elements

  • header
  • section
  • article
  • aside
  • footer
  • table

• Block level elements

  • h1 to h6
  • p
  • div
  • allsemantic elements
  • text with start from newline

• Inline elements

  • span
  • img
  • a
  • nav
  • form
  • input
  • textarea
  • legend
  • sup
  • sub
  • ul
  • ol

Task:

==========

• Audio
• video
• canvas
• progress
• datalist
• meter
• select

CSS

• Cascading Style Sheets
• Types of CSS
  • Inline CSS
  • Internal CSS
  • External CSS
• Syntax of CSS

selector {
      css properties
}

Selectors

• Simple Selectors

  • Universal selector(*)
  • By Element Name
  • Grouping selector(,)
  • Class selector
  • Id selector

• Combinators

  • Descendant selectors ( )
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)

• Pseudo class selector

• Pseudo element selector

• Attribute selector

Box Modal

• Margin
• Border
• Padding
  • padding:10px( for all adjacent sides)
  • padding:10px 30px(top and bottom,left and right)
  • padding:10px 300px 50px(top,left and right,bottom)
  • padding:10px 20px 30px 40px(top,right,bottom,left)
• Width

• 1rem:16px

Flex-Box

• display
  • none
  • inline
  • block
  • inline-block
• position
  • static
  • relative
  • absolute
  • fixed
  • sticky
• align-content
• align-items
• align-self

Responsive Web Design

Flex-Box

• display
  • flex
    • flex-wrap
    • justify-content
    • flex-direction
    • flex-flow Task 2:
• Index page
• registration page
• Login page

Reference links

• GITHUBLOGIN
• flaticon
• SVG
• HTMLcolorcodes
• WebAIM Contrast checker