diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..8cdbc30 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,40 @@ +{ + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 6, + "ecmaFeatures": { + "impliedStrict": true + } + }, + "env": { + "browser": true, + "es6": true, + "node": true + }, + "rules": { + "no-var": "error", + "eqeqeq": ["error", "always"], + "no-console": "off", + "no-undefined": "off", + "indent": ["error", 2], + "quotes": ["warn", "single"], + "no-multi-spaces": [ + "warn", + { + "exceptions": { + "VariableDeclarator": true + } + } + ], + "no-trailing-spaces": "warn", + "new-cap": "warn", + "no-redeclare": [ + "error", + { + "builtinGlobals": true + } + ], + "semi": [2, "always"], + "eol-last": "error" + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5f54bc6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,155 @@ + +# Created by https://www.gitignore.io/api/node,linux,macos,windows,visualstudiocode + +### Linux ### +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +### macOS ### +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless + +### VisualStudioCode ### +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +### Windows ### +# Windows thumbnail cache files +Thumbs.db +ehthumbs.db +ehthumbs_vista.db + +# Dump file +*.stackdump + +# Folder config file +[Dd]esktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msix +*.msm +*.msp + +# Windows shortcuts +*.lnk + + +# End of https://www.gitignore.io/api/node,linux,macos,windows,visualstudiocode \ No newline at end of file diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000..7eb9a29 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,14 @@ +{ + "line-length": false, + "no-trailing-punctuation": false, + "no-inline-html": { + "allowed_elements": [ + "dl", + "dt", + "dd", + "summary", + "detail", + "img" + ] + } +} diff --git a/README.md b/README.md index f8d8cd9..5c209ea 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,81 @@ -# cedarrapids-code-102w27 -Intro to Software Development +# Code 102: Intro to Software Development + +## Course Information + +- Course Level: 102 + +## Course Prerequisites + +- Computer updated with the latest version of OS, all security patches installed. +- Familiarity with basic algebra concepts. +- Code 101 or equivalent exposure to basic HTML and CSS. + +Recommended: Be able to type at least 30 words per minute. + +> Students with previous relevant or equivalent experience can test out of this requirement in their application. + +## Course Description + +In this course you will build a strong software development foundation and learn how to use HTML, CSS, and JavaScript to build for the modern web. You will learn the methods and tools of professional software developers through studying computer science concepts and utilizing contemporary development technologies, including VSCode, Chrome (and its developer tools), Git, GitHub, and Terminal. + +## Program Learning Outcomes + +Builds a strong software development foundation and learn how to use HTML, CSS, JavaScript, and various libraries to create fully-functional web apps. + +This course guides students toward developing a well-rounded foundation of skills necessary for modern web development. These skills include HTML, CSS, and JavaScript coding; utilizing Git workflow processes, project organization, designing with wireframing and employing introductory Agile development methods. + +## Student Learning Outcomes + +Upon satisfactory completion of this course, a student should be able to: + +### Describe and Define + +#### Web Development + +- Website structure (files, resources) +- The benefits of version control with Git and GitHub +- Markdown +- Proper use of Semantic HTML +- The role of CSS in website development and design + +#### JavasScript Programming + +- Variables & storing data +- Conditionals +- Flow control with "for" and "while" loops + +### Execute + +- Tie together HTML, CSS, and JavaScript in an interactive web page. +- Use the same tools utilized by professionals across the tech industry. +- Apply CSS to style content with color, typography, and images. +- Utilize Javascript to make web projects interactive. +- Utilize industry-standard version control tools and workflows, including Git and GitHub. +- Configure your computer and see the workflow for serious software development, with free and open-source tools. +- Learn to write documentation using Markdown. + +## Course Schedule + +| Class # | Topic | +|-----------------|-----------| +|1| [Learning. Markdown.](class-01/) +|2| [The Coder's Computer](class-02/) +|3| [Revisions and the Cloud](class-03/) +|4| [Structure web pages with HTML](class-04/) +|5| [Design web pages with CSS](class-05/) +|6| [Activate web pages with JavaScript](class-06/) +|7| [Programming with JavaScript](class-07/) +|8| [Just enough math, logic, and computer architecture](class-08/) +|9| [Career Coaching](class-09/) +|10| [201 Entrance Exam](class-10/) + +### Tips for Success + +Get ready to tackle some seriously ambitious material! You'll have the most success if you: + +- Take notes during class. +- Keep up with the daily assignments (code and reading). +- Research topics that are new or confusing. +- Speak up when you're stuck for more than 15 minutes. +- Be thorough and deliberate when reading error messages and console/terminal responses. Take your time and do not go too fast. Always know what you are doing. +- And, above all else, pay attention to details. diff --git a/class-01/DISCUSSION.md b/class-01/DISCUSSION.md new file mode 100644 index 0000000..ecd0285 --- /dev/null +++ b/class-01/DISCUSSION.md @@ -0,0 +1,41 @@ +# Reflection and Discussion + +Below is a collection of resources of varying types and lengths which describe the topics from lecture. + +Go through these resources, and **create a page in your reading-notes repo** that summarizes the topics you learned as though you were presenting the material to a non-technical friend interested in learning about it. + +Note entry ideas: + +* Blog Article (2-3 paragraphs with code sample) +* Dictionary / Flash Cards +* Notes in outline form +* Fill-in-the-blank worksheet of key concepts + +## Read and Bookmark + +* [Getting Started](https://www.markdownguide.org/getting-started/){:target="_blank"} + * Read only **"What is Markdown"** and **"Why Use Markdown"** sections +* [Markdown Basic Syntax](https://www.markdownguide.org/basic-syntax/){:target="_blank"} +* [Mastering Markdown on GitHub](https://guides.github.com/features/mastering-markdown/){:target="_blank"} + +## Watch + +* [GitHub Pages](https://pages.github.com/){:target="_blank"} + +## Answer + +1. What is Markdown? +2. Why do we use Markdown? +3. What symbol will create a heading in Markdown? + 1. How many do you need to create the largest heading? + 2. How many do you need to create the smallest heading? +4. When making text bold or italicized for emphasis, it is best practice to use which symbol? +5. How do you create a link with Markdown? +6. What are the three symbols you can use to create an unordered (bulleted) list with Markdown? + +## Submission + +* Share what you've learned by copying and pasting the full text of your **new rendered web page** into the 'Reply' below. +* Include the live URL of the new page below your pasted text. (*Hint: The URL of the page should begin with YOUR GitHub username, not "github.com"*) + +You are invited to check out your classmates' replies and give positive feedback and words of encouragement. diff --git a/class-01/README.md b/class-01/README.md new file mode 100644 index 0000000..add1101 --- /dev/null +++ b/class-01/README.md @@ -0,0 +1,36 @@ +# Learning. Markdown. + +Welcome to Code 102! We will dive right in to learning new things. + +## Learning Objectives + +- Students will understand the impact of mindsets on the learning process and know how to adjust their mindset for effective skill acquisition. +- Students will use essential Markdown syntax to create documents and publish a web site of interconnected pages through GitHub Pages. +- Students will publish a reading-notes, to highlight skills gained during the course. + +## Agenda + +1. Campus Orientation & Intros +1. Learning to Learn + - Growth mindset + - Demo & Lab +1. Web Publishing + - Markdown + - GitHub Pages + +See class slides and assignments for details. + +## New Vocabulary + +- Professional Competencies +- Proficiencies +- Canvas +- GitHub +- Slack +- Growth mindset +- Fixed mindset +- Repository +- Markdown +- Web publishing +- Path learning +- Sandbox learning diff --git a/class-01/lab/README.md b/class-01/lab/README.md new file mode 100644 index 0000000..6923d9f --- /dev/null +++ b/class-01/lab/README.md @@ -0,0 +1,31 @@ +# Create a reading-notes Repo + +Give yourself a learning challenge: Figure out how to publish a GitHub Pages web site, to use as a reading-notes. + +## Setup and Documentation + +Use these resources to get going: + +- [Growth Mindset](https://www.atlassian.com/blog/inside-atlassian/growth-mindset){:target="_blank"} +- [Markdown on GitHub](https://help.github.com/en/articles/basic-writing-and-formatting-syntax){:target="_blank"} +- [Getting Started with GitHub Pages](https://guides.github.com/features/pages/){:target="_blank"} + +## Requirements + +1. Your site should exist at `https://USERNAME.github.io/reading-notes/` +1. The "source" for your site should be a README.md file, written with Markdown +1. On the main page: + - Explain "growth mindset" in your own words + - Include 3 reminders to yourself of how to keep yourself in a growth mindset +1. Utilize at least 5 different features of Markdown to structure your page +1. Be sure to introduce yourself, and include a link to your GitHub portfolio page + +### Stretch Goals + +Beef up your profile page! Add an image, a bio, contact info... as much as you feel comfortable including. Remember, this page will act as a showcase of your developer skills, so make it look great! + +### Submission Instructions + +Share a link to your live site with your classmates, in the discussion below. + +Then, review the sites of your classmates, comment with what you learned from them. Click through to profile pages to "follow" each of your classmates. diff --git a/class-02/Choosing-A-Text-Editor--The-Older-Coder.pdf b/class-02/Choosing-A-Text-Editor--The-Older-Coder.pdf new file mode 100644 index 0000000..1a2cd42 Binary files /dev/null and b/class-02/Choosing-A-Text-Editor--The-Older-Coder.pdf differ diff --git a/class-02/DISCUSSION.md b/class-02/DISCUSSION.md new file mode 100644 index 0000000..6022538 --- /dev/null +++ b/class-02/DISCUSSION.md @@ -0,0 +1,48 @@ +# Reflection and Discussion + +Below is a collection of resources of varying types and lengths which describe the topics for the upcoming lecture. + +Go through these resources, and **create a page in your reading-notes repo** that summarizes what you learned as though you were presenting the material to a non-technical friend interested in learning about it. + +Reading-notes entry ideas: + +* Blog Article (2-3 paragraphs with code sample) +* Dictionary / Flash Cards +* Notes in outline form +* Comparison of "basic" text editor vs coding-specific text editor vs IDE. + +## Read + +* [Choosing a Text Editor](https://codefellows.github.io/code-102-guide/curriculum/class-02/Choosing-A-Text-Editor--The-Older-Coder.pdf){:target="_blank"} + +## Read Carefully + +The following pages will give you a step by step introduction to using a terminal. While it refers to Linux, the same commands are available in macOS and Windows (with WSL). Read through these pages carefully. ***Don't worry about trying this out on your own system yet, that will come very soon.*** For now, take notes on how commands are used, and which look similar to how you are used to using the GUI File Explorer/Finder. + +* [The Command Line](https://ryanstutorials.net/linuxtutorial/commandline.php){:target="_blank"} +* [Basic Navigation](https://ryanstutorials.net/linuxtutorial/navigation.php){:target="_blank"} +* [About Files](https://ryanstutorials.net/linuxtutorial/aboutfiles.php){:target="_blank"} + +## Answer + +1. What are four important features to look for in a text editor? +2. What do the following commands do? + 1. `pwd` + 2. `ls` + 3. `cd` + 4. `mkdir` + 5. `touch` +3. Can you explain what is happening in the following scenario if these commands and arguments are entered into the command line? (Arguments are extra instructions given to a command.) + 1. `cd projects` + 2. `mkdir new-project` + 3. `touch new-project/newfile.md` + 4. `cd ..` + 5. `ls projects/new-project` + + +## Submission Instructions + +* Share what you've learned by **copying and pasting the full text of your new rendered web page** into the 'Reply' below. +* Include the live URL of the new page below your pasted text. (*Hint: The URL of the page should begin with YOUR GitHub username, not "github.com"*) + +You are invited to check out your classmates' replies and give positive feedback and words of encouragement. diff --git a/class-02/README.md b/class-02/README.md new file mode 100644 index 0000000..ab2c2d5 --- /dev/null +++ b/class-02/README.md @@ -0,0 +1,35 @@ +# The Coder's Computer + +> The computer is a bicycle for the mind. +> +> —Steve Jobs + +## Learning Objectives + +- Students will configure their computers for professional software development, setting up a command line interface (Terminal) and installing VS Code, git, NodeJS, npm, and more. +- Students will be able to articulate the benefits of writing code in a code editor as opposed to general-purpose document creation software. +- Students will navigate folders and create files from the command line, while verifying their work in the operating system's GUI file explorer. + +## Class Agenda + +- Review of previous class + - Share your learning +- Developer Tools + - Text Editor + - Terminal +- Live Demos +- Discussion Exercise + - Operating Systems + - Abstraction +- Lab: Installfest and Configure + +See class slides and assignments for further details. + +## New Vocabulary + +- CLI (Command Line Interface) +- Terminal +- GUI (Graphical User Interface) +- IDE +- VS Code +- Abstraction diff --git a/class-02/lab/README.md b/class-02/lab/README.md new file mode 100644 index 0000000..b2d8cda --- /dev/null +++ b/class-02/lab/README.md @@ -0,0 +1,37 @@ +# Power Tools + +Having the right tool can make a "hard" thing suddenly much more achievable. Set yourself up for success by getting the right tools and starting to learn them. + +## Setup and Documentation + +Follow the [Computer Setup Guide](https://codefellows.github.io/setup-guide/){:target="_blank"} to prepare your development machine for serious coding. + +This requires carefully following instructions, and potentially interpreting esoteric error messages. Practice those detail-oriented skills! Take things slowly, and if things go wrong, don't hesitate to get help. + +## Requirements + +By the time you've completed the guide, you should be able to run the following commands in your terminal and have each report a version number of what's installed. + +- `code --version` +- `git --version` +- `node --version` +- `npm --version` +- `eslint --version` +- `tree --version` + +Furthermore, the following commands will show you how you have a few key items configured + +- `echo $PS1` +- `cat ~/.gitconfig` + +### Stretch Goals + +Now that you've got your spiffy Terminal up and running, go back through the Reading assignment, and follow along with your own version of the commands, on your computer. + +### Submission Instructions + +To verify that all of the above commands are working properly, run this command in your terminal: + +`curl -s https://raw.githubusercontent.com/codefellows/setup-guide/main/configs/verify.sh | bash` + +Copy and paste the results in the 'Reply' below. Help review your classmates' submissions to look for any potential errors. diff --git a/class-03/DISCUSSION.md b/class-03/DISCUSSION.md new file mode 100644 index 0000000..646d18f --- /dev/null +++ b/class-03/DISCUSSION.md @@ -0,0 +1,34 @@ +# Reflection and Discussion + +Below is a collection of resources of varying types and lengths which describe the topics for the lecture. + +Go through these resources, and **create a page in your reading-notes repo** that summarizes the topics you learned as though you were presenting the material to a non-technical friend interested in learning about it. + +Notes entry ideas: + +* Blog Article (2-3 paragraphs with code sample) +* Dictionary / Flash Cards +* Notes in outline form +* Fill-in-the-blank worksheet of key concepts + +## Read + +* [Git Intro](https://blog.udemy.com/git-tutorial-a-comprehensive-guide/){:target="_blank"} + * Read only up through the section called **"Seeing Your Remote"**. + * Feel free to skim the "Getting Started" instructions, do not follow along with that section for now. + + +## Answer + +1. What is Version Control? +2. What is `cloning` in Git? +3. What is the command to track and stage files? +4. What is the command to take a snapshot of your changed files? +5. What is the command to send your changed files to Github? + +## Submission Instructions + +* Share what you've learned by **copying and pasting the full text of your new rendered web page** into the 'Reply' below. +* Include the live URL of the new page below your pasted text. (*Hint: The URL of the page should begin with YOUR GitHub username, not "github.com"*) + +You are invited to check out your classmates' replies and give positive feedback and words of encouragement. diff --git a/class-03/README.md b/class-03/README.md new file mode 100644 index 0000000..006c1af --- /dev/null +++ b/class-03/README.md @@ -0,0 +1,32 @@ +# Revisions and the Cloud + +## Learning Objectives + +- Students will be able to create a new code repository in the cloud, and sync it to their local computer, using `git` commands in the terminal. +- Students will build the habit of using version control to share and backup code, by using small, frequent commits that clearly communicate about changes made. + +## Class Agenda + +- Review of previous class + - Share your learning +- Sharing Code + - Git + - GitHub +- Live Demos +- Discussion Exercise + - Git +- Lab: Revisions and the Cloud + +See class slides and assignments for further details. + +## New Vocabulary + +Listen carefully to lecture for the definitions of these terms. + +- VCS +- Git vs. GitHub +- local vs remote +- clone +- commit +- ACP +- deployment diff --git a/class-04/DISCUSSION.md b/class-04/DISCUSSION.md new file mode 100644 index 0000000..2aca4a8 --- /dev/null +++ b/class-04/DISCUSSION.md @@ -0,0 +1,43 @@ +# Reflection and Discussion + +Below is a collection of resources of varying types and lengths which describe the topics for the upcoming lecture. + +Go through these resources, and **add a new page to your reading-notes web site** that summarizes the topics you learned as though you were presenting the material to a non-technical friend interested in learning about it. + +From this point forward, all your reading-notes assignments should be done locally, in VS Code. New files and changes will reflect in GitHub using your new Git-flow skills! (Remember... A-C-P) + +## Read + +Let's crack open some HTML Resources. These pages are selected to be in this order for a very particular reason. + +* [Wireframe and Design](https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/){:target="_blank"} + * For Lab, you'll be building a site from scratch. + * Think about what kind of page you want to design. + * For now, focus mostly on the process. Take notes on the high-level process you'd want to follow to make a new site. + +* [Mozilla HTML Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics){:target="_blank"} + * If you've taken Code 101, this should be mostly review so skim. + * If you have NOT taken Code 101, please read this chapter a little more carefully. + +* [Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics){:target="_blank"} + * Note how these elements are common to the vast majority of web pages + +## Skim + +* [Mozilla HTML Docs](https://developer.mozilla.org/en-US/docs/Web/HTML){:target="_blank"} +* [Mozilla HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element){:target="_blank"} + +## Answer + +1. What is HTML and why do we use it? +2. What are the 3 main parts of an HTML element? +3. What is it called when you give an element extra information? +4. What is a semantic element? + + +## Submission Instructions + +* Share what you've learned by **copying and pasting the full text of your new rendered web page** into the 'Reply' below. +* Include the live URL of the new page below your pasted text. (*Hint: The URL of the page should begin with YOUR GitHub username, not "github.com"*) + +You are invited to check out your classmates' replies and give positive feedback and words of encouragement. diff --git a/class-04/README.md b/class-04/README.md new file mode 100644 index 0000000..4e2988f --- /dev/null +++ b/class-04/README.md @@ -0,0 +1,32 @@ +# Structure Web Pages with HTML + +## Learning Objectives + +- Students will be able to outline primary content areas of a web page to create a lo-fidelity wireframe on the whiteboard. +- Students will use semantic tags correctly to structure a basic web page. +- Students will start to see how HTML5 might be used to build common web sites they frequently use. +- Students will be introduced to the Live-Server extension in VS Code. + +## Class Agenda + +- Review of previous class + - Share your learning +- HTML + - Recap from Code 101 + - Discussion Exercise +- From Mockup to Markup + - Demo + - Lab: Wireframe and Build + +## New Vocabulary + +- HTML / Markup +- Semantics +- Wireframe +- Personas +- Meta +- Content +- Element +- Tag +- Attribute +- Structure vs Presentation diff --git a/class-04/lab/README.md b/class-04/lab/README.md new file mode 100644 index 0000000..aa002c8 --- /dev/null +++ b/class-04/lab/README.md @@ -0,0 +1,37 @@ +# HTML-Only Web Site from Scratch + +We now know that Markdown + GitHub Pages is powerful for creating quick sites! To embrace the next level of challenge, it's time we go back to crafting our web pages from scratch, by hand, line by line. + +## Setup and Documentation + +Review the web site creation process from your reading assignment. + +## Requirements + +Partner up. Decide on a topic for the web site you want to build. Each person will be responsible for 1 page of the site. + +1. Together, draw a single wireframe on a whiteboard, that can be used for all the pages of your site. + - Keep it at low-fidelity. + - Identify the general content areas. + - Think carefully! This is what you are going to code up in markup. +1. Apply html to the structure + - Discuss with your partner what html tags should be used for each part of your wireframe. + - Think carefully about how the html elements will be nested. +1. Choose your verbiage + - Write out the key content to fill in each page's content areas of the wireframe. + - You don't need full sentences, but at least a plan for each area of each page. +1. Have your instructor review your wireframe and html plan. +1. Write the code! + - Each partner creates their own repository to work from. How do we get a new repository on our local computer? + - Each partner codes their own `index.html` file, matching the wireframe. + - **From this point forward, all your work should be done locally, in VS Code. New files and changes will reflect in GitHub using your new Git-flow skills! (Remember... A-C-P)** + - Each partner should end up with their own `index.html` file containing basically the same html tags, in the same order, but with different content within the tags. + - Link up the pages so a user can navigate to both pages. + +### Stretch Goals + +Utilize some html tags you've never used before. + +### Submission Instructions + +Submit your live url after deploying your site with GitHub pages. Check out what other people built, as well. diff --git a/class-05/DISCUSSION.md b/class-05/DISCUSSION.md new file mode 100644 index 0000000..83c26a8 --- /dev/null +++ b/class-05/DISCUSSION.md @@ -0,0 +1,34 @@ +# Reflection and Discussion + +Below is a collection of resources of varying types and lengths which describe the topics for the upcoming lecture. + +Go through these resources, and **add a new page to your reading-notes web site** that summarizes the topics you learned as though you were presenting the material to a non-technical friend interested in learning about it. + +Reminder: *all your reading-notes assignments should be done locally, in VS Code. New files and changes will reflect in GitHub using your new Git-flow skills! (Remember... A-C-P)* + +## Read + +* [What is CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS){:target="_blank"} + +## Read and Experiment + +* [How to Add CSS](https://www.w3schools.com/css/css_howto.asp){:target="_blank"} +* [CSS Color](https://www.w3schools.com/cssref/pr_text_color.asp){:target="_blank"} + +## Skim + +* [CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference){:target="_blank"} +* [Myers Web Reset Stylesheet](https://meyerweb.com/eric/tools/css/reset/){:target="_blank"} + +## Answer + +1. What is the purpose of CSS? +2. What are the three ways to insert CSS into your project? +3. Write an example of a CSS rule that would give all `
` elements red text. + +## Submission Instructions + +* Share what you've learned by **copying and pasting the full text of your new rendered web page** into the 'Reply' below. +* Include the live URL of the new page below your pasted text. (*Hint: The URL of the page should begin with YOUR GitHub username, not "github.com"*) + +You are invited to check out your classmates' replies and give positive feedback and words of encouragement. diff --git a/class-05/README.md b/class-05/README.md new file mode 100644 index 0000000..aebf3b4 --- /dev/null +++ b/class-05/README.md @@ -0,0 +1,30 @@ +# Style Web Pages with CSS + +## Learning Objectives + +- Students will understand the role of CSS in creating a complete web page. +- Students will know how to use a tool to generate a reasonable color theme to apply to a web site design. +- Students will apply colors to a wireframe to bring out the vibrancy of a web page, controlling text color, background color, and box-model colors. + +## Class Agenda + +- Review of previous class + - Share your learning +- CSS + - Recap from Code 101 + - Discussion Exercise +- From Mockup to Markup + - Demo + - Lab: Wireframe and Build + +## New Vocabulary + +- CSS +- RGB +- HSL +- Hex codes +- Layout +- Rule +- Selector +- Property & value +- Curly braces diff --git a/class-05/lab/README.md b/class-05/lab/README.md new file mode 100644 index 0000000..df01ded --- /dev/null +++ b/class-05/lab/README.md @@ -0,0 +1,19 @@ +# Hand-Rolled CSS + +Team up with your partner and add some styles to the structure you built from the wireframe. + +## Setup and Documentation + +Start by going back to the whiteboard. Recreate your wireframe, and work with your partner to identify what styles you can apply. + +Utilize coordinated colors from a color-scheme web site like [Adobe's](https://color.adobe.com/create/color-wheel){:target="_blank"}. Label your wireframe with what colors go where. + +Now is a good time to develop your Google-fu. As you identify specific things you'd like to accomplish in your design, see if you can craft a google search that brings you the answer. Implement what you find, to practice writing CSS. + +### Stretch Goals + +Try using a few different methods of specifying your colors: Hex codes (3 or 6 digits), rgb(), hsl()... Are there any places you can tastefully tweak the opacity? + +### Submission Instructions + +Share your site url once again, so people can compare the before and the after. As you check out the work others did, try guessing at which tags are where! diff --git a/class-06/DISCUSSION.md b/class-06/DISCUSSION.md new file mode 100644 index 0000000..72e455d --- /dev/null +++ b/class-06/DISCUSSION.md @@ -0,0 +1,40 @@ +# Reflection and Discussion + +Below is a collection of resources of varying types and lengths which describe the topics for the upcoming lecture. + +Go through these resources, and **create a page in your reading-notes repo** that summarizes the topics you learned as though you were presenting the material to a non-technical friend interested in learning about it. + +Reminder: *all your reading-notes assignments should be done locally, in VS Code. New files and changes will reflect in GitHub using your new Git-flow skills! (Remember... A-C-P)* + +## Read + +- [JS Intro Paragraph](https://developer.mozilla.org/en-US/docs/Web/JavaScript){:target="_blank"} +- [Introduction to JavaScript - basic output](https://code-maven.com/introduction-to-javascript){:target="_blank"} +- [JavaScript input with prompt and confirm](https://code-maven.com/javascript-input-with-prompt-and-confirm){:target="_blank"} + + +## Read and Demo + +- [Variables](https://www.w3schools.com/js/js_variables.asp){:target="_blank"} + +## Bookmark + +Check out these great explainer videos, in order. In less than 30 minutes, you'll gain new insights into how computers are actually working! Watch all 6 videos, and create your reading-notes page based on your top 3 most significant readings. + +* [How Computers Work - Playlist](https://www.youtube.com/playlist?list=PLzdnOPI1iJNcsRwJhvksEo1tJqjIqWbN-){:target="_blank"} + +Sincere thanks to Code.org for producing these videos. + +## Answer + +1. What are variables in JavaScript? +2. What does it mean to `declare` a variable? +3. What is an "assignment" operator, and what does it do? +4. What is information received from the user called? + +## Submission Instructions + +* Share what you've learned by **copying and pasting the full text of your new rendered web page** into the 'Reply' below. +* Include the live URL of the new page below your pasted text. (*Hint: The URL of the page should begin with YOUR GitHub username, not "github.com"*) + +You are invited to check out your classmates' replies and give positive feedback and words of encouragement. diff --git a/class-06/README.md b/class-06/README.md new file mode 100644 index 0000000..e8dfc9e --- /dev/null +++ b/class-06/README.md @@ -0,0 +1,25 @@ +# Dynamic Web Pages with JavaScript + +## Learning Objectives + +- Students will incorporate JavaScript into a web page to create dynamic content that responds to input. +- Students will replicate code that uses logical branching and basic conditionals to determine the outcome of content on a web page. + +## Class Agenda + +- Review of previous class + - Share your learning +- JavaScript + - Recap from Code 101 + - Discussion Exercise +- From Mockup to Markup + - Demo: Input and Output + - Lab: Plan and Build + +## New Vocabulary + +- JavaScript +- conditionals +- operators +- data types +- variable diff --git a/class-06/lab/README.md b/class-06/lab/README.md new file mode 100644 index 0000000..dcb260f --- /dev/null +++ b/class-06/lab/README.md @@ -0,0 +1,23 @@ +# Dynamic Pages with JavaScript + +## Setup and Documentation + +Review your page's wireframe. Look at the content, and select a few places where you could add in something dynamic. + +## Requirements + +Add at least 3 dynamic components to your web page. These can be based on user input, or other dynamic input data. + +At least one dynamic component should be based on user input. + +At least one dynamic component should use a conditional statement to determine the output. + +### Stretch Goals + +Try out the `confirm()` function, in addition to `prompt()`. When's the right time to use this? + +If the user gives you a color, can you set a part of your page to be that color? + +### Submission Instructions + +Deploy your dynamic web page, and share the public URL here. Check out what your classmates made as well! diff --git a/class-07/.eslintrc.json b/class-07/.eslintrc.json new file mode 100644 index 0000000..8cdbc30 --- /dev/null +++ b/class-07/.eslintrc.json @@ -0,0 +1,40 @@ +{ + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 6, + "ecmaFeatures": { + "impliedStrict": true + } + }, + "env": { + "browser": true, + "es6": true, + "node": true + }, + "rules": { + "no-var": "error", + "eqeqeq": ["error", "always"], + "no-console": "off", + "no-undefined": "off", + "indent": ["error", 2], + "quotes": ["warn", "single"], + "no-multi-spaces": [ + "warn", + { + "exceptions": { + "VariableDeclarator": true + } + } + ], + "no-trailing-spaces": "warn", + "new-cap": "warn", + "no-redeclare": [ + "error", + { + "builtinGlobals": true + } + ], + "semi": [2, "always"], + "eol-last": "error" + } +} diff --git a/class-07/.gitignore b/class-07/.gitignore new file mode 100644 index 0000000..5f54bc6 --- /dev/null +++ b/class-07/.gitignore @@ -0,0 +1,155 @@ + +# Created by https://www.gitignore.io/api/node,linux,macos,windows,visualstudiocode + +### Linux ### +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +### macOS ### +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless + +### VisualStudioCode ### +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +### Windows ### +# Windows thumbnail cache files +Thumbs.db +ehthumbs.db +ehthumbs_vista.db + +# Dump file +*.stackdump + +# Folder config file +[Dd]esktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msix +*.msm +*.msp + +# Windows shortcuts +*.lnk + + +# End of https://www.gitignore.io/api/node,linux,macos,windows,visualstudiocode \ No newline at end of file diff --git a/class-07/.markdownlint.json b/class-07/.markdownlint.json new file mode 100644 index 0000000..7eb9a29 --- /dev/null +++ b/class-07/.markdownlint.json @@ -0,0 +1,14 @@ +{ + "line-length": false, + "no-trailing-punctuation": false, + "no-inline-html": { + "allowed_elements": [ + "dl", + "dt", + "dd", + "summary", + "detail", + "img" + ] + } +} diff --git a/class-07/DISCUSSION.md b/class-07/DISCUSSION.md new file mode 100644 index 0000000..df7fe3f --- /dev/null +++ b/class-07/DISCUSSION.md @@ -0,0 +1,35 @@ +# Reflection and Discussion + +Below is a collection of resources of varying types and lengths which describe the topics for the upcoming lecture. + +Go through these resources, and **create a page in your reading-notes repo** that summarizes the topics you learned as though you were presenting the material to a non-technical friend interested in learning about it. + +Reminder: *all your reading-notes assignments should be done locally, in VS Code. New files and changes will reflect in GitHub using your new Git-flow skills! (Remember... A-C-P)* + +## Read + +* [MDN Control Flow](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow){:target="_blank"} + +## Read and Demo + +* [Functions](https://www.w3schools.com/js/js_functions.asp){:target="_blank"} +* [Operators](https://www.w3schools.com/js/js_operators.asp){:target="_blank"} + +## Skim + +* [Expressions and Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators){:target="_blank"} +* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions){:target="_blank"} + +## Answer + +1. What is `control flow`? +2. What is a JavaScript `function`? +3. What does it mean to `invoke` - or `call` - a function? +4. What are the parenthesis `()` for when you define a function? + +## Submission Instructions + +* Share what you've learned by **copying and pasting the full text of your new rendered web page** into the 'Reply' below. +* Include the live URL of the new page below your pasted text. (*Hint: The URL of the page should begin with YOUR GitHub username, not "github.com"*) + +You are invited to check out your classmates' replies and give positive feedback and words of encouragement. diff --git a/class-07/README.md b/class-07/README.md new file mode 100644 index 0000000..7585b21 --- /dev/null +++ b/class-07/README.md @@ -0,0 +1,31 @@ +# Programming with JavaScript + +## Learning Objectives + +- Students will be able to create a script as a sequence of steps, executable by the computer, to achieve a stated goal. +- Students will encapsulate code in functions, modeling steps in a process. +- Students will apply new techniques to existing code, increasing code clarity, without losing any functionality. + +## Class Agenda + +- Review of previous class + - Share your learning +- Programming - Input/Process/Output + - Robot Exercise + - Discussion Reading +- Demo With JavaScript Functions + - Lab: Refactoring + +## New Vocabulary + +- Script +- Programmatic problem solving +- Expression +- Operator +- Function + - Declaration + - Call + - Parameters + - Arguments + - Return value +- Refactoring diff --git a/class-07/lab/README.md b/class-07/lab/README.md new file mode 100644 index 0000000..acc0009 --- /dev/null +++ b/class-07/lab/README.md @@ -0,0 +1,23 @@ +# Refactoring with JS Functions + +## Setup and Documentation + +Start with your existing code. Ensure it's all working as expected. + +## Requirements + +Use functions to improve the clarity and readability of your code. + +Wrap related steps into a single function. Be sure you are properly defining the function, calling it, and getting the return value you expect. + +Can you see how you might use just a single `