Lesson #2: Let's Add Some Structure
Now that we have some text to work off of from Step #10, let's add some structure with HTML tags and elements!
Below is a table of the different types of elements you can use and how to use them. You don't have to use all of them, but this is a great point of reference for the future.
I also have a package in my text editor, language-html, that offers html language support when you're coding by offering suggestions and descriptions as you go. To install the package in Atom, navigate to the top menu bar > Atom > Preferences > (a new side bar will pop up on your editor) > Install > type html in the search bar > Install language-html.
We're going to start with the basic html structure.
-
Take your
index.htmlfile with your "why" and your roadmap and format it in this way.
<!DOCTYPE html>
<html>
<head>
<title>website title</title>
</head>
<body>
WHY
ROADMAP
</body>
</html>Every opening tag needs a closing tag, like <body> WHY ROADMAP </body>
| COMMON TAGS | DESCRIPTION |
|---|---|
<h?> heading </h?> |
# Heading (in-place of ?, use numbers 1 for the largest to 6 for the smallest text size) |
<p> paragraph </p> |
Basic text in paragraph format |
<b> bold </b> |
bolds text |
<i> italic </i> |
italicizes text |
<a href="url"> link name </a> |
Creates a hyperlink from one page to another |
<div> ... </div> |
A divider to separate page content into sections |
<img src="filename.jpg"> |
Displays an image |
<ul> <li> list </li> </ul> |
* Unordered list of bullet points |
<ol> <li> list </li> </ol> |
1. Ordered list of numbered points |
<br> |
Line break, forcing a new line |
<span style="color:red"> red </span> |
Method to extend CSS style changes to specific text inline |
By the end of this lesson, your index.html file could look a little something like this:
<!DOCTYPE html>
<html>
<head>
<title>Code With Madi</title>
</head>
<body>
<h1>Madi Edgar</h1>
<!-- MY WHY -->
<p>I strive to empower you to grow more, to do more, and to become more.</p>
<!-- MY ROADMAP -->
<h2>What I do</h2>
<ul>
<li>Teach coding workshops to individuals, groups, birthday parties (for real though.... I would want to be friends with this type of person), after-school programs</li>
<li>Speaking engagements about STEAM (science, technology, engineering, arts/design, math), professional development, personal development, being a woman/latina/minority in tech.</li>
<li>Add compiler open source project for people to contribute to</li>
<li>Booking information</li>
</ul>
<!-- IMAGES -->
<!-- Personal Headshot (create a page with all assets people can use for promotional material) -->
<img src="./assets/img/FunHeadshot.jpg" width="200px;">
<!-- Family Image-->
<h2>About Me</h2>
<!-- - Faith
- Reason I do what I do -->
<p>My passion for developing impactful, innovative solutions is fueled by unifying the experiences of others
with my diverse professional background in industries such as financial, judicial, and property management.
As a catalyst for transformational change (inside and out of the workplace), I use my platform to hack the glass
ceiling for women and minorities by speaking at conferences, teaching workshops at universities, and mentoring
individuals across the nation.</p>
<h2>Projects/Experience</h2>
<ul>
<li>Majored in: Computer Science + Mathematical Decision Sciences</li>
<li>Research & Development Software Developer</li>
<li>Artificial Intelligence Product Manager</li>
<li>Financial Project Manager</li>
<li>Technical Business Analyst</li>
</ul>
<!-- ATTACH SOCIAL MEDIAS
- instagram
- facebook
- twitter
- twitch
- youtube
- linkedin
- email
- Add way for individual to connect to email newsletter -->
<h2>Connect With Me</h2>
<a href="https://www.instragram.com/madipfaff">Instagram</a>
<a href="https://www.facebook.com/withmadico/">Facebook</a>
<a href="https://twitter.com/madison_pfaff">Twitter</a>
<a href="https://www.twitch.tv/madiedgar">Twitch</a>
<a href="https://www.youtube.com">Youtube</a>
<a href="https://www.linkedin.com/in/madisonpfaff/">LinkedIn</a>
<a href="mailto:[email protected]">Email</a>
</body>
</html>When that page is pulled up in a web browser, it looks like this:
