home

Web Workshop day 03

HTML

  • HTML Semantic Tags
  • Deploying to netlify

CSS

  • Introduction
  • How to write css for our webpage
    • Inline styles: Use the style HTML attribute to declare basic properties. eg: <h1 style="color: white; background-color: black;">This is a white text with black background</h1>
    • The style tag: Use the <style></style> tag inside your head tag to target and style html elements of your page. eg:

      <html>
        <head>
          <style>
            h1 {
              color: white;
              background: black;
            }
          </style>
        </head>
        <body>
          <h1>White text on black bg</h1>
        </body>
      </html>
      
  • Css file basic structure and terminologies
    • ruleset?
    • css declarations
  • Some simple css declarations (margin, padding, colors, borders, font-size, width, height)
  • CSS units (rem, px, %, vw/vh)
  • color formats (color names, rgb, rgba, hex, hsl, hsla)
  • CSS Box Model
  • Design inspirations

Assignments

  • deploy your existing portfolio website that you have coded in session 2 on https://netlify.com. Those who didn't do that assignment will have to make a website first in order to deploy it on netlify.
  • Create a Github (https://github.com) account (we'll talk about github later in the workshop)
  • Download and install git from https://git-scm.com/.

Author: Siddhant Kumar