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?

1. Watch and take notes.
2. Use online search to look for the CSS properties I am using, or the HTML tag I am using to know more about it.
3. Try and code some of these pieces with me. I'll go slow.
4. 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

links

• primary link
• secondary link

lists

• unordered lists (without bullets)
• inline lists
• reverse ordered lists

nav

• navigation with brandname and nav items inline

header

• header image
• header heading

section

• normal section

  • heading center
  • padding top and bottom

• off white section

  • background change

footer

- 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

1. Bonus Work (Optional): A blog listing page: similar to project listing page. For example see tanay's blog listing page
2. 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 (optional): topics to explore

• All of the above
• Meta tags in head for your portfolio