The meat and potatoes of any website. HTML is what contains all of elements in our page. And stores them in tags that tell browsers how to interpret and read them
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<p>Mom! Get the camera I'm a web developer</p>
</body>
</html>
Head
Body
<!DOCTYPE html>
<html>
<head>
<title>I'm Self-Explanatory</title>
</head>
<body>
<h1>I'm one style of header</h1>
<h2 id="bigText">I'm a smaller style of header</h2>
<p>I'm where you write content</p>
<p class="links">"a" tags
<a href="https://www.w3schools.com/html/html_intro.asp">link to your meme page</a>
</p>
<img src="https://i.imgur.com/Bwa0QcF.jpg" alt="I'm an image tag"/>
<div>
<ul>
<li>UL stands for unordered list</li>
<li>LI stands for list element</li>
</ul>
</div>
<div>
<ol>
<li>I'm ul but with numbers</li>
</ol>
</div>
</body>
</html>
So yeah, HTML is really just a bunch of tags telling a web page how to organize and arrange content. The <header>,<div>, and <body> tags are like the sections of a file system. The rest of the tags are the actual content inside of the file system.
More on HTML
Is the artist tool to make a web page look good. It's where a large amount of a web developers time goes to die (unless you use a template).
With CSS
Without CSS
<!DOCTYPE html>
<html>
<head>
<title>Mack's Amazing WebSite</title>
</head>
<body>
<div id="navbar">
<ul>
<li>
<a href="mailto:mwilson317@gatech.edu" class="nav-link">Don't Spam Plx</a>
</li>
<li>
<a href="https://www.facebook.com/groups/GTmemesforbuzzedteens/" class="nav-link">Meme Page</a>
</li>
</ul>
</div>
<br/>
<div id="about">
<h1 id="intro">Welcome to Mack's <span id="fancy">WebDev Website</span></h1>
<img src="https://media.giphy.com/media/d3JtCNegRi2zgmpG/giphy.gif"/>
<p>I call it a webdev site, but I'm just linking to tutorials</p>
<p>Like this one on <a id='address' href="https://www.w3schools.com/howto/howto_js_topnav.asp"> CSS navbars</a></p>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: 'Open Sans', sans-serif;
color: #7f8c8d;
background-color: #fefefe;
margin-top: 2em;
}
h1, h2, h3 {
font-family: 'Slabo 27px', serif;
}
Spice up the recipe in styles.css
<...>
<head>
<title>Mack's Amazing WebSite</title>
<link rel="stylesheet" href="style.css"/>
</head>
</...>
Link your stylesheet in index.html
CSS works in a similar way to HTML. It looks at a certain tag or element and tells the browser "Make it look like this".
To do this on the code side you specify what tag, class, or element you want to style. Hit the curly q's {}, and begin styling away
...
#navbar > ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
}
#navbar > ul > li {
margin: 0 2em;
display: inline-block;
float: right;
border-bottom: solid #7f8c8d 2px;
position: relative;
}
.nav-link {
width: 100%;
height: 100%;
margin: 0;
text-decoration: none;
}
a {
color: #96eb36;
}
Making Nav Look Nice stylesheet.css
...
img {
border-radius: 70%;
overlayColor: 'white';
}
#intro {
font-size: 4em;
}
#about {
text-align: center;
}
#fancy {
color: #9DE79C;
text-decoration: underline;
}
The closest to CS1331 you'll get with frontend
Javascript's job when it comes to frontend web dev is to make your website reactive and engaging. This could mean adding animations, drop-down menus, buttons, etc.
...
<button onclick = "pika()"> Pika? </button>
<script>
function pika(){
alert("Pika! Pikaaa!");
}
</script>
</body>
...
button {
background-color: #96eb36;
font-family: "Open Sans", sans-serif, white;
padding: 5px 25px;
font-size: 18px;
margin: 0;
color: #444;
}
Javascript can be directly embedded into HTML or it can be linked to like a stylesheet
Speaking of stylesheets let's make our button look good
var fancyText = document.getElementById('fancy');
var intervalTime = 150;
var initialPause = 1000;
var callbackPause = 500;
In order to edit things dynamically with our script we have to select them with the document.getElementById() function
...
<script src="script.js"></script>
</body>
And to make sure it runs we need to add a reference in index.html
...
function deleteContent(callback) {
var intervalId = setInterval(function() {
if (fancyText.innerHTML.length == 0) {
clearInterval(intervalId);
if (callback) {
setTimeout(callback, callbackPause);
}
}
fancyText.innerHTML = fancyText.innerHTML.substring(0, fancyText.innerHTML.length - 1);
}, intervalTime);
}
...
function deleteContent(callback) {
var intervalId = setInterval(function() {
if (fancyText.innerHTML.length == 0) {
clearInterval(intervalId);
if (callback) {
setTimeout(callback, callbackPause);
}
}
fancyText.innerHTML = fancyText.innerHTML.substring(0, fancyText.innerHTML.length - 1);
}, intervalTime);
}
A big part of understanding JS is understanding asynchronous functions. Asynchronous functions are ones that may run while the rest of your program is doing stuff. So in order to make sure everything goes smoothly we have to use callback functions and interval timeouts to make sure code runs as expected
...
function addContent(contentToAdd, callback) {
var currentIndex = 0;
var intervalId = setInterval(function() {
if (currentIndex == contentToAdd.length) {
clearInterval(intervalId);
if (callback) {
setTimeout(callback, callbackPause);
}
}
fancyText.innerHTML = contentToAdd.substring(0, currentIndex);
currentIndex++;
}, intervalTime);
}
...
setTimeout(function() {
deleteContent(function() {
addContent("HackGTeeny WorkShop", function() {
deleteContent(function() {
addContent("Pikachu fan site", function() {
deleteContent(function() {
addContent("Web Dev 101 Course");
})
});
});
});
});
}, initialPause);
This is an example of the callbacks and timeout functions we use in order to make sure that our web page runs as expected
Github Link for Code: https://github.com/Mack33467/WebDev101
Link to HTML Tutorials: https://www.w3schools.com/
Link to Mozilla's JS Tutorials:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
Link to Angular a webdev framework: