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

<head>
<meta>
<body>
<p>
<h1> <h2> <h3> <h4> <h5> <h6>
<a>
<div>
<span>
<img>
  • 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