JUNIOR

ACADEMY

7/30/2016

rules 

  • Everyone gets respect
  • Leave no one behind
  • No phones/tablets/miscellaneous devices not approved by instructors
  • No installing/downloading unauthorized programs/files
  • No food/open bottles in front of computers
  • We clap, you clap
  • No spinning on chairs when instructors are speaking
  • "Three before me": Ask at least three peers before asking an instructor for help

homework review!

github

  • What is version control?
    • Is a management system for programs with many versions or configurations. 
    • What is git version control?
      • Collaborative programming
      • Developer Cloud interface 
      • git != GitHub
  • What is GitHub?
    • GitHub is like a social network/code sharing site for coders

sign up

  • Setting up your GitHub account
  • Go to github.com and click "sign up"
  • Fill out the form and click continue
    • Pick a username you will not be embarrassed to share with others.
    • MAKE SURE TO USE A EMAIL YOU HAVE ACCESS TO
  • When finished it will prompt you to confirm your email
    • Go to your email and find the GitHub email
    • Click on the confirmation link and it will take you back to GitHub automatically
  • You're done!!

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="page-loader frozen">
        <div class="page-loader-inner">
            <div class="page-loader-spinner"></div>
            <p class="page-loader-message">Loading</p>
        </div>
    </div>
  </body>
</html>

text editors

  • What is a text editor?
    • Text editors are programs used to edit text/write code
    • In Academy, we will be using Sublime Text
      • ​Sublime Text is free and can be downloaded at home
    • Different from word processors
      • Word processors are programs used to edit and format text

browsers

  • What is a browser?

    • A program with a graphical user interface for displaying HTML files, used to navigate the World Wide Web.

    • There are various different browsers, and slight differences between how each GUI displays HMTL5

    • The browser we are using for Academy is Google Chrome

intro to html

  • What is HTML?
    • Hyper Text Markup Language, or HTML, is the basic code that makes up the foundation
      of every website on the World Wide Web.
    • HTML is used for marking up text and other
      page content, and for defining how a web page is structured.
    • We are currently using HTML5

basic html

  • Open up Sublime Text
  • Create a new file
  • Save the file as "index.html" in your "Hello World" folder
  • Type in the following code to your index.html file
  • PAY ATTENTION TO INDENTATION.
<!DOCTYPE html>

<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

why indent?

<!DOCTYPE html>

<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>
<!DOCTYPE html>

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

structure of html

  • DOCTYPE declaration
  • Opening and closing tags
    • Every tag you open except a select few contain an opening and closing tag
      • ex. <title> (opening) </title> (closing)
      • closing tags contain the "/"
  • Comments
  • Layout
    • Head/body
      • ​What goes inside the head?
      • What goes inside the body?
    • <html> </html> tags

tags

<div></div>

 

Tags will always have an opening and closing identifier

List of common tags

  • <body></body>
  • <head></head>
  • <div></div>
  • <h1> - <h6>
  • <ul></ul>
  • <img />
  • <button></button>
  • <li></li>
  • <span></span>
  • <a></a>

html exercise

  • Make a new folder on your Desktop named JRDLAppDev
  • Make a new project folder inside your JRDLAppDev folder
  • Open Sublime Text
  • Create an index.html file
  • Save it to the correct folder: JRDLAppDev/NEWPROJECTFOLDERNAMEHERE
    • Note: do not actually name your folders "New Project Name here"; such names are just placeholders
  • Create the basic HTML skeleton

tags we're using today

  • <head></head> Should be obvious
  • <body></body> Should be obvious
  • <p></p> Indicates we're beginning a paragraph
  • <h1></h1>, <h2></h2>, etc.
  • <div></div> Divides up the webpage into easier-to-manage divisions
  • <ul></ul> Indicates that the following items are in an unordered list.
  • <ol></ol> Indicates that the items are in an ordered list
  • <li></li> Used to surrounded each item in the ul or ol

quiz time!

https://www.surveymonkey.com/r/CLT2GR6

personal profile

  • Using what we just learned, create a personal profile containing your name, age, hobbies, goals, and other miscellaneous information
    • There is no such thing as being "finished"
    • If you feel that you are finished, add more tags/content and organize it and improve it
  • Utilize the various tags we learned
  • Utilize outside resources to use one tag that we have NOT taught you
  • Remember: THREE BEFORE ME. Ask your peers before you ask your instructors. 

Jr. DevLeague Academy 7/30/16

By jtheadland

Source: ifang

Jr. DevLeague Academy 7/30/16

  • 590

More from jtheadland