> For the complete documentation index, see [llms.txt](https://parthean.gitbook.io/web-dev-in-10-days/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://parthean.gitbook.io/web-dev-in-10-days/day-2.md).

# Day 2

Today, we'll be learning about HTML and CSS and putting that knowledge to practice in our first project.

## Make a Digital Resume

![](https://ahezarkhani.github.io/sams/hw/resume_solution.png)

{% hint style="info" %}
Ask your **Day 2 Questions**[ **on** **Parthean Community**](https://platform.parthean.com).
{% endhint %}

## Directions

Follow this tutorial to create your Digital Resume:

{% content-ref url="/pages/-M4CIVnCDyOe-Si\_LSgl" %}
[Digital Resume Tutorial](/web-dev-in-10-days/day-2/untitled.md)
{% endcontent-ref %}

We're also here to help when you get stuck, so:

{% hint style="info" %}
Ask your **Day 2 Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=c41c7f92-7160-425e-89f5-7c1dfdf40195).
{% endhint %}

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

## Resources

#### Intro to HTML

{% embed url="<https://youtu.be/ItZN6o0ylao>" %}

#### Intro to CSS

{% embed url="<https://youtu.be/dC34rfY8Eyk?t=50>" %}

{% hint style="info" %}
Ask your **HTML and CSS Questions**[ **on** **Parthean Community**](https://platform.parthean.com).
{% endhint %}

#### Basic HTML Cheat Sheet

{% tabs %}
{% tab title="Comments" %}

```markup
<!-- If you ever have text you only want humans to read,
you'll need to put it into a comment. Every language
has it's own syntax for comments, but this is how you
do it in HTML.  -->

<!-- We'll use comments to explain things in our code :) -->
```

{% endtab %}

{% tab title="Headings" %}

```markup
<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>
```

{% endtab %}

{% tab title="Paragraphs" %}

```markup
<p>text</p>
```

{% endtab %}

{% tab title="Images" %}

```markup
<img src="/image.jpg" alt="profile picture" height="400" width="400" />
```

{% endtab %}

{% tab title="Links" %}

```markup
<a href="https://parthean.com/">Click here to go to Parthean</a>
```

{% endtab %}

{% tab title="Bold" %}

```markup
<strong>Bold text</strong>
```

{% endtab %}

{% tab title="Italic" %}

```markup
<i>This text is italic</i>
```

{% endtab %}

{% tab title="Block Elements" %}

```markup
<div>Block element</div>
<!-- divs are a form of block element. What that means is that their
width is automatically set to 100% of it's container -->
```

{% endtab %}
{% endtabs %}

#### Basic CSS Cheat Sheet

{% tabs %}
{% tab title="Comments" %}

```css
/* This is a comment in CSS */
```

{% endtab %}

{% tab title="Background Color" %}

```css
/* Background Color */
background-color: green;        /* or any other color from here: https://www.w3schools.com/cssref/css_colors.asp */
background-color: transparent;  /* if you don't want a color */
```

{% endtab %}

{% tab title="Border" %}

```css
/* Border Width:
   the thickness of the border */
border-width: thin; /* or any of these:
                      medium, thick, length */

/* Border Style:
   what the border looks like */
border-style: none; /* or any of these:
                      hidden, dotted, dashed, solid, double, groove, ridge, inset, outset */

/* Border Color:
   well, this one's self explanatory */
border-color: yellow; /* or any other color from here: https://www.w3schools.com/cssref/css_colors.asp */
```

{% endtab %}

{% tab title="Font" %}

```css
font-style: normal /* or italic, oblique, inherit */
font-weight: normal /* or bold, bolder, lighter */
font-size: 16px; /* or any other number */
font-family: serif; /* or sans-serif of the name of the font you specifically want */
```

{% endtab %}

{% tab title="Text" %}

```css
text-align: left /* or right, center, justify */
color: orange; /* or any other color from here: https://www.w3schools.com/cssref/css_colors.asp */
```

{% endtab %}

{% tab title="Box-Styling" %}

```css
/* Height and Width:
   used to describe the height of an element */
height: 30%; /* You can use or px (and other css units) */
max-height: 200px;
min-height: 100px;

width: 70%;
max-width: 700px;
min-width: 400px;

/* Margin:
   used to describe how far other elements must stay from this one */
margin: 10px; /* You can use or px (and other css units) */

/* Padding:
   used to describe how far this element's border must stay from it's contents */
margin: 10px; /* You can use or px (and other css units) */

```

{% endtab %}
{% endtabs %}

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