├── .bookignore ├── .build.sh ├── .deploy.sh ├── .gitignore ├── .travis.yml ├── 00_unit ├── assets-chapter0 │ ├── ga_mentors_screenshot.png │ └── slack_tutorial.gif ├── exercises-quizzes-assignments.md └── units-and-lessons.md ├── 01_unit ├── assets │ ├── developer-foundations-cheatsheet │ │ └── client-server.png │ └── intro-to-programming-languages │ │ ├── back-end-code.jpg │ │ ├── front-end-code-1.jpg │ │ ├── front-end-code-2.jpg │ │ └── wireframe.jpg ├── developer-foundations-cheatsheet.md ├── developer-foundations-intro.md ├── developer-foundations-quiz.md ├── internet-fundamentals.md ├── intro-to-programming-languages.md └── think-like-a-developer.md ├── 02_unit ├── assets │ ├── developer-tools-assignment │ │ └── clone-http-1.png │ ├── developer-tools-cheatsheet │ │ └── terminal-man.gif │ ├── file-systems │ │ ├── directory.png │ │ ├── file-system.gif │ │ ├── home.png │ │ ├── root-directory.png │ │ └── subdirectories.png │ ├── git-bash-and-terminal │ │ ├── git-bash-download-1.jpg │ │ ├── git-bash-download-2.jpg │ │ ├── git-bash-install-1.jpg │ │ ├── git-bash-install-2.jpg │ │ ├── git-bash-install-3.jpg │ │ ├── git-bash-install-4.jpg │ │ ├── git-bash-install-5.jpg │ │ ├── git-bash-install-6.jpg │ │ ├── git-bash-install-7.jpg │ │ ├── git-bash-install-8.jpg │ │ ├── git-bash-install-9.jpg │ │ ├── git-bash.gif │ │ └── terminal-blank.gif │ ├── intro-to-github-exercise │ │ ├── github-setup-1.png │ │ ├── github-setup-2.png │ │ └── github-setup-3.png │ ├── intro-to-github │ │ ├── github-contents.gif │ │ ├── github-fork.gif │ │ ├── github-overview.gif │ │ ├── github-sidebar.gif │ │ ├── github-username.gif │ │ ├── github-workflow.gif │ │ ├── node-clone.png │ │ └── node-fork.png │ ├── navigating-the-command-line │ │ ├── terminal-in-finder.gif │ │ └── terminal-in-spotlight.gif │ ├── track-changes-with-git │ │ ├── git-add-commit.png │ │ ├── git-status-staged.gif │ │ ├── git-status-untracked.gif │ │ └── git-status.gif │ └── version-control-and-git │ │ ├── bad-version-control.png │ │ ├── git-installed.gif │ │ └── version-control.gif ├── controlling-files-with-command-line-exercise.md ├── controlling-files-with-command-line.md ├── developer-tools-assignment.md ├── developer-tools-cheatsheet.md ├── developer-tools-intro.md ├── developer-tools-quiz-a.md ├── developer-tools-quiz-b.md ├── file-systems.md ├── git-bash-and-terminal.md ├── intro-to-github-exercise.md ├── intro-to-github.md ├── navigating-the-command-line-exercise.md ├── navigating-the-command-line.md ├── sublime-text.md ├── text-editors-and-browsers.md ├── track-changes-with-git-exercise.md ├── track-changes-with-git.md └── version-control-and-git.md ├── 03_unit ├── assets │ ├── html-elements-exercise │ │ └── my-first-website.png │ ├── hyperlinks-exercise │ │ └── im-awesome.png │ └── intro-to-html-assignment │ │ └── deliverable.png ├── html-boilerplate.md ├── html-elements-exercise.md ├── html-elements.md ├── hyperlinks-exercise.md ├── intro-to-html-assignment.md ├── intro-to-html-cheatsheet.md ├── intro-to-html-intro.md └── intro-to-html-quiz.md ├── 04_unit ├── adding-color-exercise.md ├── adding-color.md ├── assets │ ├── adding-color │ │ └── rgb.png │ └── intro-to-css-assignment │ │ ├── anchors.png │ │ ├── deliverable.png │ │ ├── h1.png │ │ ├── h2.png │ │ ├── memory-card-game-styleguide.key │ │ └── p.png ├── choosing-the-right-markup.md ├── classes-and-ids.md ├── fonts-and-text.md ├── intro-to-css-assignment.md ├── intro-to-css-cheatsheet.md ├── intro-to-css-intro.md ├── intro-to-css-quiz.md ├── linking-html-and-css.md ├── working-with-images-exercise.md └── working-with-images.md ├── 05_unit ├── assets │ ├── header-footer-nav-exercise │ │ ├── elk-final.png │ │ ├── elk-no-css.png │ │ └── elk-with-css.jpg │ ├── layout-basics-assignment │ │ └── memory-game.png │ ├── layout-basics-cheatsheet │ │ └── box-model.png │ ├── semantic-elements │ │ ├── addl-semantic-elements.png │ │ └── basic-semantic-elements.png │ ├── the-box-model-exercise │ │ └── box-model-text.png │ └── the-box-model │ │ └── trouble.png ├── div-and-span.md ├── header-footer-nav-exercise.md ├── header-footer-nav.md ├── layout-basics-assignment.md ├── layout-basics-cheatsheet.md ├── layout-basics-intro.md ├── layout-basics-quiz.md ├── pulse-check.md ├── semantic-elements.md ├── the-box-model-exercise.md └── the-box-model.md ├── 06_unit ├── assets │ ├── column-layout-exercise │ │ └── deliverable.png │ ├── horizontal-navigation-exercise │ │ ├── elk-final.png │ │ └── elk-with-floated-nav.png │ ├── navigation-and-page-layout-assignment │ │ └── memory-game.png │ └── navigation-and-page-layout-intro │ │ ├── nav.png │ │ └── userflow.png ├── column-layout-exercise.md ├── column-layout.md ├── floating-and-clearing.md ├── horizontal-navigation-exercise.md ├── horizontal-navigation.md ├── navigation-and-page-layout-assignment.md ├── navigation-and-page-layout-cheatsheet.md ├── navigation-and-page-layout-intro.md ├── navigation-and-page-layout-quiz.md └── vertical-navigation.md ├── 07_unit ├── assets │ ├── data-types │ │ ├── data-types-chart.png │ │ ├── jsbin-screenshot.png │ │ ├── type-of.png │ │ ├── var.png │ │ └── variable_container.png │ ├── expressions-evals │ │ ├── arithmetic_operators.png │ │ ├── assignment_operators.png │ │ ├── calculator.png │ │ ├── increment.png │ │ └── modulus_operator.png │ ├── js-intro-assignment │ │ ├── console.png │ │ ├── deliverable.png │ │ └── dev-tools.png │ └── js-intro │ │ ├── account.gif │ │ ├── js-bin.gif │ │ └── js-bin.png ├── data-types-exercise.md ├── data-types.md ├── expressions-evals-exercise.md ├── expressions-evals.md ├── js-intro-assignment.md ├── js-intro-cheatsheet.md ├── js-intro-quiz.md ├── js-intro.md ├── pseudocode-exercise.md └── pseudocode.md ├── 08_unit ├── arrays-exercise.md ├── arrays.md ├── assets │ ├── arrays │ │ ├── array_syntax.png │ │ └── grocery_list.png │ ├── conditionals │ │ ├── assignment-vs-comparison.png │ │ ├── condition_zoom.png │ │ ├── flow_chart.png │ │ ├── flow_chart_1.png │ │ ├── flow_chart_2.png │ │ ├── form-check.png │ │ └── form-x.png │ ├── control-flow-assignment │ │ ├── deliverable-2.png │ │ └── deliverable.png │ └── logical-operators-boolean │ │ ├── comparison_operators.png │ │ ├── falsey_truthy.png │ │ └── logical_operators.png ├── conditionals-exercise.md ├── conditionals.md ├── control-flow-assignment.md ├── control-flow-cheatsheet.md ├── control-flow-intro.md ├── control-flow-quiz.md ├── logical-operators-booleans-exercise.md ├── logical-operators-booleans.md ├── loops-exercise.md ├── loops.md ├── switch-ternary-exercise.md └── switch-ternary.md ├── 09_unit ├── assets │ └── functions-assignment │ │ ├── deliverable-2.png │ │ └── deliverable.png ├── defining-calling-functions-exercise.md ├── defining-calling-functions.md ├── functions-assignment.md ├── functions-cheatsheet.md ├── functions-intro.md ├── functions-quiz.md ├── old_problem-solving-functions.md ├── parameters-return-statements-exercise.md ├── parameters-return-statements.md ├── scope-exercise.md └── scope.md ├── 10_unit ├── assets │ └── objects-assignment │ │ ├── deliverable.png │ │ └── deliverable_2.png ├── creating-objects-exercise.md ├── creating-objects.md ├── json-exercise.md ├── json.md ├── methods-exercise.md ├── methods.md ├── objects-assignment.md ├── objects-cheatsheet.md ├── objects-intro.md └── objects-quiz.md ├── 11_unit ├── accessing-the-dom-exercise.md ├── accessing-the-dom.md ├── assets │ ├── accessing-the-dom │ │ ├── nesting.svg │ │ ├── parent.png │ │ └── relationships.svg │ ├── dom_example │ │ └── index.html │ ├── events │ │ ├── blur.gif │ │ ├── email_form.png │ │ └── menu.gif │ ├── events_example │ │ └── index.html │ ├── manipulating-the-dom │ │ ├── adding-elements.png │ │ ├── class-name.png │ │ ├── inner-html.png │ │ ├── shopping-list-initial.png │ │ └── text-content.png │ └── the-dom-assignment │ │ └── deliverable.gif ├── dom-assignment.md ├── dom-cheatsheet.md ├── dom-intro.md ├── dom-quiz.md ├── events-exercise.md ├── events.md ├── feedback.md ├── manipulating-the-dom-exercise.md └── manipulating-the-dom.md ├── 12_feedback ├── first_request.png └── intro.md ├── CNAME ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── STYLEGUIDE.md ├── SUMMARY.md ├── _config.yml ├── assets ├── GA-logo.png ├── chapter1 │ ├── FileSystem.gif │ ├── directory.png │ ├── home.png │ ├── root_directory.png │ └── subdirectories.png ├── chapter2 │ ├── add_commit.png │ ├── bad_vcs.png │ ├── contents_github.gif │ ├── fork_github.gif │ ├── git_installed.gif │ ├── git_status.gif │ ├── git_status_staged.gif │ ├── git_status_untracked.gif │ ├── github_workflow.gif │ ├── node.png │ ├── overview_github.gif │ ├── sidebar_github.gif │ ├── step1.png │ ├── step2.png │ ├── step3.png │ ├── username_github.gif │ └── version-control.gif └── exercise.png ├── assignment-solutions.md ├── book.json ├── exercise-solutions.md ├── exercise_solutions ├── 06-header-footer-nav-exercise │ ├── index.html │ └── style.css └── 07-column-layout-exercise │ ├── index.html │ └── style.css ├── gitbook ├── app.js ├── fonts │ ├── fontawesome │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ └── fontawesome-webfont.woff │ ├── merriweather │ │ ├── 250.woff │ │ ├── 250i.woff │ │ ├── 400.woff │ │ ├── 400i.woff │ │ ├── 700.woff │ │ ├── 700i.woff │ │ ├── 900.woff │ │ └── 900i.woff │ └── opensans │ │ ├── 300.woff │ │ ├── 300i.woff │ │ ├── 400.woff │ │ ├── 400i.woff │ │ ├── 600.woff │ │ ├── 600i.woff │ │ ├── 700.woff │ │ └── 700i.woff ├── images │ ├── apple-touch-icon-precomposed-152.png │ └── favicon.ico ├── plugins │ ├── gitbook-plugin-ga │ │ └── plugin.js │ └── gitbook-plugin-richquotes │ │ └── plugin.css ├── print.css └── style.css ├── index.html ├── intro.md ├── license.md ├── package.json ├── quizzes ├── 01-quiz.md ├── 02A-quiz.md ├── 02B-quiz.md ├── 03-quiz.md ├── 04-quiz.md ├── 05-quiz.md ├── 06-quiz.md ├── 07-quiz.md ├── 08-quiz.md ├── 09-quiz.md ├── 10-quiz.md ├── 11-quiz.md └── assets │ ├── 03-quiz │ └── doctype.png │ ├── 07-quiz │ ├── john-smith.png │ └── reassigning-variables.png │ ├── 08-quiz │ ├── ages.png │ ├── buy-food.png │ ├── check-age.png │ ├── for-loop.png │ ├── strict-equals.png │ ├── switch-2.png │ ├── switch.png │ └── while-loop.png │ ├── 09-quiz │ ├── add-error.png │ ├── add-no-error.png │ ├── call-function.png │ ├── categorize.png │ ├── light-or-dark.png │ ├── order-pizza-with-call.png │ ├── order-pizza.png │ └── parameters-arguments.png │ ├── 10-quiz │ ├── dog.png │ ├── login-info.png │ ├── pencil.png │ └── superman.png │ ├── 11-quiz │ ├── alert-user.png │ ├── blur.png │ ├── denim.png │ └── directions.png │ └── code_snippets │ └── code_snippets.key ├── search_index.json ├── style-guide ├── git.md ├── html.md ├── javascript.md ├── markdown.md └── ruby.md ├── styles └── website.css └── unit_assignments ├── 03-assignment └── index.html ├── 04-assignment ├── css │ └── style.css ├── images │ ├── back.png │ ├── king-of-diamonds.png │ ├── king-of-hearts.png │ ├── queen-of-diamonds.png │ └── queen-of-hearts.png └── index.html ├── 05-assignment ├── css │ └── style.css ├── images │ ├── back.png │ ├── king-of-diamonds.png │ ├── king-of-hearts.png │ ├── queen-of-diamonds.png │ └── queen-of-hearts.png └── index.html ├── 06-assignment ├── css │ └── style.css ├── images │ ├── back.png │ ├── king-of-diamonds.png │ ├── king-of-hearts.png │ ├── queen-of-diamonds.png │ └── queen-of-hearts.png └── index.html ├── 07-assignment ├── css │ └── style.css ├── images │ ├── back.png │ ├── king-of-diamonds.png │ ├── king-of-hearts.png │ ├── queen-of-diamonds.png │ └── queen-of-hearts.png ├── index.html └── js │ └── main.js ├── 08-assignment ├── css │ └── style.css ├── images │ ├── back.png │ ├── king-of-diamonds.png │ ├── king-of-hearts.png │ ├── queen-of-diamonds.png │ └── queen-of-hearts.png ├── index.html └── js │ └── main.js ├── 09-assignment ├── css │ └── style.css ├── images │ ├── back.png │ ├── king-of-diamonds.png │ ├── king-of-hearts.png │ ├── queen-of-diamonds.png │ └── queen-of-hearts.png ├── index.html └── js │ └── main.js ├── 10-assignment ├── css │ └── style.css ├── images │ ├── back.png │ ├── king-of-diamonds.png │ ├── king-of-hearts.png │ ├── queen-of-diamonds.png │ └── queen-of-hearts.png ├── index.html └── js │ └── main.js └── 11-assignment ├── css └── style.css ├── images ├── back.png ├── king-of-diamonds.png ├── king-of-hearts.png ├── queen-of-diamonds.png └── queen-of-hearts.png ├── index.html └── js └── main.js /.bookignore: -------------------------------------------------------------------------------- 1 | # GitBook will read the .gitignore, .bookignore and .ignore files to get a 2 | # list of files and folders to skip. 3 | 4 | # The format inside those files, follows the same convention as .gitignore 5 | 6 | unreleased_chapters/* 7 | CONTRIBUTING.md 8 | README.md 9 | STYLEGUIDE.md 10 | -------------------------------------------------------------------------------- /.build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | git fetch origin '+refs/heads/*:refs/heads/*' 4 | branches=`git ls-remote --heads origin | sed 's?.*refs/heads/??'` 5 | latest=`git rev-parse HEAD` 6 | npm install -g gitbook-cli 7 | 8 | if [ -d dist ]; then 9 | rm -r dist 10 | fi 11 | mkdir ../dist 12 | tags=`git tag` 13 | 14 | for tag in $tags; do 15 | mkdir ../dist/$tag 16 | git reset --hard $tag -- 17 | echo "Building tag: $tag" 18 | touch _book && rm -r _book 19 | gitbook install > /dev/null && gitbook build > /dev/null 20 | cp -r _book/* ../dist/$tag/ 21 | done; 22 | 23 | for tag in $branches; do 24 | git fetch origin $tag 25 | if [ "$tag" != "gh-pages" ]; then 26 | mkdir ../dist/$tag 27 | echo "Building $tag" 28 | git reset --hard $tag -- 29 | touch _book && rm -r _book 30 | gitbook install > /dev/null && gitbook build > /dev/null && cp -r _book/* ../dist/$tag/ 31 | fi 32 | done; 33 | 34 | git reset --hard $latest -- 35 | 36 | echo "Building master" 37 | 38 | git reset --hard master 39 | 40 | touch _book && rm -r _book 41 | gitbook install > /dev/null 42 | gitbook build > /dev/null 43 | cp -r _book/* ../dist/ 44 | -------------------------------------------------------------------------------- /.deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -o errexit -o nounset 4 | 5 | rev=$(git rev-parse --short HEAD) 6 | 7 | cd ../dist 8 | 9 | git init 10 | git config user.name "Matt Brendzel" 11 | git config user.email "matt.brendzel@generalassemb.ly" 12 | 13 | git remote add upstream "https://$GH_TOKEN@github.com/ga-wdi/fundamentals.git" 14 | git fetch upstream 15 | git reset upstream/gh-pages 16 | 17 | echo "fundamentals.generalassemb.ly" > CNAME 18 | 19 | touch . 20 | 21 | git add -A . 22 | git commit -m "Rebuild fundamentals at ${rev}" 23 | git push -q upstream HEAD:gh-pages 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _book 2 | .DS_Store 3 | node_modules 4 | npm-debug.log 5 | dist 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 4 4 | script: 5 | - bash .build.sh 6 | after_success: 7 | - bash .deploy.sh 8 | env: 9 | global: 10 | secure: QYahdiNJbPTcQ5Pug79EZNyMg7iHQ1WVqQ4UDsESJqwEf5AiHAPnT5dyeSyQpoHMyc6XN3Kp2VG6dZ5aj/Pw/19Fma847ARu05fCkY6BOZChzZcC1cCSvo+pdbe7NBSQsxQullUcuy/EorlnUoEs6JuNyBL/qVS/VIgOzw4GiHx1+LR4zp+KwNg9/flX/2H+TVAlthWUHyF5/y7aE4UyPz7OmgmfjOvOM0MkeW5zmlxd8qOHCoS0WndT8NTrEYAggELsBWMCRQrudrOfHfmu2Ycnx5Av/jwu0ihaHzGBDolYfO6z+v8jlHehe90FsEH/uzAR8xZQyzQXg/8oXAJxLLmML0JR+db0tblXTDhlFqkS5uhac96q+ug5kmm78snK0qpslf/lnfWwe4hMJr9lJYIywY3eYAMIArh/39RiUFn1W0ZkYhVt+BD/ZiNj0htHrm4o+pC8wUe1xDM3YI453vd8riBF/XYDgTyUv/g9YpWNqjMtCsgEEZngRcufT4FDbRhIqQFqQRcf6u93bzLV0TD+7/cqocOyzL+uGmE2/TuK3lj85E0NdqvmVE4t+hRqYZj72e4vcEC5dJqz3p+oumDrA1zJPQTfDrkNNC/m35+4nw4OrfpzDOlUcSx2egwTXUSaR41HFL3Kk0YnHmHrH6wHIrQeDRY4Ea8yl+YTpGI= 11 | notifications: 12 | slack: 13 | secure: llNnXYQ/1R8QTDvodbM5MfLJMIrOSvYMvJY7Btit0vbwXfEgCpcoPNgQZK0Ol1yergnWkwwWNhMvBi5TQEaCJq5R7jHjD0XDun7lgrVMsF3TdpZXq1Op7iHpO2MfojDbu6owNIbe1jsX0LZTud48KJkNXInnbVPzfOwlTUgweXuUAs3RFWb7+Z8KcPa5pBbVIUj363DWmCYzB0MfvcYq7u7ualCY/qgiKG1/KIeHUjOoRfJnpzZztHHkQPkpqvD00DnHgLkcAXg5SPRon9fiv6drDXFOtQ7juI2pSHiBpsmvFKAjq6w83MMnNUyAzRNRWPwTk9TKWJiM2iQ+I4DWm4FOq4GHOxoXami094aiuv4AznMumZRIuN33+Ac/OsFdo2v1t/Efjx1sZyTGp/uYvMKtRtLkiO06r1bhowSkpseAv2ivbAcJGqupYvCApJZPYsF8EM2Jx1MY2Nw2QpBK1Y1BYvbS0UiTAVa7e6ECHrys1+wj07l8zvazJoa2SF/vss7KbCJR6G8qVtIgW2HaeWZeS8leFfzXC/v658zrp9TQnj4BK5JFQISyLLBzmxWPsWpwtCoMJH6z4WxIioy9yiBD//6ZMqsSi9cFbtMtEFR8BesQlOm380I1pjn4SaNr4H6LyX3Lzog0lylXDkP5Q51KjivslS/fZbwsL7/p3dk= 14 | -------------------------------------------------------------------------------- /00_unit/assets-chapter0/ga_mentors_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/00_unit/assets-chapter0/ga_mentors_screenshot.png -------------------------------------------------------------------------------- /00_unit/assets-chapter0/slack_tutorial.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/00_unit/assets-chapter0/slack_tutorial.gif -------------------------------------------------------------------------------- /00_unit/units-and-lessons.md: -------------------------------------------------------------------------------- 1 | **Welcome to WDI Fundamentals** 2 | 3 | --- 4 | 5 | #### Units & Lessons 6 | 7 | This ebook has 11 units; each unit contains lessons, exercises, quizzes, and an assignment. 8 | 9 | | UNIT | TITLE | TOPICS | 10 | |:-:|---|---| 11 | | 1 | Developer Foundations | Internet Fundamentals, Intro to Programming Languages, Think Like A Developer| 12 | | 2 | Developer Tools | Text Editors, Terminal, File Systems, GitHub | 13 | | 3 | Intro to HTML | HTML Elements and Boilerplate| 14 | | 4 | Intro to CSS | Color, Fonts, Classes + IDs, Images, Markup | 15 | | 5 | Layout Basics |Semantic Elements, Div and Span, The Box Model, Header/Footer/Nav | 16 | | 6 | Navigation and Page Layout | Horizontal and Vertical Navs, Floating and Clearing, Column Layout | 17 | | 7 | Intro to Javascript | Pseudocode, Data Types and Variables, Expressions and Evaluations | 18 | | 8 | Control Flow | Operators, Conditionals, Switch and Ternary Operators, Loops, Arrays | 19 | | 9 | Functions | Defining and Calling Functions, Parameters and Return Statements, Scope | 20 | | 10 | Objects | Creating Objects, Methods, JSON| 21 | | 11 | The DOM | Accessing and Manipulating the DOM, Events | 22 | 23 | * Every unit has **objectives** at the beginning. These are the learning goals you should be able to accomplish by the end of that unit. It's always a good idea to circle back to the objectives and self-assess! 24 | 25 | * Each lesson covers a topic related to HTML, CSS, JavaScript, or developer tools. Lessons are structured with explanations and plenty of examples to help you grasp these topics. You may have seen some of this material before, but we encourage you to do all of the exercises and assignments to really internalize the skills and vocabulary. 26 | 27 | 28 | [Now, let's learn more about the structure of assignments!](exercises-quizzes-assignments.md) 29 | -------------------------------------------------------------------------------- /01_unit/assets/developer-foundations-cheatsheet/client-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/01_unit/assets/developer-foundations-cheatsheet/client-server.png -------------------------------------------------------------------------------- /01_unit/assets/intro-to-programming-languages/back-end-code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/01_unit/assets/intro-to-programming-languages/back-end-code.jpg -------------------------------------------------------------------------------- /01_unit/assets/intro-to-programming-languages/front-end-code-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/01_unit/assets/intro-to-programming-languages/front-end-code-1.jpg -------------------------------------------------------------------------------- /01_unit/assets/intro-to-programming-languages/front-end-code-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/01_unit/assets/intro-to-programming-languages/front-end-code-2.jpg -------------------------------------------------------------------------------- /01_unit/assets/intro-to-programming-languages/wireframe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/01_unit/assets/intro-to-programming-languages/wireframe.jpg -------------------------------------------------------------------------------- /01_unit/developer-foundations-intro.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 1** 2 | 3 | --- 4 | 5 | ##### By the end of this Unit, you'll be able to: 6 | 7 | 8 | * Differentiate between the Internet and the world wide web 9 | * Describe the basic functionality of HTML, CSS, and Javascript 10 | * Differentiate between front-end and back-end languages 11 | 12 | --- 13 | 14 | # Developer Foundations 15 | 16 | Did you know that there are over one billion websites live today? You can reach so many people by creating a site that distributes your ideas in a unique way. But before you start coding, it's important to understand the fundamentals of the Internet, the functions of different programming languages used to build websites, and the process behind how sites are created. 17 | 18 | Just like a painter uses the history of art to advance her practice, understanding these foundations will help you establish context for your role as a developer within a larger team, and change your mindset from "user" to "contributor" of the web. 19 | 20 | --- 21 | 22 | [Let's Get Started!](internet-fundamentals.md) 23 | -------------------------------------------------------------------------------- /01_unit/developer-foundations-quiz.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 1** 2 | 3 | --- 4 | 5 | If you don't see the quiz below, please refresh the page. 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | --- 14 | 15 | If you have any feedback regarding this unit, [we would love to hear from you](https://ga-immersives.typeform.com/to/kKq7HW)! 16 | 17 | 18 | Finished? Great! [Review what's been covered in this unit.](developer-foundations-cheatsheet.md) 19 | -------------------------------------------------------------------------------- /01_unit/internet-fundamentals.md: -------------------------------------------------------------------------------- 1 | 2 | **WDI Fundamentals Unit 1** 3 | 4 | --- 5 | 6 | # Internet Fundamentals 7 | 8 | What exactly is the World Wide Web? How is it different from the Internet? Who controls the Internet? It's important to answer these questions and understand how the web works before we dive into HTML and CSS. 9 | 10 | The Internet and the World Wide Web are very different entities, but they are often misused interchangeably. In the video below, we'll clarify some common misconceptions about the two. 11 | 12 |
13 | 14 | 15 | 16 | ## Hungry for more? 17 | - Quartz's [Map of the Internet](https://qz.com/se/map-of-the-internet/) is a beautiful, interactive overview of how the Internet is physical. 18 | - Telegeography created an [interactive map](http://submarine-cable-map-2016.telegeography.com/) that depicts the submarine cables that essentially power the Internet. 19 | 20 | 21 | --- 22 | 23 | [On to the next lesson!](intro-to-programming-languages.md) -------------------------------------------------------------------------------- /01_unit/think-like-a-developer.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 1** 2 | 3 | --- 4 | 5 | # Think Like a Developer 6 | 7 |
 
