neoG Camp 2023 waitlist is open

Need Help?

lessonThree: learning HTML and CSS

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?

  1. Watch and take notes.
  2. 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.
  3. Try and code some of these pieces with me. I'll go slow.
  4. 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
  • primary link
  • secondary link

lists

  • unordered lists (without bullets)
  • inline lists
  • reverse ordered lists
  • navigation with brand name 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 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

markFour

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.

markFive -

  • 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.

Go to Discord Server and ask doubts in the general-coding channel.