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>
- Inline styles: Use the
- 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/.