Lecture.
1. General
i. Vscode (an editor)
Create account to sync settings
extensions - code spell checker, code time, material icon theme, path
intellisense, prettier,
starting project - create new folder for new project, general folder for html
work, general folder for learning
explorer - creating folder, creating file, collapsing
shortcuts - ctr \ (to split screen), ctrl b (to collapse sidebar)
ii. debugging step
ask google, ask ai, revisit, ask senior.
iii. good practice
comment, clean readable code
iv. how to create google meet
2. HTML - project, build portfolio website
i. introduction to web development
brief on html, css javascript
creating html files
ii. html element (h1, p, a). html tag (<p> </p>), html attributes (href, src,),
iii. simple html syntax { <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>}
iv. element to know
h1 to h6
p
a (anchor) href, target, #
img ,alt, width="400", height="", img formats
list (ul, ol)
strong, em
v. Html Comment
<!-- Write your comments here --> (ctrl /, ctrl ku)
vi. Html styles
inline, internal, external
style="property:value;"
background-color, color, font-family, font-size, text-align
day 2.
1. html tables
-- table-layout: fixed;
-- border-block-end: 2px solid;
--border-block: 2px solid;
2. block and inline element
-- span, div, p, br, hr
3. html class, id. (linking to id element)
4. iframe
5. html file paths, (../)
6. html percentage, vw, vh, max width, min
7. html semantics
8. html a, target
Day 4
-- design Nigeria flag in a big box with dotted border, add phonee image and make
it a link to google.com
1. sub, sup, del, a mailto:, many other tags