Course Assignments and Resources
MAMP is a free, local server environment that can be installed under macOS and Windows. Download
Atom text editor for PC/Mac Download
- Marvel is perfect for individuals and teams of all sizes. Start for free.
- Repl.it gives you an instant IDE to learn, build, collaborate, and host all in one place.
- CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.
- CodePen is a social development environment for front-end designers and developers.
- Photopea is a free online image editor, that runs without plugins. It can both read and save PSD files.
- CodeSandbox an online code editor
Google Chrome Download
Safari - Apple Download
Firefox browser Download
Firefox Quantum: Developer Edition Download
Opera browser Download
Microsoft Edge
HTML stands for Hypertext Markup Language and that it is the standard markup language for the creation of web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Development 101</title>
</head>
<body>
<h1>Week One: HTML Sample Code</h1>
<p>This class is awesome!</p>
</body>
</html>
CSS stands for Cascading Style Sheets and it represents the design conventions that are applied to the display of HTML elements on screen, paper and other media
body {
background-color: powderblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Verdana;
font-size: 20px;
}
What is JavaScript?
- JavaScript is not Java
- JavaScript == ECMAScript
- European Computer Manufacturers Association (ECMA). The organization was founded in 1961 to standardize computer systems in Europe. ECMAScript is commonly used for client-side scripting on the World Wide Web
- Programming language of the web
- Commonly used for Front-end development (what happens on the browser)
- Creates interactions
- Servers side (Back-end Development)
/* Immediately-Invoked Function Expression, or IIFE for short.
Executes after the document loads (ready)
*/
(function() {
"use strict";
/*
"use strict"; Defines that JavaScript code should be executed in "strict mode".
Not required but learn more at
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
*/
/* Lets add an event listener for when the page loads
by adding DOMContentLoaded
*/
window.addEventListener('DOMContentLoaded', (event) => {
console.log('window.addEventListener', window.addEventListener);
});
document.addEventListener('DOMContentLoaded', function() {
var year = 2018;
/* Using the new Date() function
new is a keyword which is required for Date
https://www.w3schools.com/js/js_date_methods.asp
*/
var d = new Date();
console.log('d', d);
var currentYear = d.getFullYear();
console.log('DOMContentLoaded innerHTML', document.querySelector('.footer'));
console.log('DOMContentLoaded textContent', document.querySelector('.footer').textContent);
/* Add copyright year */
var classYearElement = document.querySelector('footer .year');
//classYearElement.innerHTML = year;
classYearElement.innerHTML = currentYear;
});
})(); // the end!
Utilize the Emmet Plugin for lazy coding
Type or Copy and Paste the below into a saved html file
Standard Layout
html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset};ie=edge"]+meta[ name="viewport" content="width=device-width, initial-scale=1.0"]+title{${1:My Portfolio Site}}+link:css)+body>div.wrapper>(header.header[role="banner"]>nav[role="nav"]>menu)+(main.main[role=main]>div#main.content>p)+(footer.footer[role="contentinfo"])
Click the Tab key
Does the below syntax render? If yes, Congratulations!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8;ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<nav></nav>
<menu></menu>
</header>
<main class="main">
<div class="content">
<p></p>
</div>
</main>
<footer class="footer"></footer>
</div>
</body>
</html>
If no, install the Emmet plugin for Atom? Installation Review the Emmet Cheat Sheet
Test a website's performance
Create Github account and enable Github Pages
Keyboard shortcuts in Windows
Applies to: Windows 10 Windows 8.1 Windows 7
Mac keyboard shortcuts
By pressing certain key combinations, you can do things that normally need a mouse, trackpad, or other input device. Learn more
What is the revenue generation model for DuckDuckGo?
- Stock Images: https://www.pexels.com/search/google/ https://www.canva.com/photos/
- Text/Content: https://www.lipsum.com/
- Lorem Ipsum for photos: https://picsum.photos/
- Font: https://fonts.adobe.com/ https://fonts.google.com/ https://www.fontsquirrel.com/ https://fontawesome.com/start
- Facebook - learn about social plugins, iframe, facebook developer and custom tabs
- Business Manager Instagram - learn how-to use images, embedding coding and share post on Facebook, Twitter and Tumblr
- Twitter Developer Publish and analyze Tweets, optimize ads, and create unique customer experience
- Tumblr - post multimedia, other content to a short-form blog and low budget web sites
- Pinterest - creating and marketing images on a smaller scale, GIFs and videos
- YouTube - how to manage YouTube content
- LinkedIn - professional networking
- Alignable The Small Business Network
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Create sophisticated formatting for your prose and code on GitHub with simple syntax. Learn more
The github package brings Git and GitHub integration right inside Atom. Learn more