Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programming for Non-Programmers

Programming for Non-Programmers

Slides for day 1 and 2 of the Programming weekend bootcamp at GA Chicago Nov. 7th and 8th.

Bill Patrianakos

November 07, 2015
Tweet

More Decks by Bill Patrianakos

Other Decks in How-to & DIY

Transcript

  1. BILL PATRIANAKOS Software Engineer & Full stack developer Founded a

    web design company CTO @ Aplo, LLC BEWD Instructor at GA
  2. WHAT YOU’LL LEARN ➤ What is programming? ➤ How different

    languages fit together to create a website ➤ Back-end vs. Front-end development ➤ Overview of HTML, CSS, and JavaScript ➤ Overview of databases and back-end languages
  3. SETTING UP YOUR ENVIRONMENT ➤ Get a text editor ➤

    Sublime Text 3 is an excellent choice (sublimetext.com/3) ➤ Install Node.js (nodejs.org) ➤ Are you on Windows? You may want to install some additional tools: ➤ Cygwin (https://cygwin.com) ➤ GOW (https://github.com/bmatzelle/gow) ➤ GitHub for Windows (https://desktop.github.com)
  4. HTML BASICS ➤ What is HTML? Hypertext Markup Language ➤

    Describes the structure and/of content ➤ HTML pages are documents ➤ Should always be thought of as “pages” or “documents” ➤ Influences accessibility ➤ Affects Google’s view of your site (SEO) ➤ Originally built as a text-only medium
  5. HTML BASICS ➤ DOCTYPE - Tells the browser how to

    interpret the document (sort of optional but never leave it off) ➤ <html></html> - The container for the entire document ➤ <body></body> - The container for content that is to be displayed in the browser
  6. TEXT ELEMENTS ➤ <h1> - <h6> - There are 6

    levels of headings. Lower numbers are assigned to top level headings (like section titles) ➤ <p> - A paragraph tag ➤ <ul> & <ol> - Unordered (dotted) and ordered (numbered) list elements ➤ <li> - List items. Used in both ordered and unordered lists ➤ <a> - Anchor tags (for links) ➤ There are many more but these are just the most common ones
  7. SECTIONING ELEMENTS ➤ <div> - A generic division of the

    page. ➤ <main> - Denotes the main content apart from headers or footers ➤ <section> - A logical grouping of content and elements that would make sense on their own ➤ <article> - Content that can be syndicated on its own. An article, basically. But it can be more than just that. ➤ <nav> - Element that contains navigation elements ➤ <header> - The header of a page or section ➤ <footer> - Footer of a page or section or both ➤ <aside> - Additional information not part of the main content or section or a sidebar
  8. THE HEAD OF THE DOCUMENT ➤ The <head> element contains

    information about the document itself but not any content ➤ Titles, references to external assets ➤ Additional meta information and browser instructions
  9. CSS BASICS ➤ What is CSS? Cascading Stylesheets ➤ It’s

    all about the Cascade ➤ Elements, classes, and IDs are used to select parts of a document to style ➤ Selectors can be chained for greater accuracy ➤ CSS Syntax selector { property: value; }
  10. JAVASCRIPT ➤ The only programming language supported by web browsers

    ➤ Used for adding interactivity to web pages ➤ Tried to piggyback off of the popularity of Java by using a similar name (JavaScript has nothing to do with Java)
  11. THE COMPONENTS OF A WEB APP ➤ Router - Routes

    URLs to code functions ➤ Models - Communicates with a database, describes data ➤ Views - The HTML pages rendered in a user’s browser ➤ Controllers - Handles a request and passes data to a view ➤ Databases - Persistent storage
  12. WEB FRAMEWORKS ➤ Don’t repeat yourself ➤ Focus on your

    problem domain, not common components