Design and Develop A Medicine App that compares Med Prices with HTML & CSS.

Pharmasift Part I

# 1. Project Introduction

Before we start building the project, Let’s understand what we’re building and Why?

[https://www.youtube.com/embed/nAeq6D4OapU?si=LIk8niDDG-PM3UD6](https://www.youtube.com/embed/nAeq6D4OapU?si=LIk8niDDG-PM3UD6)


# 2. How to Build this Project

Let’s watch the video that explains how to build and learn from the project

[https://www.youtube.com/embed/jwj4J6vnk6Q?si=ah86iSN7k1HaJRjq](https://www.youtube.com/embed/jwj4J6vnk6Q?si=ah86iSN7k1HaJRjq)


# 1. Getting Started with Design

Before we code any website with HTML & CSS, We need to provide a clear visual image of how it’ll look when developed.

That’s why we need the Design of a Website, and You’re going to design this.

***Don’t worry, We’ll guide you at each step. Jump to the next chapter to start learning.***

[https://www.youtube.com/embed/IWFaISmmB6k?si=lAovudQEel4qtD1d](https://www.youtube.com/embed/IWFaISmmB6k?si=lAovudQEel4qtD1d)

# 2. Design with Figma

In this chapter, We'll deep dive into the world of Figma, A powerful design tool that will be used to design the PharmaSift website. It’s a Free Tool.

## Get Started Here

**Watch this Workshop to Learn Figma Fundamentals** 

[https://www.youtube.com/embed/b0I2z_6pNlA?si=_80iqXImzMCWgiKy](https://www.youtube.com/embed/b0I2z_6pNlA?si=_80iqXImzMCWgiKy)

Note: Don’t jump to the next chapter without completing the previous one as it maybe difficult to understand.

# 3. Design Landing Page

As of now, You’ve got a good understanding of How Figma helps you design Websites. Now It’s your turn to design the Landing Page of PharmaSift.

## Steps -

1. Create A Design Project in Figma
2. Separate Pages for Components and website as explained in the workshop.
3. Design the Landing Page
4. **Take Inspirations from [Dribble](https://dribbble.com/search/landing-page)**

PS1: If you’re designing for the first time, It may be difficult to assume what to design that’s why we see how others design. We get inspiration from it and design our products.

PS2: You can always draw on paper first to visualize the design better.

# 4. Assignment 1: Share Figma Link

Glad that you’ve reached this far. 🔥 Congratulations on Designing the Beta Version.

Now it’s time to share the Figma Link.

Click on the form below and share the Figma link with us.

[Click to Submit Your Assignment](https://docs.google.com/forms/d/e/1FAIpQLSe0qYlwyPJaql8iJnMnIaurFG96aR267eyjoO_JvzuGwheOBQ/viewform?usp=sf_link)

# 1. What’s GitHub

[https://www.youtube.com/embed/Q-PEgfnM5hA?si=G9Eum8gRJtBdDEhk](https://www.youtube.com/embed/Q-PEgfnM5hA?si=G9Eum8gRJtBdDEhk)

Before we delve into the technicalities of **[GitHub](https://github.com/)**, let's understand the essence of version control and how GitHub plays a pivotal role in modern software development.

### Introduction to Version Control

Version control is a system that records changes to a file or set of files over time, allowing you to recall specific versions later. It provides a historical timeline of modifications, enabling collaboration, tracking progress, and reverting to earlier states if needed.

### GitHub as a Version Control Platform

GitHub is a web-based hosting service for version control using Git. It enhances collaboration among developers by providing a centralized platform to store, manage, and track changes in code repositories. GitHub facilitates teamwork, ensures code integrity, and empowers developers to work together seamlessly.

### Git vs GitHub

Git is the version control system itself, installed locally on a developer's machine, while GitHub is a web-based platform that hosts Git repositories and adds collaborative features, making it easier for teams to work together.

# 2. Setup GitHub Account

Now that you understand the significance of version control and the role GitHub plays, it's time to create your GitHub account. Your GitHub account is the gateway to collaborative development, allowing you to share and contribute to projects. Follow these steps to set up your GitHub account:

## Steps

1. Sign up at [GitHub](https://github.com/)
2. To Install Git locally
   1. Visit [Git](https://git-scm.com/) to download and set up. It’s like any other software.
3. Check if Git is successfully installed

   1. Open Powershell or Command Prompt and type

   ```bash
   git --version
   ```

   You should see the installed Git version.

   **TIP: Feel free to open ChatGPT or search on Google if you’re stuck at any point.**


# 3. Creating a New GitHub Repo

Now that you have Git installed locally, let's move forward by creating a new GitHub repository for your PharmaSift project. Follow these steps to set up your remote repository on GitHub:

### Step 1: Log in to Your GitHub Account

- Open your web browser and navigate to [GitHub](https://github.com/).
- Sign in with your GitHub credentials.

### Step 2: Create a New Repository

- Once logged in, click on the "+" icon in the top right corner of the GitHub homepage.
- From the dropdown, select "New repository."

### Step 3: Fill in Repository Details

- Provide a name for your repository. In this case, you can name it "PharmaSift" or a name of your choice.
- Optionally, add a description to provide a brief overview of your project.
- Choose between making the repository public or private, depending on your preference.

### Step 4: Initialize this Repository with a README

- To make things easier, select the option to "Initialize this repository with a README." This will create an initial README file in your repository.

### Step 5: Add a .gitignore File (Optional)

- If your project involves specific files or directories that should be excluded from version control (e.g., temporary files, build artifacts), you can add a **`.gitignore`** file. GitHub provides templates for various programming languages and frameworks.

### Step 6: Choose a License (Optional)

- You can choose to add an open-source license to your repository. GitHub provides various licenses that determine how others can use your code.

### Step 7: Create Repository

- Click the "Create repository" button to finalize the process.

### Step 8: Copy the Repository URL

- After creating the repository, you'll be redirected to its main page.
- Copy the repository URL from the "Code" button dropdown. It should look like **`https://github.com/your-username/pharmasift.git`**.

### Next Steps:

With your GitHub repository set up, you now have a remote location for your PharmaSift project. In the upcoming chapters, we'll connect this remote repository to your local Git repository and start pushing changes from your local machine to GitHub.

Head over to Chapter 4 for the next steps in building PharmaSift!

Keep up the great work!


# 4. Clone Repo in Local

Now that your GitHub repository is set up, it's time to bring it to your local machine by cloning it. This process ensures that you have a local copy of the repository on your computer for development and collaboration. Follow these steps to clone your PharmaSift repository:

### Step 1: Open Your Terminal or Command Prompt

- **On Windows:**
  - Open the Command Prompt or PowerShell.
- **On macOS or Linux:**
  - Open the Terminal.

### Step 2: Navigate to Your Project Directory

- Use the **`cd`** command to navigate to the directory where you want to clone your PharmaSift project. For example:
  ```bash
  cd path/to/your/desired/directory
  ```

**_TIP: We advice you to create a separate folder for all Git Repos so you can always know where they belong in your machine._**

### Step 3: Clone the GitHub Repository

- Run the following command to clone your GitHub repository locally: Replace **`your username`** with your GitHub username.
  ```bash
  git clone https://github.com/your-username/pharmasift.git
  ```

### Step 4: Verify the Cloning Process

- Once the cloning process is complete, navigate into the cloned directory:
  ```bash
  cd pharmasift
  ```
- Check the status of your local repository:
  ```bash
  git status
  ```

### Next Steps:

With the GitHub repository successfully cloned locally, you now have a synchronized version on your machine. In the next chapter, we'll guide you through making your initial commits and pushing changes to GitHub.

Head over to Chapter 5 for the next steps in building PharmaSift!

**🎉 Fantastic progress—let's keep the momentum going!**


# 5. Setup VS Code

Visual Studio Code (VS Code) is an excellent code editor that provides a seamless development experience. Let's set up VS Code for your PharmaSift project:

### Step 1: Install Visual Studio Code

- If you haven't already, download and install [Visual Studio Code](https://code.visualstudio.com/).

### Step 2: Open Your PharmaSift Project in VS Code

- Launch VS Code.
- Use the menu option **`File > Open Folder`** and navigate to your **`pharmasift`** project directory. Select the folder and click "Open."

### Step 3: Install Extensions (Optional)

- VS Code supports extensions that enhance its functionality. Some recommended extensions for web development include:
  - **Live Server:** For real-time preview and local server functionality.
  - **HTML CSS Support:** Enhances HTML and CSS autocompletion.
  - **Prettier - Code Formatter:** For code formatting.
    To install an extension:
  - Click on the Extensions icon in the Activity Bar on the side of the window.
  - Search for the extension and click "Install."

### Step 5: Explore VS Code Features

- Familiarize yourself with VS Code's features, such as the integrated terminal, version control (Git integration), and extensions.

### Next Steps:

With VS Code set up for your PharmaSift project, you're ready to dive into coding and making your first commits. In the next chapter, we'll guide you through the process of initializing a Git repository locally.

Head over to Chapter 6 for the next steps in building PharmaSift!

Fantastic! Let's continue building PharmaSift with the power of Visual Studio Code!


# 6. Setup Index Files

Now that your PharmaSift project is cloned locally, it's time to set up your index files. The index files, typically **index.html** and **style.css**, serve as the foundation for your web application. Follow these steps to get started:

### Step 1: Open Your Code Editor

- Open your preferred code editor. If you don't have one, you can use Visual Studio Code, Sublime Text, Atom, or any editor of your choice.

### Step 2: Navigate to Your PharmaSift Project Directory

- Use the file explorer in your code editor or your system's file explorer to navigate to the **pharmasift** directory.

### Step 3: Create index.html

- Inside the project directory, create a new file named **index.html**. This file will serve as the main entry point for your web application.

### Step 4: Add HTML Structure

- Open **index.html** and add the basic HTML structure:
  ```html
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>PharmaSift</title>
      <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <h1>Welcome to PharmaSift</h1>
    </body>
  </html>
  ```

### Step 5: Create style.css

- Inside the project directory, create a new file named **style.css**. This file will handle the styling for your web application.

### Step 6: Add Basic Styling

- Open **style.css** and add some basic styling:

  ```css
  body {
    font-family: 'Arial', sans-serif;
    text-align: center;
    margin: 50px;
  }

  h1 {
    color: #3498db;
  }
  ```

### Step 7: Save Changes

- Save your changes in both **index.html** and **style.css**.

### Step 8: Verify Changes Locally

- Open your web browser and navigate to the local copy of your PharmaSift project. You can do this by opening the **index.html** file in your browser.

### Next Steps:

With your index files set up, you've created the initial structure for PharmaSift. In the next chapter, we'll guide you through making your first commit and pushing these changes to your GitHub repository.

Head over to Chapter 7 for the next steps in building PharmaSift!

Great work—let's continue building PharmaSift together!


# 7. Push Your Code

Now that you've set up your project and made some changes to your index files, it's time to commit those changes and push them to your GitHub repository. Follow these steps to make your first commit and push to GitHub:

### Step 1: Open Your Terminal or Integrated Terminal in VS Code

- **On Windows:**
  - Open the Command Prompt or PowerShell.
- **On macOS or Linux:**
  - Open the Terminal.
- **In VS Code:**
  - Open the integrated terminal.

### Step 2: Navigate to Your PharmaSift Project Directory

- Use the **cd** command to navigate to your PharmaSift project directory:
  ```bash
  cd path/to/your/pharmasift
  ```

### Step 3: Check the Status

- Run the following command to check the status of your Git repository:This will show you the changes you've made.
  ```bash
  git status
  ```

### Step 4: Add Changes to the Staging Area

- Stage your changes for commit using the following command: This adds all the changes you made to the staging area.
  ```bash
  git add .
  ```

### Step 5: Make a Commit

- Commit your changes with a meaningful message: Replace the commit message with a description of the changes you made.
  ```bash
  git commit -m "Add index files and basic styling"
  ```

### Step 6: Push Changes to GitHub

- Now, push your changes to your GitHub repository:This command pushes your committed changes to the main branch of your GitHub repository.
  ```bash
  git push origin main
  ```

### Step 7: Verify Changes on GitHub

- Visit your GitHub repository in the browser.
- You should see your committed changes reflected in the repository.

### Next Steps:

Congratulations! You've successfully made your first commit and pushed changes to GitHub. In the next chapter, we'll explore more advanced Git concepts and continue building the PharmaSift project.

Head over to Chapter 9 for the next steps in building PharmaSift!

**🔥 Great job! Let's keep the momentum going!**


# 8. More to Know in GitHub

There is always more to learn. The same is true for GitHub as well.

Here are a bunch of Topics you should know about -

1. Connect Local repo with newly created Repo on GitHub
2. Branches in Git & their uses
3. Creating a Pull Request(PR)
4. Merging Codes from Different Branches

**_Simply open ChatGPT or Directly search on Google/YouTube to understand these concepts better._**

**_TIP: We don’t want to Hand-hold you at each step. Sometimes you’ll have to find the answers yourself._**


# Assignment 2: Share GitHub Repo

Amazing job so far. Now share the GitHub repo.

Click below to share your GitHub repo link.

### [Click to Fill The Form](https://docs.google.com/forms/d/e/1FAIpQLSdvz-bSCF7WHOfp2SiGmMRex4JrxUePmIW6XH-GXHuLSwNJsg/viewform?usp=sf_link)


# 1. Let’s Build PharmaSift

[https://www.youtube.com/embed/sOSBV2hG2gc?si=wjQBCfRqbfpkeSkQ](https://www.youtube.com/embed/sOSBV2hG2gc?si=wjQBCfRqbfpkeSkQ)

Now Let’s Build PharmaSift.

Let’s see how far we have come -

1. We’ve designed the PharmaSift Website with Figma
2. We’ve set up Github and created a new Repo.
3. Created basic structure of two files - **index.html & styles.css**

Now it’s time to build the PharmaSift UI(User Interface) that you’ve designed.

# A few tips before writing code

1. Software Engineers build things they’ve never built before. Every day there is a learning day for them. You’re following the same path. Expect a few issues coming in the code. That’s alright.
2. Don’t try to memorize code. Understand how it works. This is not your school.
3. Search on Google as much as possible. There is no issue at all. Even 10+ years of experience software engineers do that.

Feel Free to post your questions in our [Whatsapp](https://chat.whatsapp.com/D1ko12SykD1LfvJwmNQ48A). Developers love to solve their and other’s code problems.

😃 Happy Building


# Assignment 3: Push Base Implementation

[https://www.youtube.com/embed/\_DpqT2jY0IU?si=TnVXEMB7J0eG5788](https://www.youtube.com/embed/_DpqT2jY0IU?si=TnVXEMB7J0eG5788)

Amazing job so far. Now share the GitHub repo.

**Base Implementation means whatever you can code in the initial version.**

Click to share your repo link.

### [Fill The Form](https://docs.google.com/forms/d/e/1FAIpQLSdX6hHoqNhnkXl34B97_J1l8rjj8lbKUx8I682-0S8Iy1Pqeg/viewform?usp=sf_link)


# 1. Understanding Responsive Design

[https://www.youtube.com/embed/9txPbzqjmjw?si=yAsRk4_HUTnldaVX](https://www.youtube.com/embed/9txPbzqjmjw?si=yAsRk4_HUTnldaVX)

Responsive design is all about creating websites that work well on different devices, like computers, phones, and tablets. It's like making your website flexible enough to look good and work properly no matter what someone uses to see it.

### Key Points:

1. **What is Responsive Design?**
   - Responsive design means making websites that adjust and look good on any device, whether it's a big computer screen or a small phone screen.
2. **Flexible Layouts:**
   - It's like making the web page able to change its layout to fit different screen sizes. So, things might move or resize to fit well.
3. **Media Queries(We’ll discuss in upcoming chapters)**
   - These are like special rules that say, "Hey, if the screen is this size, show things like this." They help change how the website looks based on the device.
4. **Mobile-First Idea:**
   - Starting with designing for mobiles first makes sure the site works well on small screens before thinking about bigger screens.
5. **Why Responsive Design Matters:**
   - It's important because people use all kinds of devices to browse the web. So, if your site looks good on all of them, more people can enjoy it.
6. **Challenges and Tips:**
   - Sometimes, it can be tricky to make everything look perfect on every device. But there are some smart ways to make it easier.


# 2. Implementing Media Queries

Media queries are like special instructions that tell a website how to look on different devices. They're super helpful for adjusting the layout, font size, or even hiding certain parts of the website based on the device's screen size or type.

### Key Points:

1. **What are Media Queries?**
   - Media queries are rules in the code that say, "If the screen is this size or type, do this."
2. **Using Media Queries in CSS:**
   - Here's how you write a simple media query in CSS:
     ```css
     /* Example of a media query for screens smaller than 600px */
     @media (max-width: 600px) {
       /* CSS styles for smaller screens go here */
       body {
         font-size: 14px;
       }
     }
     ```
3. **Adjusting Layouts with Media Queries:**
   - Media queries help in changing how things are arranged or spaced out on different-sized screens.
     ```css
     /* Example of a media query for adjusting layout */
     @media (min-width: 768px) {
       /* CSS styles for larger screens go here */
       .container {
         width: 80%;
         margin: 0 auto;
       }
     }
     ```
4. **Making Text and Images Responsive:**
   - With media queries, text and images can resize or adjust to fit better on screens of varying sizes.
     ```css
     /* Example of a media query for adjusting font size */
     @media (max-width: 480px) {
       /* CSS styles for smaller screens go here */
       .header {
         font-size: 20px;
       }
     }
     ```
5. **Hiding or Showing Content:**
   - Sometimes, you might want to hide or show certain parts of the website on different devices using media queries.
     ```css
     /* Example of a media query for hiding content */
     @media (max-width: 768px) {
       /* CSS styles for smaller screens go here */
       .sidebar {
         display: none;
       }
     }
     ```

That’s all it takes to create your website for different screens.

In the next chapter we’ll discuss about how to implement Flexbox.


# 3. Implementing Flexbox

Flexbox is a powerful layout model in CSS that makes it easy to arrange elements in a flexible way. It helps in creating responsive and dynamic layouts, making it simpler to align, space, and distribute elements within a container.

### Key Points:

1. **Understanding Flexbox:**
   - Flexbox is a layout model that allows items to be arranged easily within a container, either in a row or column, adjusting their size and position dynamically.
2. **Creating a Flex Container:**
   - To start using Flexbox, you'll need to define a flex container. This is done by applying **`display: flex;`** to the container element.
     ```css
     .flex-container {
       display: flex;
     }
     ```
3. **Flex Direction:**
   - Flexbox allows setting the direction of items inside the container. It can be row, column, row-reverse, or column-reverse.
     ```css
     .flex-container {
       display: flex;
       flex-direction: row; /* or column, row-reverse, column-reverse */
     }
     ```
4. **Flex Items and Flexibility:**
   - By default, flex items will try to fit in the container. You can control their size using properties like **`flex-grow`**, **`flex-shrink`**, and **`flex-basis`**.
     ```css
     .flex-item {
       flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
     }
     ```
5. **Alignment with Flexbox:**
   - Flexbox offers properties like **`justify-content`** and **`align-items`** to align items along the main and cross axes.
     ```css
     .flex-container {
       display: flex;
       justify-content: center; /* Align items along the main axis */
       align-items: center; /* Align items along the cross axis */
     }
     ```
6. **Nested Flex Containers:**
   - Flexbox can be nested, allowing more complex layouts with different sections having their flexible behavior.

**Now it’s your turn to implement it into your design.**


# 4. Implementing Desktop First Approach

The desktop-first approach is a design methodology where web development begins with designing for larger screens (like desktops) and then adapting it for smaller screens (like mobile devices). This approach prioritizes creating a robust layout for larger screens and then adjusting it for smaller ones.

### Key Points:

1. **Starting with Desktop Design:**
   - Designing the website layout considering larger screens, with more space and detailed content presentation.
2. **Creating Layouts for Desktop:**
   - Using media queries or CSS techniques to design layouts that look good on bigger screens.
     ```css
     /* Example of a desktop layout */
     @media (min-width: 1024px) {
       /* Styles for desktop screens go here */
       .container {
         width: 80%;
         margin: 0 auto;
       }
     }
     ```

🙌 Congratulations, You just created a Responsive Website.

Now our step should be to design for smaller screens. Let’s discuss this in the next chapter.


# 5. Desktop to Mobile Responsive

Transitioning a desktop-oriented design to a mobile-responsive layout involves adapting the existing desktop design to fit and function well on smaller screens, ensuring a smooth and user-friendly experience across all devices.

### Key Points:

1. **Understanding Mobile Viewport:**
   - Considering the smaller screen size and different interaction patterns prevalent in mobile devices.
2. **Media Queries for Mobile:**
   - Writing media queries to modify the existing desktop styles to suit mobile screens.
     ```css
     /* Example of a media query for mobile */
     @media (max-width: 480px) {
       /* Styles for smaller screens go here */
       .container {
         width: 100%;
         padding: 10px;
       }
     }
     ```
3. **Adjusting Font Sizes and Elements:**
   - Tweaking font sizes, padding, margins, and element sizes to better suit smaller screens.
     ```css
     /* Example of adjusting font size for mobile */
     @media (max-width: 768px) {
       /* Styles for smaller screens go here */
       .heading {
         font-size: 16px;
       }
     }
     ```
4. **Optimizing Images and Media:**
   - Ensuring images and media elements resize and load appropriately on mobile devices for quicker loading times.
5. **Enhancing Mobile Usability:**
   - Paying attention to touch-friendly features, such as larger tap targets and easy navigation menus, for improved usability on mobile.


# Assignment 4: Push Responsive Version

Amazing job so far. Push the code and share the GitHub repo.

Push the code and Click below to share your repo link.

### [Fill The Form](https://docs.google.com/forms/d/e/1FAIpQLSdhPeeFWGOJlCB3gB9CUNnWr4HvKhJxBZF2DY9TBuhg2W1PaQ/viewform?usp=sf_link)


# 1. So What is Tailwind?

Tailwind CSS is a special tool that helps make designing websites easier. Instead of writing lots of CSS code, Tailwind gives us ready-made classes to style our web pages quickly.

# Before you start, Visit the link

On the workshop page, You’ll find the Recording of the workshop & the Code.

[https://www.youtube.com/embed/tcBQeOvDwXo?si=H7V4lNh1hmrj3bHo](https://www.youtube.com/embed/tcBQeOvDwXo?si=H7V4lNh1hmrj3bHo)

### Key Points:

1. **Easy Styling with Classes:**
   - Tailwind provides easy-to-use classes that you can add directly to your HTML to style elements.
2. **Examples of Tailwind Classes:**
   - Classes like **`bg-blue-500`** make backgrounds blue, **`text-white`** turns text white, and **`p-4`** adds padding around an element.
     ```html
     <div class="p-4 bg-blue-500 text-white">Hello, Tailwind!</div>
     ```
3. **Making Websites Responsive:**
   - Tailwind includes classes that help make websites look good on different devices without writing extra code.
     ```html
     <div class="md:flex lg:w-1/2">Responsive Layout</div>
     ```
4. **Customizing Tailwind:**
   - Tailwind can be adjusted to fit your project's needs by changing settings in configuration files.

**So now you know how powerful Tailwind is when building Websites faster.**

**Let’s discuss more of its features in upcoming chapters.**


# 2. Setting up Tailwind

Setting up Tailwind CSS with a CDN (Content Delivery Network) is a straightforward way to start using Tailwind in your web project without npm or complex configurations.

**TIP - Senior developers usually read Official Documentation before implementing any tool. You should consider learning more about [Tailwind here](https://tailwindcss.com/docs/installation)**

### Key Points:

1. **Linking Tailwind:**
   - Including Tailwind CSS by adding a link in the HTML file's **`<head>`** section.
     ```html
     <link
       href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
       rel="stylesheet"
     />
     ```
2. **Applying Tailwind Classes:**
   - Start using Tailwind's utility classes directly in your HTML file to style elements effortlessly.
     ```html
     <div class="p-4 bg-blue-500 text-white">Hello, Tailwind!</div>
     ```

### **Checking Tailwind Styling**

After adding the Tailwind CDN link in your HTML file, create a sample element and apply a Tailwind class to see if it styles as expected.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tailwind Test</title>
    
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    
    <div class="p-4 bg-blue-500 text-white">
      Hello, Tailwind! This should be styled.
    </div>
  </body>
</html>
```

Save this HTML file and open it in a web browser. If Tailwind has been added successfully, the test element should be styled with a blue background, white text, and some padding.

**🥳 Wow. You just integrated & edited a Tailwind Website.**

More interesting chapters ahead, Keep Going.

# 3. Delete CSS. Add Class

In this chapter, we'll remove existing CSS styles from your HTML file and replace them with Tailwind's utility classes for styling elements.

### Existing CSS Styles:

Let's assume you have the following CSS styles in your HTML file:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS to Tailwind</title>
    <style>
      /* Existing CSS styles */
      .container {
        padding: 20px;
        background-color: #3490dc;
        color: white;
        text-align: center;
      }

      .heading {
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p class="heading">Hello, CSS!</p>
    </div>
  </body>
</html>
```

### Transition to Tailwind:

Now, let's replace the existing CSS styles with Tailwind's utility classes directly applied to HTML elements:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS to Tailwind</title>
    
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="p-4 bg-blue-500 text-white text-center">Hello, Tailwind!</div>
  </body>
</html>
```

Now you know why Tailwind is used by millions of Front-end and Full-stack Engineers.

**TIP - Don’t use ChatGPT in initial phase of learning Tailwind. Later on you can :’)**

# 4. Responsive with Tailwind

We'll update the existing CSS-based responsiveness to utilize Tailwind's responsive utility classes, allowing elements to adapt to different screen sizes.

### Existing CSS for Responsiveness:

Consider the following CSS styles for responsiveness:

```css
/* Existing CSS styles for responsiveness */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.heading {
  font-size: 24px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .heading {
    font-size: 20px;
  }
}
```

### Transition to Tailwind's Responsive Classes:

Now, let's transition the existing CSS-based responsiveness to Tailwind's responsive utility classes:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Responsive with Tailwind</title>
    
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="max-w-screen-lg mx-auto p-4">
      <p class="text-3xl lg:text-5xl">Hello, Tailwind!</p>
    </div>
  </body>
</html>
```

This looks so amazing now. Just with a few words we can replace everything written in CSS.

You just completed Tailwind. Now it’s time to replace CSS with Tailwind.

# Assignment 5: Push with Tailwind

Amazing job so far. Push the code and share the GitHub repo.

Push the Tailwind Code & Click to share your repo link.

### [Fill The Form](https://docs.google.com/forms/d/e/1FAIpQLSfEwc2-P7rMYbZAXOkET3mGYzV5jsTHXo0X38B39rgM7yOdKg/viewform?usp=sf_link)


# 1. Make It Live

[https://www.youtube.com/embed/BM-ZxrM5D1I?si=eeuuCco5MYN0vdOF](https://www.youtube.com/embed/BM-ZxrM5D1I?si=eeuuCco5MYN0vdOF)

In this chapter, we'll explore the process of deploying your website, built with HTML, CSS, and Tailwind, using Netlify, a popular platform for hosting web projects.

### Why we use Netlify:

- **Continuous Deployment:** Netlify can automatically deploy your site whenever you push changes to your connected Git repository.
- **Custom Domains:** Easily configure custom domains for your site.
- **CDN & Performance:** Netlify provides a global CDN (Content Delivery Network) for faster site loading.

### Steps to Deploy with Netlify:

1. **Netlify Account Creation:**
   - Sign up for a Netlify account if you haven't already. Visit [**Netlify**](https://www.netlify.com/) and create an account using your email.
2. **Project Setup on Netlify:**
   - Once logged in, click on "New site from Git" on the Netlify dashboard.
   - Connect your Git repository (GitHub, GitLab, Bitbucket) where your project is hosted.
3. **Configure Deployment Settings:**
   - Choose the branch you want to deploy (e.g., main, master).
   - Set build settings if needed (for most HTML/CSS projects, Netlify auto-detection works perfectly).
4. **Deploy Your Site:**
   - Click on the "Deploy Site" button. Netlify will initiate the build process.
5. **View Your Live Site:**
   - Once the build is successful, Netlify provides you with a live URL where your website is hosted. You can access your live site from this URL.


# 2. Add to Your Resume

Now it’s time to add this project to your bucket.

Put this project into your resume.

Feel free to create one from **[Google Doc](https://docs.google.com/spreadsheets/u/0/)** template.


# Assignment 6: Show me your website

Wow. Just wow. You completed this project while applying lots of things.

Now let’s finish this last assignment by sharing what you’ve built.

Click below to share the final version of the website.

### [Fill The Form](https://docs.google.com/forms/d/e/1FAIpQLSfEwc2-P7rMYbZAXOkET3mGYzV5jsTHXo0X38B39rgM7yOdKg/viewform?usp=sf_link)

# Sharing is Caring 😃

Let’s share your achievement with everyone on Social Media by clicking a picture of your screen and also the website link.

**When you share your achievements, everyone you’re connected with knows what you’re up to. There maybe an HR on LinkedIn who sees your post or maybe a Friend on Instagram who’s looking to build their Family Business website(You never know).**


# Assignment 7: Share On Social Media

# Sharing is Caring 😃

[https://www.youtube.com/embed/7Xh0A3kLN4c?si=njaS0eILm9hshw84](https://www.youtube.com/embed/7Xh0A3kLN4c?si=njaS0eILm9hshw84)

Let’s share your achievement with everyone on Social Media by clicking a picture of your screen and also the website link.

**When you share your achievements, everyone you’re connected with knows what you’re up to. There may be an HR on LinkedIn who sees your post or maybe a Friend on Instagram who’s looking to build their Family Business website(You never know).**

Click below to Share your Social Post. We’ll be adding it on our Landing page.

### [Fill The Form](https://docs.google.com/forms/d/e/1FAIpQLScGzncVTmiaPMtb-I0As5B3RwMECGVjCWUbwAxIooPwUx4nmg/viewform?usp=sf_link)

# Draft Message

```jsx
Hello everyone, I just completed building my first project with The Boring Projects.

It was a GOOD/GREAT experience to learn -
1. How to Build a Website with HTML & CSS
2. Use Tailwind to build it faster
3. Making it responsive so the Website looks good on every big and small device
4. Deploying the website live with Netlify
5. Designing the website in Figma

I built the product from Design to Development to Deployment. Also built product thinking skills and understood how real projects are built.

The project is divided into multiple chapters and each chapter was filled with hints of what to build. It was a true product-building experience.

I would also like to thank TAG THE BORING EDUCATION PAGE and ME(if feel like 😎) for launching The Boring Projects.

#learning #webdevelopment #html #css
```


# 3. Wrapping Up

# …And It’s a Wrap

[https://www.youtube.com/embed/o39NnwKWmfM?si=aSuTHJvcg0z0-QxY](https://www.youtube.com/embed/o39NnwKWmfM?si=aSuTHJvcg0z0-QxY)

Take some time off and Let’s get Started with PharmaSift Part II with Javascript.


Design and Develop A Medicine App that compares Med Prices with HTML & CSS. - Dive into PharmaShift Project I and learn through practical coding experience.

Hello there!

Sections

Assignment 7: Share On Social Media

Sharing is Caring 😃

Fill The Form

Draft Message