lessonThree: learning HTML and CSS VIDEO VIDEO
This session is going to be
verbose. This means there are fewer 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 an
online search to find out what we need.
Less to understand, more to do in this session.
how does this work in the 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 an 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 a few concepts that 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 that we'll use to develop our portfolio and other projects.
Think of it as your personal
bootstrap or material design. components we need in the 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 brand name and nav items inline header image header heading section normal section heading center padding-top and bottom off white section - 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 that make sense to both developers and users. More explanations here Inline vs Block elements in HTML CSS Selectors CSS Box Model CSS Variables bonus (optional): topics to explore All of the above Meta tags in the head for your portfolio assignments for markFour and markFive
Host your portfolio. Put all your projects and Twitter, LinkedIn, and other details.
Do what I did in the live workshop and host your own portfolio with your details.
Have a Blog listing page similar to a project listing page**.** For example, see tanay’s blog listing page Your blog listing page should list down all your blogs with either link to your Hashnode, dev.to etc. blogs or your blog reading pages, with a call-to-action button for READ MORE. Example tanay’s blog page. stuck? need help?
If you have doubts anywhere during levelZero, we have a 21k+ strong developer community on Discord.
Discord Server and ask doubts in the