HTML

Project 1: Build a Personal Website via General Assembly!

I used to think I knew HTML/CSS so well from tweaking codes on Tumblr and MySpace (the good ol’ days). How wrong was I?! I was working through my Flatiron School Bootcamp Prep course and was introduced to a new section of JavaScript called the DOM, which requires you to know HTML. Wow I don’t know anything! is what I thought. I had to solve a few challenges but in order to solve those challenges, you need to have prior knowledge in the basics of HTML. I hadn’t remembered anything and I didn’t even know there was a difference between HTML and CSS. Silly silly silly Ursh. BUT there’s always something new to learn and that’s what’s so cool about programming; you’re always learning. So I learned that the DOM connects web pages to scripts and programming which adds interactivity. I still haven’t gotten through this section, but I made it a point to work through Codecademy’s HTML/CSS course and now I’m doing General Assembly’s DASH course so I can build Tumblr themes! So I now know what HTML is and what it does to a web page. Yay.

HTML (also called HyperText Markup Language) is the structure of the content that goes inside the tags. It’s the standard markup language for creating web pages and web applications. Browsers generally provide a default style but HTML is pretty useless and ugly without its partners, CSS and JavaScript.

To have a valid HTML document, you need to tell the browser that you’re using HTML5. You have to start the structure of your code off with

<!DOCTYPE html>

on the first line, before everything else. That tells the browser that you’re using the newest version (HTML5). Together, the doctype, head, and body make up the basic foundation and structure that every website starts with. Cool right?

CSS (also called Cascading Style Sheets) controls the style of the HTML content or an XML document. It lets you change colors, fonts, layouts, etc. It describes how elements should be rendered on screen, on paper, in speech, or other media. It’s like painting, but on a digital screen. If you’re a person who’s into making things look aesthetically pleasing, you’ll like CSS.

This is what I’ve created so far in General Assembly—it’s not perfect and it’s not pretty because I don’t know how to do all the cool things yet but it’s still something. Here’s the link and the code below.


<!DOCTYPE html>
<head>
<title>Ursh</title>
<style>

body {
text-align: center;
background: white;
color: black;
background-size: cover;

}

img {
border-radius: 100%;
max-height: 500px;
max-width: 70%;
}

h2 {
font-size: 40px;
font-family: Verdana;
}

p {
font-size: 16px;
font-family: Verdana;
}

input[type="email"] {
padding: 10px;
border: 2px solid black;
font-size: 16px;
font-family: Verdana;
}

input[type="submit"] {
background: black;
color: white;
font-family: Verdana;
font-size: 16px;
padding: 10px
}
</style>

</head>
<body>
<img src="https://i2.wp.com/i65.tinypic.com/2wqzorb.jpg?w=2448" data-wpmedia-src="http://i65.tinypic.com/2wqzorb.jpg">
<h2>URSH URSH URSH</h2>
Visual Arts & Programming
Baruch College, Corporate Communications & English Literature
<input type="email" placeholder="Let's chat!">
<input type="submit">
</body>