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

Ask your Day 2 Questions on Parthean Community.

Directions

Follow this tutorial to create your Digital Resume:

Digital Resume Tutorial

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

Ask your Day 2 Questions on Parthean Community.

Want to show off your work? Post your results on Parthean Community.

Resources

Intro to HTML

Intro to CSS

Ask your HTML and CSS Questions on Parthean Community.

Basic HTML Cheat Sheet

Comments

<!-- 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 :) -->

Headings

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

Paragraphs

<p>text</p>

Images

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

Links

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

Bold

<strong>Bold text</strong>

Italic

<i>This text is italic</i>

Block Elements

<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 -->

Basic CSS Cheat Sheet

Comments

/* This is a comment in CSS */

Background Color

/* 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 */

Border

/* 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 */

Font

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 */

Text

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

Box-Styling

/* 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) */

Want to show off your work? Post your results on Parthean Community.