/uxc4

Bootcamp UXC4 Project Folder

Primary LanguageCSS

Welcome to UXC4 Project Folder

Course Assignments and Resources

Software Installs

MAMP is a free, local server environment that can be installed under macOS and Windows. Download

Atom text editor for PC/Mac Download

Install Helpful Atom Plugins

Alternatives

  • 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

Browsers to Install

Google Chrome Download

Safari - Apple Download

Firefox browser Download

Firefox Quantum: Developer Edition Download

Opera browser Download

Microsoft Edge

HTML: Sample Code

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: Sample Code

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

JavaScript

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!

Using Emmet

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

Resources

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?

Alternatives

Social Media

  • 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

README: Basic writing and formatting syntax

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

README: GitHub package

The github package brings Git and GitHub integration right inside Atom. Learn more