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.
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.
properties
I am using, or the HTML tag
I am using to know more about it.We get to usual programming next week.
A component library which we'll use to develop our portfolio and other projects.
Think of it as your personal bootstrap or material design.
normal section
off white section
- big text
- inline lists
- all centered
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
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.
Add two pages to the website