My JavaScript Learning Code

Task

• framework vs library
• arial-label

Instructions for the Pricing Tables Assignment

Overview

• There are 3 folders in this repository:
  • pricing-table-1: ChaiPatti - Pricing Table
  • pricing-table-2: Chai Aur Fitness - Membership Pricing Table
  • screenshots: Screenshots of the above 2 pricing tables

What to do?

1. In each of the 2 folders (pricing-table-1, pricing-table-2), you will find an index.html file and a challenge.css file.
2. Your task is to write the CSS code in the challenge.css file to style the index.html file so that it matches the design shown in the corresponding screenshot in the screenshots folder.

Steps to Follow:

1. Open the index.html file in your browser to see the unstyled version of the page.
2. Open the challenge.css file in your code editor.
3. Write the necessary CSS code in the challenge.css file to style the index.html file.
4. Save your changes and refresh the browser to see the updated styles.
5. Repeat the process until the index.html file looks like the screenshot in the screenshots folder.

Tips:

• Use browser developer tools to inspect elements and test your CSS code.
• Break down the task into smaller parts and tackle one section at a time.
• Ask for help if you get stuck, but try to solve the problem on your own first.

Good luck and have fun!

Thinking

• Pair Programming
• Tutorial Hell (How to Get Yourself Out of Heels Tutorial)
• Find pain point
• For reference, prefere more readable content greater than video content.
• github code snippets [gist]
• Tracking [clockify.me] [wakatime.com]

----------------------------------------

FullStack Development Roadmap

📁FullStack
|
|---Extra Knowledge
|   |
|   |---Networking
|   |   |
|   |   |--Jargon of Internet
|   |   |
|   |   |---Internet, WWW, IP address, DNS, Routing, Isp's, Port
|   |   |
|   |   |---Browser to server data journey, Cookie & Session work
|   |   |
|   |   |---Request-Response Model, OSI Model, TCP/IP, TCP vs UDP, 
|   |   |
|   |   |---Protocols(HTTP, FTP)
|   |
|   |---Git & Github
|   |
|   |---Make PRD and Documantation
|
|
|
|---Frontend
|   |
|   |---HTML
|   |   |
|   |   |
|   |   |---Inline, id, class
|   |   |
|   |   |---Media & image
|   |   |
|   |   |
|   |   |
|   |
|   |---CSS [It is a creativity]
|   |   |
|   |   |---Selectors, Background color & images, 
|   |   | 
|   |   |---Inline vs Block vs Inline-block
|   |   | 
|   |   |---Pseudo-classes & elements
|   |   |
|   |   |---Flex-box
|   |   |
|   |   |---Grid (bento grid)
|   |   |
|   |   |---Box Model
|   |   |
|   |   |---Positioning 
|   |   |
|   |   |---Units(px, rem, em, vh, vw)
|   |   |
|   |   |---Specificity Algorithm (Cascading) [priority/weightage/presidence]
|   |   |
|   |   |---Media query
|   |   
|   |   
|   |---CSS Framework
|   |   |
|   |   |---Bootstrap
|   |   |
|   |   |---Materialize css
|   |   |
|   |   |---Tailwind css
|
|
|
|---Backend