learning HTML and CSS

This session is going to be verbose. Which means there's less concepts and more keyword based coding. This is the nature of HTML/CSS, that you need to know the right keyword.

Therefore, we will do online search to find out what we need.

Less to understand, more to do in this session.

how this works in industry?

The session is akin to how it works. You get a design, generally in Figma, sketch etc. And then you have to replicate that design using CSS.

Where new developers go wrong sometimes is not using the right semantic element for components, and thus, we'll cover that topic first.

what you can do?

Watch and take notes.
Use online search to look for the CSS properties I am using, or the HTML tag I am using to know more about it.
Try and code some of these pieces with me. I'll go slow.
Understand the major concepts. There are few concepts which are there in HTML/CSS which I'll be explaining, look out for that.

We get to usual programming next week.

what are we making?

A component library which we'll use to develop our portfolio and other projects.

Think of it as your personal bootstrap or material design.

components we need in library

typography

headings
paragraphs
small text

containers

fluid container
center container

lists

unordered lists (without bullets)
inline lists
reverse ordered lists

nav

navigation with brandname and nav items inline

header image
header heading

section

normal section
- heading center
- padding top and bottom
off white section
- background change

- big text
- inline lists
- all centered

concepts we will be covering

Intro to HTML. excellent guide on Mozilla Developer Network (MDN)
HTML file head vs body. Another guide from MDN
Semantic HTML. Tags which makes sense to both developers and users. More explanations here
Inline vs Block elements in HTML
CSS Selectors
CSS Box Model
CSS Variables

assignment

pointFour

Host your portfolio. Put all your projects and twitter, linkedin and other details.

Do what I did in live workshop and host your own portfolio with your details.

pointFive: assignment

Add two pages to the website

A blog listing page: similar to project listing page. For example see tanay's blog listing page
A blog reading page: When user clicks on a blog from the listing page it would open the blog for user to read. Example tanay's blog page

bonus: topics to explore

All of the above
Meta tags in head for your portfolio