8 | 9 | 10 | ## Googling the Error Message 11 | Professional web developers often joke that a third of being a real programmer is just knowing how to find answers on Google. This may be an exaggeration, but the point is not to worry if you ever find yourself scouring the web for the solution to a difficult coding problem. Even professionals do this and it's totally normal. 12 | 13 | #### Troubleshooting 14 | When you search Google, it's important to include the programming language you're using in your search query to narrow the results. For example, if you're looking to add an alert function to your page using JavaScript, you should search "alert method JS" or "alert method JavaScript." Only searching for "alert method" will likely provide results that are far too broad. 15 | 16 | As you know, Googling something doesn't always lead to a perfect answer or an exact solution. It's equally important to have other online resources and to eventually learn to identify and fix errors on your own. 17 | 18 | The video mentions [w3schools](http://www.w3schools.com/), [codepen.io](http://codepen.io/), and [stackoverflow](http://stackoverflow.com/) as resources for debugging. Professional developers use a number of resources, and may prefer some over others. Below is an additional list of sites developers may reference while working. 19 | 20 | #### Resources 21 | * [Mozilla Developer Network](https://developer.mozilla.org/en-US/) - a highly technical documentation of all things front-end 22 | * [HTML Validator](https://validator.w3.org/) - tool to check markup accuracy 23 | * [CSS Lint](http://csslint.net/) - tool to check CSS accuracy 24 | * [JSLint](http://jslint.com/) - tool to check JS code quality 25 | * [JS Bin](https://jsbin.com/?html,css,output), [JSFiddle](https://jsfiddle.net/), and [repl.it](https://repl.it/) - all great online code editors 26 | 27 | 28 | --- 29 | 30 | [Let's test what you've learned!](developer-foundations-quiz.md) -------------------------------------------------------------------------------- /02_unit/assets/developer-tools-assignment/clone-http-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/developer-tools-assignment/clone-http-1.png -------------------------------------------------------------------------------- /02_unit/assets/developer-tools-cheatsheet/terminal-man.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/developer-tools-cheatsheet/terminal-man.gif -------------------------------------------------------------------------------- /02_unit/assets/file-systems/directory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/file-systems/directory.png -------------------------------------------------------------------------------- /02_unit/assets/file-systems/file-system.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/file-systems/file-system.gif -------------------------------------------------------------------------------- /02_unit/assets/file-systems/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/file-systems/home.png -------------------------------------------------------------------------------- /02_unit/assets/file-systems/root-directory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/file-systems/root-directory.png -------------------------------------------------------------------------------- /02_unit/assets/file-systems/subdirectories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/file-systems/subdirectories.png -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-download-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-download-1.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-download-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-download-2.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-1.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-2.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-3.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-4.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-5.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-6.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-7.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-8.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash-install-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash-install-9.jpg -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/git-bash.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/git-bash.gif -------------------------------------------------------------------------------- /02_unit/assets/git-bash-and-terminal/terminal-blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/git-bash-and-terminal/terminal-blank.gif -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github-exercise/github-setup-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github-exercise/github-setup-1.png -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github-exercise/github-setup-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github-exercise/github-setup-2.png -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github-exercise/github-setup-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github-exercise/github-setup-3.png -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/github-contents.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/github-contents.gif -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/github-fork.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/github-fork.gif -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/github-overview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/github-overview.gif -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/github-sidebar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/github-sidebar.gif -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/github-username.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/github-username.gif -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/github-workflow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/github-workflow.gif -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/node-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/node-clone.png -------------------------------------------------------------------------------- /02_unit/assets/intro-to-github/node-fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/intro-to-github/node-fork.png -------------------------------------------------------------------------------- /02_unit/assets/navigating-the-command-line/terminal-in-finder.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/navigating-the-command-line/terminal-in-finder.gif -------------------------------------------------------------------------------- /02_unit/assets/navigating-the-command-line/terminal-in-spotlight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/navigating-the-command-line/terminal-in-spotlight.gif -------------------------------------------------------------------------------- /02_unit/assets/track-changes-with-git/git-add-commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/track-changes-with-git/git-add-commit.png -------------------------------------------------------------------------------- /02_unit/assets/track-changes-with-git/git-status-staged.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/track-changes-with-git/git-status-staged.gif -------------------------------------------------------------------------------- /02_unit/assets/track-changes-with-git/git-status-untracked.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/track-changes-with-git/git-status-untracked.gif -------------------------------------------------------------------------------- /02_unit/assets/track-changes-with-git/git-status.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/track-changes-with-git/git-status.gif -------------------------------------------------------------------------------- /02_unit/assets/version-control-and-git/bad-version-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/version-control-and-git/bad-version-control.png -------------------------------------------------------------------------------- /02_unit/assets/version-control-and-git/git-installed.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/version-control-and-git/git-installed.gif -------------------------------------------------------------------------------- /02_unit/assets/version-control-and-git/version-control.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/02_unit/assets/version-control-and-git/version-control.gif -------------------------------------------------------------------------------- /02_unit/controlling-files-with-command-line-exercise.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | ## ![Your Turn](../assets/exercise.png) Your Turn 6 | 7 | Part 1: 8 | 9 | 1) Open up your terminal application. 10 | 11 | 2) Navigate into your `Downloads` directory. 12 | 13 | 3) Move the `World` directory you downloaded in the previous exercise from `Downloads` to your home directory. 14 | 15 | 4) Check to see if you've successfully moved the `World` directory by listing the contents of your home directory. 16 | 17 | --- 18 | 19 | Part 2: 20 | 21 | You may have noticed that we neglected to include Antarctica in the `World` directory. Go ahead and correct this mistake straight from the command line: 22 | 23 | 1) Make sure you're in the `World` directory within your home directory. 24 | 25 | 2) Make a new directory titled `Antarctica` inside the `World` directory. 26 | 27 | 3) To be sure you created the directory in the right place, list the contents of the `World` directory. 28 | 29 | 4) If you haven't already, navigate back into the `World` directory. 30 | 31 | 5) List the contents of `South_America`. There should be three country directories: Argentina, Brazil, and Chile. 32 | 33 | 7) Move the contents of `South_America` into the `North_America` folder. 34 | 35 | 8) Delete the now empty `South_America` directory. 36 | 37 | 9) Change the name of the `North_America` folder to `Americas`. 38 | 39 | --- 40 | 41 | Part 3: 42 | Close and restart your terminal application. 43 | 44 | 1) In your command line, navigate to your home directory. 45 | 46 | 2) Print your working directory to confirm your location. 47 | 48 | 3) List the contents of the `Americas` folder without changing your working directory (HINT: Use an absolute path). 49 | 50 | 4) In your home directory, create a new folder called "wdi-fundamentals." 51 | 52 | 5) Change the name of the `wdi-fundamentals` folder to "fundamentals." Do not change its location. 53 | 54 | 6) We'll be using this folder to house your Fundamentals project, so keep it clean and don't delete it! 55 | 56 | 57 | > Stuck? Check out the [solutions](../exercise-solutions.md#controlling-files-with-command-line) to see what you can do. 58 | 59 | 60 | --- 61 | 62 | Think you've got it? [Test yourself!](developer-tools-quiz-a.md) 63 | -------------------------------------------------------------------------------- /02_unit/developer-tools-assignment.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | # Developer Tools Assignment 6 | 7 | Throughout the next few units, you're going to build a Memory Game! In order to share it publicly, and turn in the assignment, you'll need to set up your Github account. Follow the instructions below to get started! 8 | 9 | ## Exercise 10 | 11 | #### Requirements 12 | 13 | - Create a GitHub account 14 | - Fork the WDI Fundamentals Memory Game repository 15 | - Clone your fork locally 16 | 17 | #### Below are the steps to complete the assignment. 18 | 19 | 1. If you don't already have a Github account, [create one](intro-to-github-exercise.md) on github.com. 20 | 21 | 2. Once you're logged into github.com, click the `+` in the top right of the menu bar, and select "New Repository". 22 | 23 | 3. Name your repository `wdi-fundamentals-memorygame` and remember to select the checkbox "Initiate this repository with a README." 24 | 25 | 4. After you create your new repository, you'll need to clone it to your computer. Referencing the image below, copy the URL you'll need to clone the repository. 26 | 27 | ![](assets/developer-tools-assignment/clone-http-1.png) 28 | 29 | 5. Next, open up the terminal application on your computer and navigate to the `fundamentals` directory within your home directory. 30 | 31 | 6. Once there, run the following Git command from command line: 32 |
33 | `git clone https://your/clone/url` (substituting the clone URL you copied above) 34 |
35 | This will copy your forked repo from GitHub to your computer, so that you can work on it locally. 36 | 37 | 7. If you have followed these directions correctly, now, you should have a repository in your `fundamentals` folder called `wdi-fundamentals-memorygame`. Right now, the repository is just an empty directory– but cloning is an important skill to learn, and we'll be adding files soon. 38 | 39 | --- 40 | 41 | [That's it for now! On to the next Unit.](../03_unit/intro-to-html-intro.md). 42 | -------------------------------------------------------------------------------- /02_unit/developer-tools-intro.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | ##### By the end of this unit, you'll be able to: 6 | * Differentiate between a command line interface and a graphical user interface 7 | * Summarize a basic file system structure 8 | * Open a file in a text editor and make changes from the command line 9 | * Identify when you'd want to use absolute versus relative paths 10 | * Define a version control system and its benefits 11 | * Describe how Git works 12 | * Identify the Git commands used to set up a local repository and to record 'snapshots' of your project 13 | * Push local changes to a remote repository using the command line 14 | 15 | # Developer Tools 16 | 17 | Most computer users move their mouses, click on icons, and drag and drop files from one folder to another. 18 | 19 | When you're using the computer this way, you're using what's called a Graphical User Interface, or GUI. In a GUI (pronounced "gooey"), you communicate with your computer using a combination of text, images, and gestures. 20 | 21 | But you are on a journey toward transcending ordinary computer users. You're becoming a developer, and developers like to interact with computers in a different way — through the command line interface (CLI). 22 | 23 | Unlike the GUI, the command line is a *text-based interface*, where you communicate with your computer using text alone. 24 | 25 | Until the video display was introduced in the mid-1960s, the command line was the only way to interact with a computer. Today, the CLI is still preferred by programmers because it is explicit, simple, and (most importantly) 26 | fast. In fact, once you become comfortable using the CLI, you'll be amazed at how much more productive you become! 27 | 28 | We can perform actions using the command line by **entering commands**, and there is a command to perform virtually any action you can imagine. There are commands to open an application, create new files, copy files from one place to another, and more. 29 | 30 | We'll access the command line using a terminal application, which can be found on all computers. Terminal applications are commonly known as "shells," and we'll learn to use the default shell provided on Mac OS X and Ubuntu Linux, **Bash**. 31 | 32 | There are many different types of shells, and some are more similar to Bash than others. Fundamentals will not explore the shells that come with Windows computers, for example, because they use a different set of commands. 33 | 34 | --- 35 | 36 | [On to the next lesson!](git-bash-and-terminal.md) 37 | -------------------------------------------------------------------------------- /02_unit/developer-tools-quiz-a.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | If you don't see the quiz below, please refresh the page. 6 | 7 | 8 |
9 | 10 | 11 | 12 | --- 13 | 14 | [On to the next lesson.](version-control-and-git.md) 15 | -------------------------------------------------------------------------------- /02_unit/developer-tools-quiz-b.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | If you don't see the quiz below, please refresh the page. 6 | 7 | 8 |
9 | 10 | 11 | 12 | --- 13 | If you have any feedback regarding this unit, [we would love to hear from you](https://ga-immersives.typeform.com/to/kKq7HW)! 14 | 15 | [Next, review what's been covered in this unit.](developer-tools-cheatsheet.md) 16 | -------------------------------------------------------------------------------- /02_unit/intro-to-github-exercise.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | ## ![Your Turn](../assets/exercise.png) Your Turn 6 | 7 | GitHub enables you to host and share website files online, similar to the way Dropbox or Google Drive let you store and share other types of files. GitHub hosts the files in a remote server in the cloud and gives you a working URL so that you can share your finished site with other people. 8 | 9 | Let's walk through this process: 10 | 11 | ### Create a GitHub account 12 | 13 | **Step 1**: To start, let's head over to GitHub.com. The first thing we'll do is create a username by clicking on the field at the top right of the screen. 14 | 15 | ![](assets/intro-to-github-exercise/github-setup-1.png) 16 | 17 | The username you enter here will be part of the github URL for every site you host there, so choose something simple and easy to remember. Most people use their name, a pen name, or their company's name. To simplify things, try making your username one word and all lowercase. 18 | 19 | For this guide, we're going to use the name "gasamplepage." Please pick whatever name you like, for example "johnsmith123." After selecting our username, we'll add our email and make up a password. Then we'll click "Sign up for GitHub." 20 | 21 | **Step 2**: Clicking that button brings us to the following page. 22 | 23 | ![](assets/intro-to-github-exercise/github-setup-2.png) 24 | 25 | All we need to do on this page is make sure that "Free" is chosen as our personal plan. It should be pre-selected; however, if it's not, make sure to click on it. Then, press the "Finish sign up" button. 26 | 27 | **Step 3**: GitHub will send you an email asking you to verify your account. Take a moment to do this now. If you do not verify your email address, your page will not work. When you log in, you should see the following dashboard. 28 | 29 | ![](assets/intro-to-github-exercise/github-setup-3.png) 30 | 31 | 32 | Congratulations! You're officially a GitHub user! 33 | 34 | --- 35 | 36 | [Great work! Now test your knowledge.](developer-tools-quiz-b.md) 37 | -------------------------------------------------------------------------------- /02_unit/navigating-the-command-line-exercise.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | ## ![Your Turn](../assets/exercise.png) Your Turn 6 | 7 | Time to try out command line on your own! We've gone ahead and created a new directory for you called `World`. Download it here. 8 | 9 | When you double click on the zip file, it will create a new folder next to it in your `Downloads` folder. 10 | 11 | Now that you can picture where the file is located, open Terminal. 12 | 13 | Using the command line alone: 14 | 15 | 1) Navigate into your `Downloads` directory. 16 | 17 | 2) Move into the `World` directory from the `Downloads` directory. 18 | 19 | 3) List the contents of the `World` directory. 20 | 21 | 4) In one of the six continents within the `World` directory is a hidden file, `.carmen_sandiego.png`. Using only the command line, find out where in the `World` is Carmen Sandiego. 22 | 23 | *Don't delete the `World` directory yet! We'll be working with it in another exercise.* 24 | 25 | > Stuck? Check out the [solutions](../exercise-solutions.md#navigating-the-command-line) for assistance. 26 | 27 | --- 28 | 29 | [On to the next lesson!](controlling-files-with-command-line.md) 30 | -------------------------------------------------------------------------------- /02_unit/sublime-text.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | # Sublime Text 6 | 7 | Sublime Text is a free text editor used by developers. Check out the following video to learn how to download, install, and use Sublime Text 3. You'll need it (or another editor like it) to write code on your own. 8 | 9 | Another popular option is [Atom](https://atom.io/), an open-source text editor created by the makers of GitHub. There's a great tutorial on how to download, install, and use Atom [here](http://flight-manual.atom.io/). Both these editors are free, so you might consider testing which one you like best. 10 | 11 |
12 | 13 | 14 | **Note** 15 | * [Google Chrome](http://www.google.com/chrome/) is our preferred web browser, used to demonstrate code rendering throughout the course. If you're not already using it, feel free to download it now! 16 | 17 | --- 18 | 19 | [Got all that? Take a short quiz and test what you've just learned!](developer-tools-quiz-a.md) 20 | -------------------------------------------------------------------------------- /02_unit/text-editors-and-browsers.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | # Text Editors and Browsers 6 | 7 | There are two main tools to write your code: in a web browser and in a stand-alone text editor. 8 | 9 | You may be familiar with doing programming exercises in online applications, such as [JS Bin](http://jsbin.com/?html,js,output) and [Codepen](http://codepen.io/). These applications allow you to write code using a web-based text editor. In other words, they allow you to write your code within your web browser. When you're ready to write your code on your own, you'll work in a stand-alone text editor. 10 | 11 | Text editors and web browsers are the tools we'll use to build web applications in class and - more importantly - on the job. Watch the video below to learn about these two essential web development tools: text editors and web browsers. 12 | 13 |
14 | 15 | 16 | --- 17 | 18 | [Let's learn more about Sublime Text!](sublime-text.md) 19 | -------------------------------------------------------------------------------- /02_unit/track-changes-with-git-exercise.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 2** 2 | 3 | --- 4 | 5 | ## ![Your Turn](../assets/exercise.png) Your Turn 6 | 7 | This exercise will give you some practice using Git. 8 | 9 | 1. Open your terminal and go into to the `fundamentals` directory you created earlier. Create a new directory inside it called `git-practice`. 10 | 11 | 2. Use `cd` to navigate into that new directory; you can make sure you're in the right place by using the `pwd` command. 12 | 13 | 3. Use `git init` to create a Git repository in the `git-practice` directory. 14 | 15 |
16 | 17 | > **CAUTION** Before running `git init`, make sure you're not already inside another Git repository. Type `git status`. If you see `fatal: Not a git repository (or any of the parent directories): .git`, then you know you're good to go, and you can safely run `git init` within this folder. 18 | 19 | Notice that there is now a `.git` directory in `git-practice` — you'll see it if you run the `ls -a` command. 20 | 21 | 4. Create a new file called `README.txt` and run `git status`. What output do you get? 22 | 23 | 5. Use the `git add README.txt ` command to add the new file to the staging area. Run `git status` again — how has the output changed? 24 | 25 | 6. Now that you're satisfied with the changes that you've staged, commit them using git commit -m "...". Give the commit an appropriate message — remember, it should be short but descriptive. 26 | 27 | 7. Create a directory called `src` and add a couple of files to it. 28 | 29 | 8. Use the `add` command, but add the `src` directory instead of the individual files. Use the `git status` 30 | command — see how both files have been staged? Go ahead and commit the addition of these new files to the repo. 31 | 32 | 9. Make a change to one of the files, and run `git diff` to look at all the unstaged changes to our repo. What do you see? 33 | 34 | 10. Next, `add` the changed file and type `git diff`. What's changed? Why? What do you have to do to see a `diff` of the things in the staging area? 35 | 36 | 11. Now — without adding or committing — make another change to the same file you changed in step 9. Look at the `status` output, and the `diff` output. See how you can have both staged and unstaged changes, even when you're talking about a single file? 37 | 38 | 12. Finally, `add` and `commit` all outstanding changes. Use the `log` command to see all of the commits you've made so far. 39 | 40 | --- 41 | 42 | [On to the next lesson!](intro-to-github.md) 43 | -------------------------------------------------------------------------------- /03_unit/assets/html-elements-exercise/my-first-website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/03_unit/assets/html-elements-exercise/my-first-website.png -------------------------------------------------------------------------------- /03_unit/assets/hyperlinks-exercise/im-awesome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/03_unit/assets/hyperlinks-exercise/im-awesome.png -------------------------------------------------------------------------------- /03_unit/assets/intro-to-html-assignment/deliverable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/03_unit/assets/intro-to-html-assignment/deliverable.png -------------------------------------------------------------------------------- /03_unit/html-boilerplate.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 3** 2 | 3 | --- 4 | 5 | # HTML Boilerplate 6 | 7 | Now that we've learned a bit about HTML tags, let's think about how to organize them properly. 8 | 9 | An HTML boilerplate is a set of common HTML elements that helps us easily organize and begin building our code. Watch the following video to understand how to create an HTML boilerplate. 10 | 11 |
12 | 13 | 14 | 15 | #### Checkpoint 16 | 17 | * Which tags don't require a closing tag? 18 | * Between which tags should the ` ` tags be placed? 19 | * What are parent elements? Children elements? 20 | 21 | --- 22 | 23 | [Let's get some practice now!](hyperlinks-exercise.md) 24 | -------------------------------------------------------------------------------- /03_unit/html-elements-exercise.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 3** 2 | 3 | --- 4 | 5 | > **NOTE** Moving forward we'll be labeling HTML tags and relevant code in the `following format`. e.g., `p` for a paragraph tag or element. 6 | 7 | ##![Your Turn](../assets/exercise.png) Your Turn 8 | 9 | Time to give it a go! In this exercise, you'll get some practice opening and closing your first HTML tags. 10 | 11 | Your output should look like this: 12 | 13 | ![](assets/html-elements-exercise/my-first-website.png) 14 | 15 | ### Instructions 16 | 17 | Type your answers directly into the JS Bin text editor below. If you don't see the JS Bin below, please refresh the page. 18 | 19 | 1) Let's start with some content! Type the text below into your editor. Your content will render live in the **Output** window. 20 | 21 | ``` 22 | My first website! 23 | by a talented student 24 | Built at GA. 25 | ``` 26 | 27 | My First Website on jsbin.com 28 | 29 | 2) Next, open a *level one heading tag* (`h1`) at the very beginning where it says, "My first website!" 30 | 31 | 3) Did you notice that all the content was set to `h1`? Aha! That's because you still need to close the tag, which tells the browser when to stop rendering the text as a heading. Go ahead and close the heading tag now. 32 | 33 | 4) Open and close *level two heading tag* (`h2`) on the second line that says, "by a talented student." 34 | 35 | 5) Lastly, wrap this sentence in a *paragraph tag* (`p`): "Built at GA." 36 | 37 | 38 | 39 | Sweet! You just built a website with HTML. Sure, it's pretty basic right now, but you're just getting started. 40 | 41 | --- 42 | 43 | #### Checkpoint 44 | 45 | Make sure you have: 46 | - Opened and closed `h1` tags around the site's name. 47 | - Opened and closed `h2` tags around the site's subheading. 48 | - Opened and closed `p` tags around the site's body content. 49 | 50 | > Stuck? Check out the [solutions](../exercise-solutions.md#html-elements) for assistance. 51 | 52 | ---- 53 | [On to the next lesson!](html-boilerplate.md) 54 | -------------------------------------------------------------------------------- /03_unit/html-elements.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 3** 2 | 3 | --- 4 | 5 | # HTML Elements 6 | 7 | Let's dive deeper into the rules and syntax for writing HTML. 8 | 9 | HTML doesn't translate the spaces and line breaks in your code. That's where **element tags** come in! 10 | 11 | **Elements** provide the basic structure for any website– they consist of **opening** and **closing tags** and the content in between those tags. 12 | 13 | The tags tell the browser exactly what kind of content is being loaded and the basic structure of that content. For example, to create a large heading on a web page, an opening `

` heading tag and a closing `

` heading tag tell the browser that it needs to render the text between these tags as a large block of text. Watch the video below to learn more! 14 | 15 |
16 | 17 | 18 | #### Checkpoint: 19 | 20 | * Which heading tag is larger? `

` or `

`? 21 | * What is the default name for homepages on the web? 22 | * How should you save your HTML file? 23 | * How do you create placeholder for a link? 24 | 25 | --- 26 | 27 | Think you've got it? [Then let's get some practice!](html-elements-exercise.md) 28 | -------------------------------------------------------------------------------- /03_unit/intro-to-html-cheatsheet.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 3** 2 | 3 | --- 4 | 5 | # HTML Cheat Sheet 6 | 7 | #### Elements 8 | * The building blocks of HTML. Consists of a start tag, content, and end tag. 9 | 10 | * **Heading Elements** are used for important text — like page titles — that describe content that comes after it. They range in order from the largest (`h1`) to the smallest (`h6`). 11 | 12 | ```html 13 |

This would make a big headline

14 | ``` 15 | 16 | * **Paragraph Elements** use one of the most common tags in HTML. They indicate blocks of text. 17 | 18 | ```html 19 |

This would add a block of text to a page

20 | ``` 21 | 22 | * **Anchor Elements** create links. In order to make a working link, we need to add more information to the anchor tag using an (`href`) attribute that detemines the link's destination. 23 | 24 | ```html 25 | This would make this whole sentence a link to General Assembly's home page. 26 | ``` 27 | 28 | #### Tags 29 | * HTML syntax used to create elements. They use angle bracket bookends (`< >`) to tell a web browser how to present content. 30 | 31 | * **Heading Tags:** `

` (largest size) through `

` (smallest size) titles the content that follows it. 32 | 33 | * **Paragraph Tags:** `

` tags indicate blocks of text. 34 | 35 | * **Anchor tags:** `` tags create links. 36 | 37 | #### HTML Attribute 38 | * Adds information to an HTML element. An HTML tag can have one or many attributes. Attributes are always included in the opening tag. They are preceded by a space, include the name of the attribute, an equal sign, and a value in quotes. 39 | 40 | #### HTML Boilerplate 41 | 42 | In order to organize tags properly, start with a set of structural elements called the HTML boilerplate. It should look like this: 43 | 44 | ```html 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ``` 55 | 56 | --- 57 | 58 | [Practice your expertise with the Unit 3 Assignment!](intro-to-html-assignment.md) 59 | -------------------------------------------------------------------------------- /03_unit/intro-to-html-intro.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 3** 2 | 3 | --- 4 | 5 | # Intro to HTML 6 | 7 | ##### By the end of this Unit, you'll be able to: 8 | 9 | * Define the underlying processes of the web and the tools necessary to design and code websites. 10 | * Understand the basics of HTML structure and syntax. 11 | * Create a basic page using essential HTML tags: head, body, title, headings, anchors, and paragraphs. 12 | 13 | --- 14 | 15 | Now that we know how the Internet works and how it delivers webpages to your personal computer, let's brush up on our HTML skills! 16 | 17 | 18 |

19 | 20 | 21 | 22 | --- 23 | 24 | [Onward! To the next lesson.](html-elements.md) 25 | -------------------------------------------------------------------------------- /03_unit/intro-to-html-quiz.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 3** 2 | 3 | --- 4 | 5 | If you don't see the quiz below, please refresh the page. 6 | 7 | 8 |
9 | 10 | 11 | --- 12 | If you have any feedback regarding this unit, [we would love to hear from you](https://ga-immersives.typeform.com/to/kKq7HW)! 13 | 14 | [Now let's review what we've covered so far.](intro-to-html-cheatsheet.md) 15 | -------------------------------------------------------------------------------- /04_unit/assets/adding-color/rgb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/04_unit/assets/adding-color/rgb.png -------------------------------------------------------------------------------- /04_unit/assets/intro-to-css-assignment/anchors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/04_unit/assets/intro-to-css-assignment/anchors.png -------------------------------------------------------------------------------- /04_unit/assets/intro-to-css-assignment/deliverable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/04_unit/assets/intro-to-css-assignment/deliverable.png -------------------------------------------------------------------------------- /04_unit/assets/intro-to-css-assignment/h1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/04_unit/assets/intro-to-css-assignment/h1.png -------------------------------------------------------------------------------- /04_unit/assets/intro-to-css-assignment/h2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/04_unit/assets/intro-to-css-assignment/h2.png -------------------------------------------------------------------------------- /04_unit/assets/intro-to-css-assignment/memory-card-game-styleguide.key: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/04_unit/assets/intro-to-css-assignment/memory-card-game-styleguide.key -------------------------------------------------------------------------------- /04_unit/assets/intro-to-css-assignment/p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/04_unit/assets/intro-to-css-assignment/p.png -------------------------------------------------------------------------------- /04_unit/choosing-the-right-markup.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 4** 2 | --- 3 | 4 | # Choosing the Right Markup 5 | 6 | Phew! That's a lot of new information to process. Sometimes it can be difficult to figure out how to best structure your site, but don't worry. The video below explains best practices when it comes to choosing the right tags to create the look and feel that you want: 7 | 8 |
9 | 10 | 11 | 12 | #### Checkpoint: 13 | 14 | * How do your create ordered lists? 15 | * How do you create line breaks? 16 | * How do you create horizontal rules? 17 | 18 | --- 19 | 20 | [Let's test your knowledge!](intro-to-css-quiz.md) 21 | -------------------------------------------------------------------------------- /04_unit/intro-to-css-intro.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 4** 2 | 3 | --- 4 | 5 | ##### By the end of this Unit, you'll be able to: 6 | 7 | * Understand the difference between HTML and CSS. 8 | * Unlock millions of colors with RGB and Hex to design websites. 9 | * Learn to work with relative vs. absolute addresses. 10 | * Use classes and IDs to better organize and manipulate your code. 11 | * Add links, images, and list items to your webpage. 12 | 13 | 14 | --- 15 | # Intro to CSS 16 | 17 | HTML — or **H**yper**T**ext **M**arkup **L**anguage — is the standard language used to code web pages and add content to a website. CSS — **C**ascading **S**tyle **S**heets — dictates how content written in an HTML document looks, including stylistic layouts, colors, and fonts. 18 | 19 | In this unit, we'll learn more about CSS and styling to create better designed websites! 20 | 21 |
22 | 23 | 24 | #### Checkpoint: 25 | 26 | * Why is it important to create separate HTML and CSS documents? 27 | * Can you explain separation of concerns in greater detail? 28 | 29 | --- 30 | 31 | [On to the lesson.](adding-color.md) 32 | -------------------------------------------------------------------------------- /04_unit/intro-to-css-quiz.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 4** 2 | 3 | --- 4 | 5 | If you don't see the quiz below, please refresh the page. 6 | 7 | 8 |
9 | 10 | 11 | --- 12 | If you have any feedback regarding this unit, [we would love to hear from you](https://ga-immersives.typeform.com/to/kKq7HW)! 13 | 14 | Now, [let's review what's been covered in this unit.](intro-to-css-cheatsheet.md) 15 | -------------------------------------------------------------------------------- /04_unit/linking-html-and-css.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 4** 2 | --- 3 | 4 | # Linking HTML and CSS Files 5 | 6 | We've gotten really far with learning about HTML and CSS. But how does the CSS file communicate with HTML file? In order for the HTML file to pull in the proper CSS file, you're going to have link the two! Let's find out how. 7 | 8 |
9 | 10 | 11 | 12 | >**Note** **Relative vs. Absolute Addressing**: A relative address/path is one defined with respect to one's own position within a filesystem (e.g. `./index.html`, `main.css`); an absolute address/path is a path to a website or file that includes a full web address (starting with "http") that the browser loads from the remote location. 13 | 14 | A good rule of thumb to remember is that an absolute path always points to the same place, no matter where *you* might be in your filesystem. 15 | 16 | 17 | #### Checkpoint: 18 | 19 | * What are some best practices for organizing my files and folders on my computer? Should I be saving my work elsewhere? 20 | * What is a common name for primary CSS files? 21 | * Where in the HTML boilerplate would you put the `link` element? 22 | * What do `rel`, `type` and `href` describe? 23 | * Where does `"text/css"` go in the link attribute? 24 | 25 | --- 26 | 27 | [On to the next lesson.](working-with-images.md) 28 | -------------------------------------------------------------------------------- /04_unit/working-with-images-exercise.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 4** 2 | 3 | --- 4 | 5 | ##![Your Turn](../assets/exercise.png) Your Turn 6 | 7 | 8 | Now it's time to work with images. Our goal in this exercise will be to use HTML image tags to put a picture on the web. 9 | 10 | #### Instructions 11 | If you don't see the JS Bin below, please refresh the page. 12 | 13 | 1. Take a look at the starter code below. Yep, it's your HTML boilerplate! 14 | 15 | Grumpy Cat on jsbin.com 16 | 17 | 2. Write in an `img` tag between the body tags. 18 | 19 | 3. Add `src="http://i.imgur.com/z9gGd0t.jpg"` to your image tag. (Grumpy Cat has strong opinions about visual design!) 20 | 21 | 4. Add `alt="grumpy cat hates bad design"` to your image tag. 22 | 23 | 5. Add `title="grumpy cat"` to your image tag. 24 | 25 | 26 | #### Important to Remember 27 | 28 | * Image elements are self-closing; they don't need a closing tag. 29 | * Image URLs must end with an image extension; usually `.jpg`, `.gif`, or `.png`. 30 | * Images require a `src`. Including `title` and `alt` is strongly recommended. 31 | 32 | *Think about all the awesome stuff you can build online using images! Are you excited yet?* 33 | 34 | > Stuck? Check out the [solutions](../exercise-solutions.md#working-with-images) for assistance. 35 | 36 | --- 37 | 38 | [On to the next lesson.](choosing-the-right-markup.md) -------------------------------------------------------------------------------- /04_unit/working-with-images.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 4** 2 | --- 3 | 4 | # Working With Images 5 | 6 | Adding images to your website can help it come to life. To add images to your site, use the `img` tag with the **src** attribute. `src` stands for "Source" and tells the `img` tag where to find the image you want to include on your page. 7 | 8 | 9 |
10 | 11 | 12 | ### Breaking Down the Image Tag 13 | 14 | The `img` tag alone doesn't do much. It's like putting an `a` element in your code without an `href` attribute. The most important thing to do is to tell the browser what image to show using the `src` attribute. 15 | 16 | The `src` attribute for an `img` tag works just like the `href` attribute for a link: It tells a browser where to look for an image. 17 | 18 | ```html 19 | 20 | ``` 21 | 22 | The **image alternate attribute**, or `alt` attribute, is a text description of the image. This text will be displayed if the image doesn't load and is read aloud to users with visual impairments. This description is especially important to include when there's text in an image. 23 | 24 | 25 | ```html 26 | Grumpy cat 27 | ``` 28 | 29 | The **title attribute** tells search engines what the image is depicting, which helps the page appear in Google Image Search. 30 | 31 | ```html 32 | grumpy cat 33 | ``` 34 | 35 | --- 36 | 37 | [Let's add an image to a page!](working-with-images-exercise.md) 38 | -------------------------------------------------------------------------------- /05_unit/assets/header-footer-nav-exercise/elk-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/header-footer-nav-exercise/elk-final.png -------------------------------------------------------------------------------- /05_unit/assets/header-footer-nav-exercise/elk-no-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/header-footer-nav-exercise/elk-no-css.png -------------------------------------------------------------------------------- /05_unit/assets/header-footer-nav-exercise/elk-with-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/header-footer-nav-exercise/elk-with-css.jpg -------------------------------------------------------------------------------- /05_unit/assets/layout-basics-assignment/memory-game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/layout-basics-assignment/memory-game.png -------------------------------------------------------------------------------- /05_unit/assets/layout-basics-cheatsheet/box-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/layout-basics-cheatsheet/box-model.png -------------------------------------------------------------------------------- /05_unit/assets/semantic-elements/addl-semantic-elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/semantic-elements/addl-semantic-elements.png -------------------------------------------------------------------------------- /05_unit/assets/semantic-elements/basic-semantic-elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/semantic-elements/basic-semantic-elements.png -------------------------------------------------------------------------------- /05_unit/assets/the-box-model-exercise/box-model-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/the-box-model-exercise/box-model-text.png -------------------------------------------------------------------------------- /05_unit/assets/the-box-model/trouble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/05_unit/assets/the-box-model/trouble.png -------------------------------------------------------------------------------- /05_unit/div-and-span.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 5** 2 | --- 3 | # Div and Span 4 | 5 | Now that we know a bit about how elements behave, we can start to explore where we want to place these elements on our webpage. `span` is an inline element used to apply CSS to inline HTML, and `div` is a block element used to apply CSS to blocks of HTML. A `div` typically wraps big sections of content on a page. 6 | 7 |
8 | 9 | 10 | #### Checkpoint: 11 | 12 | * Is a `div` tag a block or inline element? 13 | * Is a `span` tag a block or inline element? 14 | 15 | --- 16 | 17 | [On to the next lesson.](the-box-model.md) 18 | -------------------------------------------------------------------------------- /05_unit/header-footer-nav.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 5** 2 | 3 | --- 4 | 5 | # Header, Footer, Nav 6 | 7 |
8 | 9 | 10 | #### Checkpoint 11 | 12 | * Why do we want to avoid using `header` or `footer` in a `div`? 13 | 14 | --- 15 | 16 | [Let's practice working with semantic elements!](header-footer-nav-exercise.md) 17 | -------------------------------------------------------------------------------- /05_unit/layout-basics-intro.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 5** 2 | 3 | --- 4 | 5 | ##### By the end of this Unit, you'll be able to: 6 | 7 | * Implement the `display` property to determine whether elements are are displayed as `inline` or `block`. 8 | * Use semantic elements to properly organize your page. 9 | * Start taking control of your page layout with `margin`, `padding`, and `borders`. 10 | * Prioritize content based on its placement on a webpage. 11 | 12 | --- 13 | # Layout Basics 14 | 15 | At this point in our journey with HTML and CSS, we'll want to start moving things around a bit on our webpage. But before that, we have to understand that HTML elements function and behave differently within the browser. HTML elements can either be `inline` or `block` elements. What's the difference? Is a `header` tag an `inline` or a `block` element? When CSS is applied, how will it render in the browser? These are all questions we'll explore below! 16 | 17 |
18 | 19 | 20 | #### Checkpoint: 21 | 22 | * Which of these are inline elements? block elements? 23 | 24 | * `` 25 | * `

` 26 | * `` 27 | * `` 28 | * `

` 29 | * `
    ` 30 | 31 | 32 | --- 33 | 34 | [On to the next lesson.](semantic-elements.md) 35 | -------------------------------------------------------------------------------- /05_unit/layout-basics-quiz.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 5** 2 | 3 | --- 4 | 5 | If you don't see the quiz below, please refresh the page. 6 | 7 | 8 |
    9 | 10 | 11 | --- 12 | If you have any feedback regarding this unit, [we would love to hear from you](https://ga-immersives.typeform.com/to/Z1CLpI)! 13 | 14 | Then, [let's review what's been covered in this unit.](layout-basics-cheatsheet.md) 15 | -------------------------------------------------------------------------------- /05_unit/pulse-check.md: -------------------------------------------------------------------------------- 1 | **Pulse Check: Units 1 - 5** 2 | 3 | --- 4 | 5 | If you don't see the feedback form below, please refresh the page. 6 | 7 | 8 |
    9 | 10 | 11 | 12 | --- 13 | 14 | Now, [let's move on to unit 6!](../06_unit/navigation-and-page-layout-intro.md) 15 | -------------------------------------------------------------------------------- /05_unit/the-box-model-exercise.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 5** 2 | 3 | --- 4 | 5 | ##![Your Turn](../assets/exercise.png) Your Turn 6 | 7 | In this exercise we'll take some time to play around with `div`s, `span`s, `margin`, and `padding` to create a lovely text layout. 8 | 9 | Here's what the content will look like when you're finished styling it. Fancy! 10 | 11 | ![](assets/the-box-model-exercise/box-model-text.png) 12 | 13 | If you don't see the JS Bin below, please refresh the page. 14 | 15 | We won't touch the HTML, but take a look at it before you hop over to the CSS tab. To give yourself more space you can select the CSS and Output tabs. Also, we gave you the `p` style. You're welcome! 16 | 17 |     Box Model on jsbin.com 18 | 19 | 0. Set the `background-color` of `body` to `#333` and the `background-color` of `div` to `#c0dec5`. 20 | 21 | 0. Add a `margin` of `64px` on *all four sides* of the `div`s content (outside the pale blue box). 22 | 23 | 0. Set the `div`s top `padding` to `32px`, a left and right `padding` of `48px`, and no `padding` on the bottom. 24 | 25 | 0. Create a rule for `span` and set these three property-value pairs: a `font-variant` of `small-caps`, a `font-family` of `Tahoma, sans-serif`, and a `letter-spacing` of `.25em`. 26 | 27 | 0. Set the `span`s `padding` to `0 3px`. Set its `background-color` to `rgb(100,150,150)`. 28 | 29 | 0. On second thought, that color is a little dark. Let's practice with RGB and alpha and make it 50% translucent. Change the `span`s `background-color` from `rgb` to `rgba` and add a `.5` alpha. 30 | 31 | 0. In your HTML, the second `p` tag has a class attribute named `source`. Let's right-align that paragraph! Add the new style to your CSS. 32 | 33 | 34 | Fabulous! You just rocked on a bunch of topics that can stump even professional web designers. 35 | 36 | > Stuck? Check out the [solutions](../exercise-solutions.md#the-box-model) for assistance. 37 | 38 | --- 39 | [On to the next lesson.](header-footer-nav.md) 40 | -------------------------------------------------------------------------------- /05_unit/the-box-model.md: -------------------------------------------------------------------------------- 1 | **WDI Fundamentals Unit 5** 2 | --- 3 | 4 | # The Box Model 5 | 6 | Now that we understand how to differentiate between `inline` and `block` elements, it's time to take a look at the CSS Box Model. Every HTML element on a webpage is in a box, therefore, every element has: 7 | * The **content** within the box 8 | * The **padding**, or the area outside of the content 9 | * The **border**, or the line between `padding` and `margin` 10 | * The **margin**, or the area outside the `border` that separates the element from other elements on the page 11 | 12 |
    13 | 14 | 15 | 16 | #### More on the Box Model 17 | 18 | In the video above, we mainly discussed how to set shorthand properties for padding values that are the same. However, there will be many cases where you'll want to set properties that have different values. Here's how your syntax would look like for different padding values for each side of an HTML element. 19 | 20 | ```html 21 | div { 22 | background: #c0dec5; 23 | padding: 30px 20px 0 15px; 24 | } 25 | ``` 26 | 27 | This means that the top `padding` will be `30px`, the right `padding` is `20px`, the bottom `padding` is `0`, and the left `padding` is `15px`. This diagram will help you visualize how this works: 28 | 29 | ![](assets/the-box-model/trouble.png). 30 | 31 | There will also be instances when you want to have the same `padding` or `margin` value for your left and right margins, and another value for your top and bottom margins. For example, to set your *top and bottom* `padding` to `0` and your *left and right* `padding` to `20px`, you would set it up like so: 32 | 33 | ```html 34 | div { 35 | padding: 0 20px; 36 | } 37 | ``` 38 | 39 | #### Checkpoint 40 | * How would you set a solid `border` that is red and has a width of `4px` for a `p` element? 41 | * How would you center a wrapper for your website? 42 | 43 | #### Further Reading 44 | * Learn more about CSS shorthand on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) 45 | 46 | --- 47 | 48 | 49 | [Ready to try coding it yourself?](the-box-model-exercise.md) 50 | -------------------------------------------------------------------------------- /06_unit/assets/column-layout-exercise/deliverable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/06_unit/assets/column-layout-exercise/deliverable.png -------------------------------------------------------------------------------- /06_unit/assets/horizontal-navigation-exercise/elk-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/06_unit/assets/horizontal-navigation-exercise/elk-final.png -------------------------------------------------------------------------------- /06_unit/assets/horizontal-navigation-exercise/elk-with-floated-nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/06_unit/assets/horizontal-navigation-exercise/elk-with-floated-nav.png -------------------------------------------------------------------------------- /06_unit/assets/navigation-and-page-layout-assignment/memory-game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/06_unit/assets/navigation-and-page-layout-assignment/memory-game.png -------------------------------------------------------------------------------- /06_unit/assets/navigation-and-page-layout-intro/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/06_unit/assets/navigation-and-page-layout-intro/nav.png -------------------------------------------------------------------------------- /06_unit/assets/navigation-and-page-layout-intro/userflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Milisant/fundamentals/6a056fe421c30ff65caabffb1af245d2e1bee779/06_unit/assets/navigation-and-page-layout-intro/userflow.png -------------------------------------------------------------------------------- /06_unit/column-layout.md: -------------------------------------------------------------------------------- 1 | 2 | **WDI Fundamentals Unit 6** 3 | 4 | --- 5 | # Column Layout 6 | 7 |
    8 | 9 | 10 | ## Reminder: Use IDs Sparingly in CSS 11 | 12 | You are technically allowed to use CSS IDs, but these are almost never used by professional developers because of their specificity. CSS classes give you the ability to reuse styles, whereas any style specified with an ID can only be used once. Also, IDs can override classes, making a code base more difficult to maintain as it gets larger. 13 | 14 | Overall, using classes in your CSS will help with the scalability of your design and your ability to write cleaner code. 15 | 16 | Only use IDs in your CSS if you're 100% positive that the styles are for one unique element and you will not need to reuse the styles at any point. 17 | 18 | ## Reminder: Using IDs in JavaScript 19 | 20 | When writing JavaScript, IDs are useful for accessing and altering different elements on your page. This process is called DOM manipulation. You'll learn more about manipulating the DOM once we dive deeper into JavaScript. For now, remember to style and select using classes when writing your CSS! 21 | 22 | #### Checkpoint 23 | 24 | * What does the `