---
description: >-
  Today we'll be doing more practice with HTML and CSS. We're also starting our
  first multi-day project -- woohoo!
---

# Day 3

## Social Media Site (Part 1)

![](https://1635267683-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M40zo3BRAiab4gyGC_P%2F-M41NtdPYb8yiMTB3rXU%2F-M41bspd7dB76rly-84m%2FScreen%20Shot%202020-04-03%20at%208.37.48%20PM.png?alt=media\&token=ba4c01e2-7959-4696-b445-c13f049e58f9)

{% hint style="info" %}
Ask your **Day 3 Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=3a0e9a7b-6b97-4045-b84e-e5a2c229dac0).
{% endhint %}

## Directions

Edit your starter code (see below) to create a social media site that looks like the photo above.

Like yesterday, you should use your own names and posts 😁

{% hint style="warning" %}
The site shouldn't actually do anything -- we'll work on that tomorrow. For now, just make it look like it does on the screen above.
{% endhint %}

### Starter Code \[[download](https://drive.google.com/open?id=1l6zjNwUNJGwUv7A4aNNKWAQZg4yn3vYR)]

Create a folder called `day_3` and create two files inside of it:

> `day_3`
>
> > `index.html`
> >
> > `styles.css`

Now, copy this paste this code into them:

{% tabs %}
{% tab title="index.html" %}
{% code title="day_3.html" %}
```markup
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Status Poster</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        
        
    </body>
</html>
```
{% endcode %}
{% endtab %}

{% tab title="styles.css" %}
{% code title="styles.css" %}
```css
/* Your css code here */
```
{% endcode %}
{% endtab %}
{% endtabs %}

## Resources

No new videos or notes today -- just you and the internet 😁

Web developers use the huge, publicly available sources of information both to find out how to write code and how to solve problems that they encounter, commonly called debugging. Today, and in the days to come, we'll be getting some practice with that. You have seen a lot of the code you'll use, but you'll need to find some new things. If you're wondering how to make two html blocks go next to each other, just search:

![](https://1635267683-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M40zo3BRAiab4gyGC_P%2F-M4BSkP5UE8Ds4kFEcSi%2F-M4BSzPmJbC8-eYazkwf%2FScreen%20Shot%202020-04-05%20at%206.30.35%20PM.png?alt=media\&token=8997402f-98bf-47e2-b708-0d567ac24322)

As usual, we're here to help when you get stuck, so:

{% hint style="info" %}
Ask your **HTML and CSS Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=3a0e9a7b-6b97-4045-b84e-e5a2c229dac0).
{% endhint %}

{% hint style="success" %}
Want to show off your work? [Post your results on Parthean Community](https://platform.parthean.com).
{% endhint %}
