Web 101

🌎 Web 101 #

There are tons of languages and frameworks used in Web Development, often people are confused on where to start. This learning path is structured focusing on the basic building blocks of the web HTML,CSS and JavaScript. You will also understand how the web works

πŸŽ“ Take Away Skills #

  • HTML
  • CSS
  • How the web works
  • Hosting and Deploying a website

πŸ› οΈ Prerequisites #

πŸ§‘πŸ»β€πŸ’» Programming Knowledge #

  • No prior programming knowledge is required.

πŸ“² Installation and Setup #

You need a code editor and a browser and to follow along this learning path. You can choose the code editor and browser of your choice. The preferred ones are listed below:

  • VS Code

    Light-weight code editor by Microsoft with a large ecosystem of plugins to help your workflow

    Install VS Code

  • Google Chrome

    A browser based on V8 JavaScript engine with developer tools.

    Install Google Chrome

πŸ’‘ Learning Session #

🧠 HTML #

πŸ› οΈ HTML Tags #

πŸŽ“ Topics to learn

<h1> <h2> <h3> <h4> <h5> <h6>
  • Learn about the difference between <head> and <body>

πŸ§‘πŸ»β€πŸ’» Learn from

πŸ§‘πŸ»β€πŸ’» Semantic HTML #

Semantic elements describes the meaning to both the browser and the developers. This helps in increasing the accessibility of a web application.

Non-Semantic Elements

  • <div> and <span> - does not convey about the content

Semantic Elements

  • <header> , <footer> and <nav> - defines the content

πŸ§‘πŸ»β€πŸ’» Learn from

πŸ“¦ Block and Inline Elements #

πŸ“Œ Block Elements

  • It takes up the full width available in the view
  • It starts on a new line, the browsers automatically add some margin
  • <p> and <div> are most commonly used block elements

πŸ“Œ Inline Elements

  • It takes up as much width as required
  • It does not start on a new line
  • <span> is one of the most commonly used inline element

🧠 CSS #

πŸŽ“ Topics to learn

- CSS Box Model
- CSS Selectors
- Flex and Grid
- Positioning

πŸ’‘ CSS Box Model #

It refers to a box that wraps around every HTML Element.It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

CSS Box Model

πŸ§‘πŸ»β€πŸ’» Learn from

πŸ’‘ CSS Selectors #

You can learn more about CSS Selectors in this MDN Docs

class and id are the most commonly used CSS selectors. Knowing their difference is very important.

You can learn and implement CSS Selectors in this game: CSS Diner. It covers multiple variations of selectors across different levels

πŸ’‘ Flex and Grid #

Flex and Grid are two commonly used layouts to style webpages. Knowing when to use Flex and Grid is an important skill. You can checkout this blog to know when to choose these layouts.

πŸŽ“Learn from

πŸ§‘πŸ»β€πŸ’» Learn by playing

Learn about flex and grid layouts by playing these games.

πŸ’‘ Positioning #

Positioning is key in designing the layout of a web application. You can learn about various positioning and how to implement it in this blog

πŸ’‘ CSS Frameworks #

These frameworks are designed to make the development process easier for developers and designers. Some of the most commonly used CSS Frameworks are listed below:

❄️ How the Web works #

Basic understanding of how the web works is important before dive into frameworks and libraries. You can checkout this blog by MDN to know more about it.

πŸ”– Resource Pool #

πŸ“„ Articles/Blogs #

πŸš€ Project Pool #

//TODO: Portfolio Page

Created with πŸ’™ by Advaith & TinkerHub