`?
11 | * When should you use `id` vs `class`?
12 | * What are good situations for breaking out styles into multiple classes?
13 | * How can you use margins for alignment?
14 |
15 | ### Assignment
16 |
17 |
18 | 1. Do the exercises for [Learning CSS Layouts at LearnLayout](http://learnlayout.com/)
19 |
20 |
21 | ### Additional Resources
22 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
23 |
24 | * [CSS Style Guide](http://codeguide.co/#css) by [Mark Otto](https://github.com/mdo), one of the creators of Bootstrap.
25 | * [CSS Reference](http://cssreference.io/), a visual guide to CSS, by [Jeremy Thomas](https://github.com/jgthms).
26 | * Add some!
27 |
--------------------------------------------------------------------------------
/archive/html_css/box_model.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | To do CSS correctly, you need to have a model in your head for how everything fits together on the page. Otherwise, you're just randomly guessing and checking what works to move things around. The Box Model is that model. It defines how every element on the page gets placed and how they relate to each other.
3 |
4 | You can't be shaky on how it works if you want to be efficient with your work flow. So take the time to really nail down your mental model for how elements interact with each other on the page.
5 |
6 | ### Learning Outcomes
7 |
8 | * What's the difference between margin and padding?
9 | * How do borders affect the size of the box?
10 | * How can margins be used to center an element horizontally on the page?
11 | * What does it mean that "margins are collapsed"?
12 | * What is the difference between `block`, `inline-block` and `inline` elements when thinking about the box model?
13 | * When are you required to specify the width of an element vs letting the browser figure it out for you?
14 | * How do box shadows affect element box sizing?
15 | * How can you check an element's box model in your developer tools (it's a helpful graphic)?
16 |
17 | ### Assignment
18 |
19 |
20 | 1. Read the [CSS Box Model from Shaye Howe (gets into floats and positioning a bit too)](http://learn.shayhowe.com/html-css/box-model)
21 | 2. Read [The CSS Box Model from CSS-Tricks](http://css-tricks.com/the-css-box-model/)
22 |
23 |
24 | ### Additional Resources
25 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
26 |
27 | * [CSS Box Model Docs](http://www.w3schools.com/css/css_boxmodel.asp)
28 |
--------------------------------------------------------------------------------
/archive/html_css/conclusion.md:
--------------------------------------------------------------------------------
1 | HTML and CSS are actually surprisingly large topics, who would have thought? If you've made it this far, though, you're more than well on your way to front end development magic. You should be significantly more comfortable breaking down a webpage into its component pieces and then coding them with HTML and CSS. You have the tools necessary to identify an effective visual layout and then bring it to fruition.
2 |
3 | There are still plenty of ways you can make your workflow better or improve your knowledge of best practices (so don't stop learning!), but you've got everything you need to build beautiful websites.
4 |
5 | Onwaaaaaaard!!!
6 |
7 | ### Additional Resources
8 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
9 |
10 | * [Web Fundamentals](https://developers.google.com/web/fundamentals/)... tons of links to articles specific to your goals.
11 | * [Shay Howe's Beginner's Guide to HTML and CSS](http://learn.shayhowe.com/html-css/)
12 | * [HTML5 Tutorial](http://www.html-5-tutorial.com/start-html5-tutorial.htm)
13 | * [Responsive Prototyping with Foundation](http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation)
14 | * [Equal Height Columns in CSS from Smashing Magazine](http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/)
15 | * [HTML tutorials and help docs](http://www.webplatform.org/)
16 | * [Awwwards is a great place to go for design inspiration](http://www.awwwards.com/)
17 | * [Figma is a vector graphics editor and prototyping tool](https://www.figma.com/) [Click here for a tutorial](https://www.youtube.com/watch?v=3q3FV65ZrUs)
18 | * PS.. "tags" don't really exist, they're always technically called "elements"
19 |
--------------------------------------------------------------------------------
/archive/html_css/css_grids.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Grids are another extension of the design world. There's just something much more pleasing about navigating through a site that properly uses a grid to lay out the content than one which has ignored all the C.R.A.P principles and put things in place willy-nilly.
3 |
4 | In this section, you'll get a look at how to use CSS to lay out the elements of your page using a grid.
5 |
6 | ### Learning Outcomes
7 |
8 | * Why are grids effective for helping site layout?
9 | * What are the major different types of grids in use today?
10 | * How could you design your own grid (on paper)?
11 | * How can you implement your own grid in CSS?
12 |
13 | ### Assignment
14 |
15 |
16 | 1. Read [Basic Grids from CSS-Tricks](http://css-tricks.com/dont-overthink-it-grids/).
17 | 2. Read [Fluid Grids from A List Apart](http://alistapart.com/article/fluidgrids).
18 | 3. Read through the [Responsive Grid with Media Queries Tutorial from TutsPlus](http://webdesign.tutsplus.com/tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter--webdesign-5121). You don't need to actually build it, but feel free to.
19 | 4. Glance through [Unsemantic](https://unsemantic.com), which is a fluid grid system which can be really useful for building layouts. They have demos that you can take a look at. Just look through the site; we'll be covering the Bootstrap and Foundation grid systems later.
20 |
21 |
22 | ### Additional Resources
23 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
24 |
25 | * [Supplemental reading on the history of grids and why they're awesome](https://web.archive.org/web/20130906170258/http://www.subtraction.com/pics/0703/grids_are_good.pdf)
26 | * [Getting images to display fluidly in fluid grids, from A List Apart](http://alistapart.com/article/fluid-images)
27 | * [CSS Grids Lessons](https://hackdesign.org/lessons/32)
28 |
--------------------------------------------------------------------------------
/archive/html_css/html5_basics.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Most of this should be review since you've already completed the [HTML and CSS Foundations courses](/courses/foundations#html-foundations) (Right??) but it's a good idea to make sure you've got it covered so you make sure you're starting from a strong base. It's impossible to separate HTML from CSS, so there will be some overlap before we get heavily into the CSS in later sections.
4 |
5 | ### Learning Outcomes
6 |
7 | * How is an HTML5 document structured?
8 | * What are elements/tags?
9 | * What are element attributes?
10 | * How do you link to external files?
11 | * When should you use IDs vs Classes?
12 | * What attributes are required by image and links for them to be effective and accessible?
13 | * Where should your CSS live?
14 |
15 | ### Assignment
16 |
17 |
18 | 1. Read [Shay Howe's Introduction to Terminology & Syntax](http://learn.shayhowe.com/html-css/terminology-syntax-intro)
19 | 2. Read [Shay Howe on the HTML Basics](http://learn.shayhowe.com/html-css/elements-semantics)
20 | 3. Read [Shay Howe on Best Practices](http://learn.shayhowe.com/html-css/coding-practices)
21 |
22 |
23 | ### Additional Resources
24 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
25 |
26 | * [WTFHTMLCSS with basic tips to improve your code](http://wtfhtmlcss.com/)
27 | * [W3C HTML5 tutorial ](http://www.w3schools.com/html/default.asp)
28 | * [HTML Style Guide](http://codeguide.co/#html) by [Mark Otto](https://github.com/mdo), one of the creators of Bootstrap.
29 | * [CrashCourse Introduction to HTML&CSS](https://www.youtube.com/watch?v=QA0XpGhiz5w)
30 | * Add Some!
31 |
--------------------------------------------------------------------------------
/archive/html_css/html_forms.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Forms are one of the most important parts of your site. They are your user's gateway into your back end -- the user provides data in a form and you do stuff with it. Hopefully you've been through the [Rails Course](/courses/ruby-on-rails) and this is all review, but if not make sure to pay attention!
4 |
5 | Forms are important to get right not just because you want the correct data getting sent to your back end but also because you want the experience of interacting with the form to be as dead-stupid-simple as humanly possible so you don't lose users while they are doing it. You need to specify the proper types of inputs for each possible data item, since there are often multiple ways to collect a piece of data but only one way which is easiest for your user and eliminates the chances of that user inputting erroneous data.
6 |
7 | ### Learning Outcomes
8 |
9 | * Why are forms probably the most important part of your site?
10 | * How do you construct a basic form?
11 | * How do you specify which path the form gets submitted to?
12 | * When would you want to submit using `GET` vs `POST` requests?
13 | * What are all the possible form element types?
14 | * When should you use checkboxes instead of radio buttons?
15 | * When should you use a combobox/dropdown instead of a text field?
16 | * How do you make a very large text field?
17 | * How do you link elements with their labels?
18 | * How do you link element selections together (e.g. check boxes) so they are nicely formatted when your server receives them?
19 | * What should your "submit" button probably say instead of "submit"?
20 |
21 | ### Assignment
22 |
23 |
24 | 1. Read [Shay Howe on Forms](http://learn.shayhowe.com/html-css/building-forms)
25 | 2. Browse through [Form Basics from MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form) to see if you've missed anything.
26 |
27 |
28 | ### Additional Resources
29 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
30 |
31 | * [HTML Forms Docs](http://www.w3schools.com/html/html_forms.asp)
32 |
--------------------------------------------------------------------------------
/archive/html_css/layout_lesson_template.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Introduction to the topic. When it was introduced, the problems it was created to address
3 |
4 |
5 | ### Learning Outcomes
6 | List any learning outcomes here in bullet point format. Knowledge the student should have a better understanding of once they have read through the assignments.
7 |
8 |
9 | ### Overview
10 | Current browser support and a link where they can check further on the support.
11 | Why use this over other positioning layout options.
12 | Common gotchas to be aware of.
13 | Any limitations to the layout?
14 |
15 |
16 | ### Assignment
17 | List of up to 3 reading resources that cover the learning outcomes
18 |
19 |
20 | ### Additional Resources
21 | Any additional resources worth reading.
--------------------------------------------------------------------------------
/archive/html_css/links.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Links are the glue holding the web together, so make sure you understand how to properly link to external websites AND internal files.
4 |
5 | ### Learning Outcomes
6 |
7 | * What's the difference between internal links (/somepage) and external links (http://www.somesite.com/somepage)?
8 | * When on a webpage should you use the full URI (with the `http://yoursite.com/somepath`) and when should you use the relative path (`/somepath`)?
9 | * How do you navigate the document tree with links (../../someotherpage)?
10 | * How do you open links in external windows?
11 | * What are all the possible pseudo-states (e.g. `:hover`) of a link and when are they actually activated? How do you change styles based on them?
12 |
13 | ### Assignment
14 |
15 |
16 | 1. Read [Lena Shore's explanation of the difference between absolute and relative paths](http://www.lenashore.com/2011/12/the-difference-between-absolute-and-relative-paths/).
17 | 2. Read [CoffeeCup's Absolute vs. Relative Paths/Links](https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/).
18 | 3. Read [Six Revisions' article on link pseudo-classes](http://sixrevisions.com/css/link-pseudo-classes/) .
19 |
20 |
21 | ### Additional Resources
22 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
23 |
24 | * Glance over [About.com's article on linking](http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm) if you need any additional support
25 |
--------------------------------------------------------------------------------
/archive/html_css/lists.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Ordered and unordered lists are heavily used in most websites. It's not just for bullet-points and numbers... they are also used in creating horizontal navbars and long collections of objects (like a list of pictures of items for sale). They often take the place of tables as the method of choice for displaying structured content.
3 |
4 | ### Learning Outcomes
5 |
6 | * What is the basic list syntax?
7 | * How do you nest lists inside each other?
8 |
9 | ### Assignment
10 |
11 |
12 | 1. Read [Shay Howe on Lists (including CSS)](http://learn.shayhowe.com/html-css/ordered-unordered-definition-lists)
13 | 2. Browse [HTMLGoodies' rapid fire guide to different list types](http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479461)
14 | 3. Glance over the [HTML docs on lists](http://www.w3schools.com/html/html_lists.asp)... you'll probably see them again when you're Googling for a problem!
15 |
16 |
17 | ### Additional Resources
18 | This section contains helpful links to other content. It isn’t required, so consider it supplemental.
19 |
20 | * [Another great explanation of lists in HTML](https://html.com/lists/)
21 | * *Add Some!*
22 |
--------------------------------------------------------------------------------
/archive/html_css/new_html5.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | HTML5 brought in a lot of nice new features, many geared specifically towards giving webpages the ability to display media and interactive features more easily. The downside is that there are still browser compatibility issues with some of that functionality, but that will get sorted over time. Another set of new features is the use of more semantic tags in your markup so you don't need to put a `div` around everything (you can use the `aside` or `footer` etc).
4 |
5 | ### Learning Outcomes
6 |
7 | * What are semantic tags and how are there more of them in HTML5?
8 | * What does the canvas element do for you?
9 | * Seriously, why is canvas potentially amazing?
10 | * What are the new video control features?
11 | * What are the new audio control features?
12 | * What is local storage and how is it used?
13 | * What are data attributes and how are they used?
14 | * For people who have already done Rails and maybe some JS, how can data attributes be used to pass off data from your back end to your front end?
15 | * What are the compatibility trade-offs of the new features?
16 | * Are there any performance trade-offs with the new features?
17 | * How does HTML5 fix the problem of needing Flash installed to play movies on many devices?
18 |
19 | ### Assignment
20 |
21 |
22 | 1. Check out [Dive into HTML5](http://diveintohtml5.it/), which is a website and book on the cool stuff about HTML5.
23 | 2. Look over [What are new features introduced in HTML5?](https://developer-interview.com/p/html-css/what-are-new-features-introduced-in-html5-57)
24 |
25 |
26 | ### Additional Resources
27 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
28 |
29 | * [HTML5 - New Tags (Elements) from tutorialspoint](https://www.tutorialspoint.com/html5/html5_new_tags.htm)
30 | * [28 must-know HTML5 tips and techniques from tutsplus](https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520)
31 | * [Testing compliance of various tags in HTML5 with CanIUse?](http://caniuse.com)
32 |
--------------------------------------------------------------------------------
/archive/html_css/preprocessors.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Preprocessors (aka precompilers) can make your life much easier by eliminating code repetition and providing all sorts of yummy time-saving and code-saving features. If you've been using Rails, you'll be familiar with SASS already since it's baked in. If you're not using Rails, you may need to add some additional steps to your workflow to get your preprocessor set up but it's worth it.
3 |
4 | ### Learning Outcomes
5 |
6 | * What is a preprocessor?
7 | * Why do preprocessors rock?
8 | * What does it mean that a preprocessor "compiles to CSS"?
9 | * What is SASS/SCSS?
10 | * How can you use SASS to nest CSS?
11 | * How can you use SASS to work with variables in your code?
12 | * Why is it awesome to use mix-ins with SASS?
13 | * If you're not using Rails, how do you set up SASS?
14 | * What is LESS and how is it different from SASS?
15 | * What other preprocessors are out there?
16 |
17 | ### Assignment
18 |
19 |
20 | 1. Read [Introduction to CSS Preprocessors from Steven Bradley](http://www.vanseodesign.com/css/css-preprocessors/)
21 | 2. Read [6 Reasons You Should Use a Preprocessor](https://raygun.com/blog/6-reasons-you-should-use-a-css-preprocessor/)
22 | 3. Read [Choosing the Right CSS Preprocessor from Treehouse](http://blog.teamtreehouse.com/how-to-choose-the-right-css-preprocessor)
23 | 4. Look over [SASS's getting started guide, which provides a brief look at its awesome features](http://sass-lang.com/guide)
24 | 5. [A List Apart walks through specifically how you should be using SASS (lots of best practices in there)](http://alistapart.com/article/getting-started-with-sass) so read up and enjoy!
25 |
26 |
27 | ### Additional Resources
28 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
29 |
30 | * [SASS's main website](http://sass-lang.com/)
31 | * [LESS's main website](http://www.lesscss.org/)
32 |
--------------------------------------------------------------------------------
/archive/html_css/project_backgrounds.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | In this project you'll clone the website of one of the most design-forward companies in the world. It's not a very complex site but it uses background photos well and the navbar at the top contains a gradient that you should be able to mimic.
4 |
5 | ### Assignment
6 |
7 |
18 |
19 | ### Additional Resources
20 |
21 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
22 |
23 | * Add some!
24 |
--------------------------------------------------------------------------------
/archive/html_css/project_bootstrap.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | In this project, you'll get a chance to try out Twitter's Bootstrap framework by building a site that actually uses it -- [Newsweek](http://www.newsweek.com/).
3 |
4 | ### Assignment
5 | Note: As usual, ignore any ads, icons, and interactive elements (which use Javascript). If you really want to grab icons, try taking a screenshot of them and making an image file out of that.
6 |
7 |
8 | 1. Go to [newsweek.com](http://www.newsweek.com) and have a look around.
9 | 2. Follow the instructions atop the [Recipes project](/courses/foundations/lessons/recipes) to set up a GitHub repository for this project (of course you'll need to change the title).
10 | 3. Create a new HTML document.
11 | 4. Think about all the elements on the page and how they are grouped together.
12 | 5. Add Bootstrap to your project by following the instructions at [GetBootstrap.com](http://getbootstrap.com/getting-started/). Use the examples on that page as templates for how to organize your page.
13 | 5. Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and which are positioned by using the appropriate Bootstrap classes.
14 | 6. Set up the top title and navigation bar.
15 | 6. Work your way down the page by filling in and positioning the additional sections.
16 | 7. Try resizing the browser to see if it mimics the behavior of the real Newsweek homepage.
17 | 7. Push your solution to GitHub.
18 |
19 |
20 | ### Additional Resources
21 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
22 |
23 | * This [article by Adam Wathan](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) provides a good perspective regarding separation of concerns when it comes to CSS frameworks.
24 |
--------------------------------------------------------------------------------
/archive/html_css/project_css_frameworks.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | In this final project, you'll get to take everything you've learned and use it to build your own simple grid-based framework. As with the other final projects, we'll keep it relatively open-ended to give you a chance to exercise your creativity and problem-solving skills. It will be a great project to show off to potential employers as well.
4 |
5 | Once you're done setting up your framework, you will use it to clone any website you like. If you're out of ideas, try cloning The Odin Project!
6 |
7 | ### Assignment
8 | You'll be creating your own grid-based framework.
9 |
10 |
11 | 1. Follow the instructions atop the [Recipes project](/courses/foundations/lessons/recipes) to set up a GitHub repository for this project (of course you'll need to change the title).
12 | 2. Create a new CSS document.
13 | 3. Think about the major elements that are required of a framework. This includes a CSS reset, a fixed number of grids separated by "gutters", a way to make new rows, and default values for the font properties of elements.
14 | 4. Write the CSS necessary to create a basic 12-column grid framework. Check out the [960 Grid System documentation](http://960.gs) for a look at how they do it. The complexity is up to you -- there's no need to go too crazy with details (you're not trying to rebuild Bootstrap).
15 | 5. Push your framework to GitHub.
16 |
17 | #### Applying the Framework
18 |
19 | 1. Create a new HTML document and a new GitHub repository.
20 | 2. Identify the webpage you'd like to clone and break it down into its major elements like we have in the previous projects.
21 | 3. Add your framework to your project.
22 | 4. Use your framework to lay out the structure of the page.
23 | 5. Fill in the necessary details/images etc.
24 | 6. Push your solution to GitHub.
25 | 7. Have a frosty beverage, you're done with the HTML/CSS projects!
26 |
27 |
28 | ### Additional Resources
29 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
30 |
31 | * Add some!
32 |
--------------------------------------------------------------------------------
/archive/html_css/project_html_forms.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | In this project, you'll get a chance to rebuild the form used by [Mint.com](http://www.mint.com) for signing up new users. They have been highly praised for the design and simplicity of their site, and their signup process is very clean. If the link isn't working for you, an alternative form to rebuild is by [Mailchimp.com](https://login.mailchimp.com/signup/).
3 |
4 | The page is very straightforward, so you should be able to clone it even if your CSS skills aren't perfect. As usual, don't worry about any of the dynamic functionality on the page or finding the specific icons they use or having the form actually submit. The point is to make it *look* like the real page as much as you reasonably can.
5 |
6 | ### Assignment
7 |
8 | 1. Go to [Mint.com's signup page](https://wwws.mint.com/login.event?task=S) and have a look around. The form isn't exceptionally complicated.
9 | 2. Follow the instructions atop the [Recipes project](/courses/foundations/lessons/recipes) to set up a GitHub repository for this project (of course you'll need to change the title).
10 | 3. Create a blank HTML document.
11 | 4. Plan out how the elements on the page need to be grouped together.
12 | 5. Lay out the empty semantic HTML elements for the major sections (form, sidebar, footer...) and make them the proper size and alignment. It may be helpful to change their background colors while you're positioning them on the page. Don't forget to use your browser's developer tools (right click on the page, click "inspect element")!
13 | 6. Fill in those elements with the content you want to include.
14 | 7. Now style them to look like the real webpage.
15 | 8. Push your solution up to GitHub and you're good to go!
16 |
17 |
18 | ### Additional Resources
19 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
20 |
--------------------------------------------------------------------------------
/archive/html_css/responsive_design.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Responsive design is creating websites that respond to the user's context, whether that is the device they are viewing on, the size of their browser, or their accessibility needs. Lucky for you, there are lots of good tools that help you easily start making websites responsive. It's not rocket science to do a pretty good job at a responsive site, though it's a lot more work to get one that really nails it.
3 |
4 | ### Learning Outcomes
5 |
6 | * What is responsive design?
7 | * Why is responsive design important to your users?
8 | * How do you make a "fluid" layout?
9 | * What are Media Queries?
10 | * How do you use media queries to make your website responsive?
11 |
12 | ### Assignment
13 |
14 |
15 | 1. Read [A List Apart's comprehensive introduction to responsive design](http://alistapart.com/article/responsive-web-design)
16 | 2. Read over the [Responsive Web Tutorial from Lingulo](https://web.archive.org/web/20200401203302/https://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch), though you don't have to build it.
17 |
18 |
19 | ### Additional Resources
20 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
21 |
22 | * [Responsive Grids Tutorial from TutsPlus](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/)
23 | * [Responsive Navigation Patterns from Brad Frost](https://bradfrost.com/blog/post/responsive-nav-patterns/)
24 | * [Techniques for Gracefully Degrading Media Queries](http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/)
25 | * [Best Practices of Responsive Web Design](https://medium.com/level-up-web/best-practices-of-responsive-web-design-6da8578f65c4)
26 | * [An approach to Responsive design by Kevin Powell](https://www.youtube.com/watch?v=0ohtVzCSHqs)
27 |
--------------------------------------------------------------------------------
/archive/html_css/stylings.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | CSS3 offers a whole lot of interesting functionality that you didn't know about but will really help you make your sites into something special. Just be conscious of browser compatibility issues -- some of these aren't available on older browsers.
3 |
4 | ### Learning Outcomes
5 |
6 | * How do you round corners of a box?
7 | * How do you add a shadow to a box?
8 | * How do you rotate an element a specified amount?
9 | * What interesting animations can you use in CSS3?
10 | * What are pseudo-elements and what are they useful for?
11 |
12 | ### Assignment
13 |
14 | 1. Read about [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), stop at the Javascript section.
15 | 2. Peruse through these [CSS Animated Loading Icons](http://tobiasahlin.com/spinkit/) for some animation inspiration.
16 | 3. Glance at [canIuse](http://caniuse.com/), a compatibility table for various elements in CSS and HTML5.
17 |
18 |
19 | ### Additional Resources
20 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
21 |
22 | * [W3Schools on Border Radius](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)
23 | * [W3Schools on Box Shadow](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp)
24 | * [W3Schools on Transforms](https://www.w3schools.com/cssref/css3_pr_transform.asp)
25 | * [Using `::before` and `::after` Pseudo-Elements](https://css-tricks.com/almanac/selectors/a/after-and-before/) and
26 | [a bunch of cool things they can be used for](https://css-tricks.com/pseudo-element-roundup/)
27 | * [MDN Web Docs on Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)
28 |
--------------------------------------------------------------------------------
/archive/html_css/tables.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Tables used to be pretty much the only game in town -- when you had data of any sort, you pretty much had to use one to display it. You also had to use tables to wrangle the layout of your page into some semblance of order. Thankfully, those days are behind us (thanks to CSS) and now tables can often be more of a hindrance than a benefit for any but the core use cases. That said, they are still the go-to way to get structured data onto the page.
3 |
4 | ### Learning Outcomes
5 |
6 | * When should you use tables?
7 | * What is the structure of a table?
8 | * What are the special tags that dictate certain parts of a table, e.g. headers or captions?
9 | * How can you combine cells in a table?
10 | * Why do you need to be careful about your padding and borders in tables?
11 | * How do you align text within cells in a table?
12 |
13 | ### Assignment
14 |
15 |
16 | 1. Read [Shay Howe's Chapter on Tables](http://learn.shayhowe.com/html-css/organizing-data-tables)
17 | 2. Glance over the [HTML Docs on Tables](http://www.w3schools.com/html/html_tables.asp), which you'll no doubt see again.
18 |
19 |
20 | ### Additional Resources
21 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
22 |
23 | * [An older tutorial on Tables from HTML Goodies](http://www.htmlgoodies.com/tutorials/tables/article.php/3479851)
24 |
--------------------------------------------------------------------------------
/archive/intermediate_html_css/grid_project.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | We've covered a lot of ground so far! Now it's time to practice the Grid tools we've learned and create a layout that might seem familiar. We're going to make a Holy Grail Layout like the one we created using Flexbox in the Landing Page project. The difference here is that we'll be creating a version of the Holy Grail layout that is slightly more complicated. We won't be relying on Flexbox for this project. We'll only be using [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/), and you'll be able to see the benefits of Grid for yourself.
3 |
4 |
5 | ### Assignment
6 |
7 |
8 |
9 | 1. Have a look at the layout you'll be creating [here](https://i.postimg.cc/5y5Km7V1/Holy-Grail-Two-Column-Layout.png). Think about how the grid is arranged, and how you'll want to create a similar layout using **fixed sizing**.
10 | 2. Create a new HTML document and write up the basic structure of the page using empty `
` tags to act as each of the grid items.
11 | 3. Start out by creating explicitly positioned Grid item sizes to fit your screen. Refer back to the *Positioning Grid Items* lesson if you get lost on which properties you can use to accomplish this. Once again, you're only using Grid - no Flexbox.
12 | 4. Change your Grid to be responsive using the techniques you learned about in the *Advanced Grid Properties* lesson.
13 | 5. Now that it's responsive, we're going to have some fun making it a bit more complicated and adding some features. Have a look at and try to create [this layout](https://i.postimg.cc/4xfqWgy0/Holy-Grail-Final-File.png). You might find this to be a bit more challenging than you expected, and you might want to use Flexbox. For the sake of this practice assignment, try and see if you can figure out how to make your layout to look similarly using only Grid. Feel free to use your own dummy content.
14 | 5. Push your beautiful new grid to GitHub and share your solution below!
15 |
--------------------------------------------------------------------------------
/archive/javascript/react_js/project_memory_card.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Here we go again with a new project! Let's make sure you understand the concepts so far. The main goal of this project is to use hooks or lifecycle methods as well as a lot of state.
4 |
5 | ### How The Game Works
6 |
7 | Go play around [with this student's solution](https://heldersrvio.github.io/memory-card-game/) to find out for yourself how the Memory game works. Although this example uses cartoon characters, you can use anything you like for your game.
8 |
9 | ### Assignment
10 |
11 |
12 | 1. Create a new project using `create-react-app`.
13 | 2. Take a little bit of time to think about how you want to implement your application, the features you want to implement, which components you need, and how to structure your application. Your application should include a scoreboard, which counts the current score, and a "Best Score", which shows the best score you achieved thus far. You also need a couple of cards that display images and possibly informational text. There should be a function that displays the cards in a random order anytime a user clicks one. Be sure to invoke that function when the component mounts.
14 | 3. Now that you've thought about the structure of your application, set up the folder structure and start creating the components. We suggest you use functional components and therefore hooks in this project.
15 | 4. Style your application so you can show it off!
16 | 5. As always, push the project to GitHub.
17 |
18 |
--------------------------------------------------------------------------------
/archive/javascript/react_js/react_introduction/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/archive/javascript/react_js/react_introduction/imgs/00.png
--------------------------------------------------------------------------------
/archive/nodeJS/express_and_mongoose/express_104_view_templates.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This lesson is fun! You'll be setting up several views, and you'll start to see your Application come together. We'll finally get to see our data showing up in the browser! This is a long lesson that is broken up into several sub-lessons, so make sure you click through to see them all.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - Describe asynchronous functions.
10 | - Manage asynchronous operations in controller functions.
11 | - Manage flow control when using asynchronous operations.
12 | - Create and extend templates.
13 | - Write templates using Pug.
14 | - Pass information to a template from your view.
15 | - Implement read-only pages.
16 | - Describe how routes work.
17 | - Describe how views and models work in practice.
18 | - Query database using models.
19 | - Describe date handling using luxon.
20 |
21 | ### Assignment
22 |
23 |
24 |
25 | 1. Complete ["Part 5: Displaying library data"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data) of the Local Library tutorial.
26 |
27 |
28 |
29 | ### Additional resources
30 |
31 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
32 |
33 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
34 |
--------------------------------------------------------------------------------
/archive/nodeJS/express_and_mongoose/project_express_105_forms_and_deployment.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This lesson picks up where the last one left off and has you creating the rest of your views. You'll be focusing on the forms needed to create and update new entries in your database. With the knowledge you pick up here, you'll really be ready to go create your own data-driven web applications. There is, of course, more to learn, but finishing this one is a *big* step towards actually being able to do your own projects.
4 |
5 | It's another long multi-part tutorial, with plenty of useful information scattered throughout. Be sure to take your time and read everything!
6 |
7 | This is the last lesson on the MDN tutorial. The last step, listed below takes you through what you need to do to actually deploy your project so you can share it and show it off, so be sure to link it up in the student solutions below!
8 |
9 | ### Lesson overview
10 |
11 | This section contains a general overview of topics that you will learn in this lesson.
12 |
13 | - Describe form handling process.
14 | - Describe validation and sanitization.
15 | - Describe routes.
16 | - Work with HTML forms in Express using Pug.
17 | - Use forms to get data from users and update the database with this data.
18 | - Validate and sanitize input using express-validator.
19 | - Write forms to create, update, and delete records from the database.
20 | - Add basic forms and form-handling code to Node websites.
21 |
22 | ### Assignment
23 |
24 |
25 |
26 | 1. Complete ["Part 6: Working with forms"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms) of the Local Library tutorial.
27 | 1. Deploy your local library app as per ["Part 7: Deploying to production"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment) of the Local Library tutorial.
28 |
29 | Reminder: Make sure to hide your MongoDB connection URL behind an environment variable! Once you've hosted your app on Glitch or Railway, you can use the instructions in the MDN tutorial to manage values for environment variables through the Glitch/Railway dashboard.
30 |
31 |
32 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/JS101/README.md:
--------------------------------------------------------------------------------
1 | # This is the beginning of the JS curriculum!!
2 |
3 | How I envision it playing out: Stub out the lessons for each section (like I've done here) with simple descriptions of the content and then go through and start filling them out.
4 |
5 | This is almost definitely going to change... things are likely to be moved quite a lot once we start actually writing stuff, but for now the tentative order of the lessons here is:
6 |
7 | It is __very__ likely that several of those lessons will be broken down into multiple smaller lessons. I advise that we keep them together in one file for now and break them up as needed once things start getting too long.
8 |
9 | ## PLEASE
10 | If you have feedback about the order or content of any of the lessons let someone know. Feel free to simply add your feedback to the lessons themselves or drop it in Gitter somewhere (you might ping @codyloyd, I'm kind of heading the project at this point).
11 |
12 |
13 | ## NOTES:
14 | 1. May be a good idea to move Arrays to second-steps... it's really hard to do too many useful things with arrays without using loops or functions, neither of which we've learned yet in first-steps. I'm leaving it for now, but may consider moving it later.
15 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/JS101/introduction-101.md:
--------------------------------------------------------------------------------
1 | As of today the contents of this gitbook have been made LIVE on [theodinproject.com](https://www.theodinproject.com/courses/foundations)
2 |
3 | Feel free to continue going through them here if that suits you, I'm not going to delete anything anytime soon.. and will probably continue to use this gitbook as a staging site for other new content. However, by going through the site itself you can keep track of your progress better.
4 |
5 |
6 |
7 | BIG STINKING THANK YOU to everyone who's taken this course and provided feedback along the way!
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/JS101/oldFundamentalsLessons/fundamentals-1-project.md:
--------------------------------------------------------------------------------
1 | # Let's practice.
2 |
3 | Now it's time to slow down a little bit with the information overload and practice some of the things you've been learning. It is perfectly okay if you don't remember how to do any or all of it as you go.. in fact that is to be expected at this point! When you encounter something you can't remember, just go back to the previous lessons and look it up. If you get stuck, drop by the chatrooms and ask for help. Try not to get frustrated and be patient.
4 |
5 | ## Your assignment
6 |
7 | To give you a good bit of practice, we have created an online classroom on repl.it. In general we believe that it's best to work on programming on your _own_ computer rather than in an online environment.. but we'll get to that soon enough.
8 |
9 | The classroom and lessons can be found [here](https://repl.it/community/classrooms/34425). Do the lessons in order. You do not have to sign up or login to repl.it to do the course, but doing so makes the user experience a little nicer.. you can submit your answers to check them and see 'model solutions' on a couple of the lessons.
10 |
11 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/JS101/oldFundamentalsLessons/fundamentals-3-project.md:
--------------------------------------------------------------------------------
1 | ## Congratulations!
2 |
3 | You have been through a _ton_ of content, and it would not be surprising if you were feeling rather overwhelmed at this point. Let's take a little time to slow down and practice this stuff with more coding exercises. I'll warn you now: some of these get pretty difficult, but if you've done the lessons you should have covered everything you need to know to solve them. Don't be afraid to go back and review if you find that you can't remember something, that's part of the process. If you get stuck come join us in the chatroom!
4 |
5 | ### Your Assignment
6 |
7 | At this point you just need a little more practice! Go back to the [JavaScript exercises](https://github.com/TheOdinProject/javascript-exercises) that we introduced in the Fundamentals 2 project and complete the following:
8 |
9 | * calculator
10 | * simonSays
11 | * palindromes
12 | * snakeCase
13 | * caesar
14 | * fibonacci
15 | * pigLatin
16 |
17 | ### Want MORE practice?
18 |
19 | You really can't spend too much time reviewing and practicing the fundamentals that we've covered here and luckily for you there are several websites that offer just this type of thing. Seriously, the better you grasp and the more fluently you can use the fundamental building blocks of JavaScript, the easier the hard stuff is going to come to you when we get to it. Take a minute to check out the following links.
20 |
21 | * [Exercism](http://exercism.io/) - an Odin favorite. Uses a neat command-line interface to download and submit exercises and allows you to give and get feedback on your solutions.
22 | * [CodeWars](https://www.codewars.com/) - A neat gamified system with leveled exercises. As you complete more exercises you level up and access more difficult ones.
23 | * [HackerRank](https://www.hackerrank.com/) - Similar in setup to CodeWars, but this site is more focused on interview question type tasks. Some companies even use this site to interview candidates.
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/ftp_basics.md:
--------------------------------------------------------------------------------
1 | FTP stands for File Transfer Protocol and is basically a way of transferring files to and from servers. Depending on your workflow, you may or may not use it directly but you should know what it is.
2 |
3 | ### Points to Ponder
4 |
5 | *Look through these now and then use them to test yourself after doing the assignment*
6 |
7 | * What is FTP?
8 | * When is FTP used?
9 | * How is FTP used?
10 |
11 | ### Assignment
12 |
13 | 1. FTP is explained well in this [FTP For Beginners](http://www.webmonkey.com/2010/02/ftp_for_beginners/) post from Webmonkey, check it out.
14 |
15 | ### Additional Resources
16 |
17 | *This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something*
18 |
19 |
20 | * [Wiki article on FTP](http://en.wikipedia.org/wiki/File_Transfer_Protocol)
21 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/jquery_basics.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | [jQuery](http://skillcrush.com/2012/07/23/jquery/) is a library of commonly used javascript widgets and functions that has more or less taken the internet by storm. It's written in javascript and it means that you don't have to go through the pain of building a popup modal dialog box or a dropdown menu, for example, the long way. It also gives you the incredibly easy ability to select elements on the webpage ("DOM elements") so you can start modifying their properties, whether that's hiding them, moving them, changing their contents... it's all in your hands!
4 |
5 | jQuery will let you take your javascript knowledge and start really diving into your webpages and messing with (ahem, improving) the elements.
6 |
7 | ### Learning Outcomes
8 | Look through these now and then use them to test yourself after doing the assignment:
9 |
10 | * What is the DOM?
11 | * How can you interact with the DOM?
12 | * How can you add elements to the DOM?
13 | * How can you modify the contents of an element?
14 |
15 | ### Assignment
16 |
17 |
18 |
19 | 1. Learn about jQuery by doing [Code School's try jQuery](http://try.jquery.com/).
20 |
21 |
22 |
23 | ### Additional Resources
24 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
25 |
26 | * The [jQuery Documentation](http://api.jquery.com/) has a comprehensive list of all the functions you can use.
27 | * [jQuery Cheat Sheet from overAPI](http://overapi.com/jquery)
28 | * [HTML DOM Events Cheat Sheet from overAPI](http://overapi.com/html-dom)
29 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/principles_of_good_programming.md:
--------------------------------------------------------------------------------
1 | There are a handful of generally accepted principles of good programming. Common expressions like "be lazy" and "don't repeat yourself" go a long way. You'll hear them used by name more than a few times in the coming months but it's good to get familiar with them up front.
2 |
3 | If you stick with them, they'll keep you out of trouble. Print the list from the first post below if you need to. This is a great resource to check back with once you're writing code more consistently.
4 |
5 | ### Points to Ponder
6 |
7 | *Look through these now and then use them to test yourself after doing the assignment*
8 |
9 | * What does DRY stand for and why is it relevant to you?
10 | * What does KISS stand for and why do engineers love it?
11 | * How does MVC follow Separation of Concerns?
12 | * How "Don't Make Me Think" is applicable to far more than just writing code -- especially in user-facing experience and design functions.
13 | * What is "You ain't gonna need it?" (YAGNI)
14 | * How Embrace Change is fundamental to the engineer's career.
15 | * TETO -- test early, test often
16 |
17 | ### Your Assignment:
18 | 1. Christopher Diggins has compiled a healthy list of principles in [this blog post](http://www.artima.com/weblogs/viewpost.jsp?thread=331531), check them out. Some will be more specific than you're really ready for, but you'll likely encounter them all at some point early in your career. Focus on the ones highlighted in the "Points to Ponder" above. They're things that a live teacher will tell you again and again while walking around the classroom.
19 |
20 | ### Additional Resources
21 |
22 | *This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something*
23 |
24 | * A [slightly different perspective on 10 principles for keeping your code clean](http://www.onextrapixel.com/2011/01/20/10-principles-for-keeping-your-programming-code-clean/)
25 | * For a more design-focused perspective, check out [this Smashing Magazine article on Principles of Effective Web Design](http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/)
26 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/terms_to_know.md:
--------------------------------------------------------------------------------
1 | ###
Introduction
2 | Web technology land is full of strange terms and an alphabet soup of acronyms and it can be a bit overwhelming. You won't need to know them all out of the gate, but there are some that you will need to be familiar with before getting started.
3 |
4 | ###
Learning Outcomes
5 |
6 | *Look through these now and then use them to test yourself after doing the assignment*
7 |
8 |
9 | * How to define each of the terms in the Viking Code School list below.
10 | * The basics of each term on the list from Smashing Magazine below.
11 |
12 | ###
Assignment:
13 |
14 | 1. Take a look at this [list of term definitions](http://www.vikingcodeschool.com/web-development-basics/terms-to-know) and make sure you have at least a competent understanding of each one (click on it to bring up the full definition).
15 | 2. Browse through this [great (though design-focused) list of terms from Smashing Magazine](http://www.smashingmagazine.com/2009/05/21/web-design-industry-jargon-glossary-and-resources/). It's not essential that you know all the unfamiliar ones down cold, but you'll keep seeing this stuff again and again so it's good to have a working knowledge of what they are. The article also contains lots of great links to dig deeper into anything you don't understand.
16 |
17 | ###
Additional Resources
18 |
19 | *This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something*
20 |
21 | * [Smashing's glossary-of-glossaries](http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/), or "where to find any jargon you can imagine".
22 | * [About's Web Design Glossary](http://webdesign.about.com/od/webdesignhtmlatoz/a/blglossary.htm)
23 |
--------------------------------------------------------------------------------
/archive/old_lessons/foundations/the_front_end/project_html_css/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/archive/old_lessons/foundations/the_front_end/project_html_css/imgs/00.png
--------------------------------------------------------------------------------
/archive/old_lessons/introduction_to_web_development/conclusion.md:
--------------------------------------------------------------------------------
1 | Hopefully you've gained a better idea of what a web developer actually does and what your life might look like if you decided to take it on as a career. This has really just been a teaser into the world of web development. See the "Additional Resources" section below if you'd like to learn more before moving forward to the next courses.
2 |
3 | In the next course, "Foundations", you'll take a journey through the entire spectrum of topics that you will eventually need to know. That will give you a great base from which to begin, though it's got a lot more meat to it than your typical "101", so watch out!
4 |
5 | After that, each course will be a deep dive into a particular topic, from the back end to the front. You will build dozens of scripts, projects, and websites by the time this journey is complete and will have the skills necessary to step into full-time development.
6 |
7 | Getting all the way there is going to be challenging. In fact, you should check out the post ["Why Learning to Code is So Damn Hard"](http://www.vikingcodeschool.com/posts/why-learning-to-code-is-so-damn-hard) so you have a good idea of what the journey ahead is like. But what worthwhile thing is truly easy?
8 |
9 | Yes, it's going to be challenging.
10 |
11 | But it's going to be fun.
12 |
13 | And it might be life-changing too.
14 |
15 | *What are you waiting for!?!*
16 |
17 | ### Additional Resources
18 |
19 | *This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something*
20 |
21 | * Watch [How To Learn podcast by the Ruby Rogues](http://rubyrogues.com/131-rr-how-to-learn/)
22 | * Read [this Quora answer](http://www.quora.com/Product-Management/What-does-a-great-product-manager-at-a-tech-startup-do-day-to-day-e-g-wireframe-feature-flow-etc) if you also want to know what a Product Manager does.
23 | * [How can I Become a Really Good Web Developer?](http://www.quora.com/Computer-Programming/How-can-I-become-a-really-good-Web-Developer-starting-from-now-at-age-20-before-age-25) on Quora.
24 | * [Should I Become a Web Programmer?](http://webdesign.about.com/od/jobs/p/should_I_become_a_web_programmer.htm) from Ask.com.
25 |
--------------------------------------------------------------------------------
/archive/old_lessons/introduction_to_web_development/the_best_web_devs.md:
--------------------------------------------------------------------------------
1 | Developing is incredibly rewarding but can also be difficult and frustrating. The strongest assets you can have as a student are a desire to build, a problem-solving mind, and persistence in the face of setbacks. As a professional, it's important to also understand that software and websites are created for *people* and that the user or client's needs should be top of mind throughout the whole process. Said by others:
2 |
3 | * [Hobbits would make great programmers (video)](http://www.youtube.com/watch?v=G49RUPv5-NU)
4 | * [Quora: What makes a great web developer?](http://www.quora.com/What-makes-a-great-web-developer)
5 | * [Jared the Nerd: What makes a good web developer?](http://jaredthenerd.com/2013/05/What-Makes-A-Good-Developer/)
6 | * [oreanarose: What makes a good web developer?](http://oreanarose.com/2010/12/what-makes-a-good-web-developer/)
7 |
8 | ### Additional Resources
9 |
10 | *This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something*
11 |
12 |
13 | * [Things I Wish Someone Had Told Me When I Was Learning How To Code](https://medium.com/learning-to-code/565fc9dcb329)
14 | * [Hacking Passion video by Katrina Owen](http://youtu.be/rHLTltK1kss) - An inspirational talk from a [prolific contributor to open source](https://github.com/kytrinyx) about practice, satisfaction, focus, accomplishment, when to know when you're good enough, and more.
15 | * [Don't Believe Anyone who Tells you Learning to Code is Easy](http://techcrunch.com/2014/05/24/dont-believe-anyone-who-tells-you-learning-to-code-is-easy/): it's okay if it's really frustrating.
16 | * [Deliberate Programming Practice](https://codequizzes.wordpress.com/2013/04/28/deliberate-programming-practice/)
17 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/canvas.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Canvas is a great tool in HTML5 -- it basically provides a panel in which you can use Javascript and math to draw pretty much anything. It's useful for everything from gaming to image optimization. In our case, we'll focus on games because it gives you a chance to flex your pure Javascript muscles creatively. For the first time so far, you'll get to build games that operate dynamically in 2-D space (not confined to a grid). Use that power only for good...
4 |
5 | ### Learning Outcomes
6 |
7 | * What is Canvas?
8 | * How do you set up a Canvas element?
9 | * How do you draw a 5 pixel black square with a red outline?
10 | * How can you use refreshes to animate things?
11 | * How would you make a ball that bounces off walls?
12 | * How would you make two balls that bounce off walls or each other?
13 | * What happens if you refresh too many calculations or too rapidly?
14 |
15 | ### Assignment
16 |
17 |
18 | 1. Do chapters 1-6 in the [Canvas Deep Dive book](http://joshondesign.com/p/books/canvasdeepdive/toc.html), which is the best explanation I've seen.
19 | 2. Browse through the [No Tears Guide to HTML5 Games from html5rocks.com](http://www.html5rocks.com/en/tutorials/canvas/notearsgame/) in preparation for your next project.
20 |
21 |
22 | ### Additional Resources
23 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
24 |
25 | * [Canvas Deep Dive book](http://joshondesign.com/p/books/canvasdeepdive/toc.html) chapters 7-14 get deep into how you can use Canvas as a sweet graphics and gaming tool. Out of scope for this course, but could be fun if that's your thing.
26 | * [Canvas game tutorial posts from Michal Budzynski](http://michalbe.blogspot.com/2010/09/simple-game-with-html5-canvas-part-1.html)
27 | * [TheCodePlayer's Snake game with HTML5 canvas and jQuery](http://thecodeplayer.com/walkthrough/html5-game-tutorial-make-a-snake-game-using-html5-canvas-jquery)
28 | * [Game Development Using Javascript](http://www.codeproject.com/Articles/563425/Game-Development-Using-JavaScript)
29 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/comparing_to_ruby.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This is a very brief look at the similarities and differences between Ruby and Javascript. Basically, Javascript uses functions eeeeeeverywhere and it has to wait a lot for things to happen.
4 |
5 | This will obviously be less helpful for you if you haven't been through the Ruby lessons, but it may be interesting to compare the two regardless so you get an idea of common similarities between languages.
6 |
7 | ### Learning Outcomes
8 |
9 | * How are Ruby blocks like JS anonymous functions?
10 | * How can JS functions be saved to variables (like Ruby Methods) and passed around?
11 | * Where would Ruby's single-threaded nature really hurt it in the browser?
12 | * Think event-driven!
13 | * How are JS objects like Ruby objects?
14 | * How is `this` like `self` in Ruby? How is it different?
15 |
16 | ### Assignment
17 |
18 |
19 | 1. Check out this [Javascript-to-Ruby Syntax Comparison Cheat Sheet from AgentCooper](http://agentcooper.github.io/js-ruby-comparison/)
20 | 2. Read [Ruby vs Javascript Functions, Procs, Blocks, and Lambdas by Skilldrick](http://skilldrick.co.uk/2011/01/ruby-vs-javascript-functions-procs-blocks-and-lambdas/)
21 |
22 |
23 | ## Additional Resources
24 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
25 |
26 | * Add some!
27 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/frameworks/framework-template.md:
--------------------------------------------------------------------------------
1 | # Introduction
2 | A brief introduction to the framework. When was it created. What major releases has it gone through.
3 |
4 | # Overview
5 | Section for noting the key features of the framework. What makes it different. Why might you want to learn it
6 |
7 | # Getting Started
8 | A little guide to getting up and running with the framework on your system.
9 |
10 | # Assignment
11 | List no more than 3 resources that cover basic tutorials for using features of the framework
12 |
13 | # Additional Resources
14 | List any additional resources that may be of interest
15 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/javascript_apis.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | There are a whole lot of external APIs that you can access using simple Javascript, adding rich content or interesting functionality to your webpages. A few examples include embedding Google Maps in your page or downloading Flickr images.
4 |
5 | To work with an API, you will usually need to register your application with the API provider (and get an API key to identify yourself with when making a request). After that initial setup, most access is often free.
6 |
7 | ### Assignment
8 |
9 |
10 | 1. Do the Codecademy track about [learning to use APIs with Javascript for accessing YouTube](http://www.codecademy.com/tracks/youtube).
11 | 2. Look at the [Google Maps API Tutorial from W3 Schools](https://www.w3schools.com/graphics/google_maps_intro.asp), though consider implementing it optional.
12 | 3. Finish the first part of Udacity [Google Maps APIs](https://www.udacity.com/course/google-maps-apis--ud864) course to get better understanding of real world application of working with APIs.
13 |
14 |
15 | ### Additional Resources
16 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
17 |
18 | * [Codecademy's API Track](https://www.codecademy.com/apis)
19 | * [Using Apigee as a back end for your website](http://www.codecademy.com/tracks/apigee)
20 | * [Embed Google Maps in your site using this jQuery plugin called GoMap](http://www.pittss.lv/jquery/gomap/). The site has lots of links to example code for implementing different functionality.
21 | * [Designing Better Javascript APIs from Smashing Magazine](http://coding.smashingmagazine.com/2012/10/09/designing-javascript-apis-usability/) is great if you're considering creating your own Javascript APIs and Tools, or if you just want to see life from the perspective of the creators of great tools like jQuery.
22 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/js_to_browser.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | A *very* brief look back into the idea that browser loading matters (maybe).
3 |
4 | ### Learning Outcomes
5 |
6 | * Why is it important which order you load scripts?
7 | * What does it mean if something "blocks the browser"?
8 | * How can you use Asynchronous loading to reduce user wait times?
9 |
10 | ### Assignment
11 |
12 |
13 | 1. Read this [SO post on non-blocking Javascript in modern browsers](http://stackoverflow.com/questions/8197072/non-blocking-javascript-and-css-in-modern-browsers-is-it-still-needed)
14 |
15 |
16 | ### Additional Resources
17 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
18 |
19 | * [Advanced Javascript Loading in the Browser from HTML5Rocks](http://www.html5rocks.com/en/tutorials/speed/script-loading/) is deeper than you need to go now, but a useful reference.
20 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/objects_prototypes.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Javascript doesn't really have "classes", per se, like Ruby -- instead they use "prototypes" to DRY ("Don't Repeat Yourself") up code.
3 |
4 | You'll also find **Objects** used a whole lot. They're basically containers that can contain anything from variables to functions (or both!). They might remind you a lot of Ruby's hashes. You'll find them used in standard ways (for logically grouping variables) or ways which may be new to you (to group functions within a particular namespace).
5 |
6 | ### Learning Outcomes
7 |
8 | * How are JS objects similar to Ruby objects?
9 | * Can JS functions be defined inside of objects?
10 | * What is a `ConstructorFunction`?
11 | * What is a prototype?
12 | * How do prototypes allow you to inherit and DRY up code?
13 | * What happens if you take the prototype of the prototype of the prototype etc. of an object?
14 |
15 | ### Assignment
16 |
17 | 1. Read [Understanding Objects in JS from JSIS](http://javascriptissexy.com/javascript-objects-in-detail/)
18 | 2. Read [Javascript Prototypes from JSIS](http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/)
19 | 3. Read [OOP in Javascript from JSIS](http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/)
20 |
21 |
22 | ### Additional Resources
23 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
24 |
25 | * [Prototypes in Javascript from MSDN](http://msdn.microsoft.com/en-us/magazine/ff852808.aspx)
26 | * [Seven Things I Wish I Knew Much Earlier in My Career (about Javascript) from Smashing Magazine](http://coding.smashingmagazine.com/2010/04/20/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/)
27 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/project_js_frameworks.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | This project has two possibilities -- you can use Backbone.js if you'd like something that's a bit more explicit and well documented or Angular.js if you'd like to try something a bit more cutting edge. Just pick one, don't try both (focus!).
3 |
4 | ### Assignment
5 |
6 |
7 | If you've chosen Backbone, [do the beginner and intermediate tutorials here](http://cssor.com/wp-content/uploads/2012/10/Backbone-Tutorials.pdf) to learn Backbone and get a great overview of Javascript frameworks.
8 |
9 | If you've chosen Angular instead, first glance over the beginner tutorial from the link above to get a feel for how these frameworks operate, then [do this Angular.js tutorial which has you build a real web app](http://docs.angularjs.org/tutorial).
10 |
11 | In both cases, save your solution using Git and submit it below when you've finished.
12 |
13 |
14 | ### Student Solutions
15 | Submit a link below to the github repo with your files in it by using a pull request. See the section on [Contributing](http://github.com/TheOdinProject/curriculum/blob/master/contributing.md) for how. Please include your partner's github handle somewhere in the description if you had one and they would like attribution.
16 |
17 | * Add your solution below this line!
18 | * [Jack Wong's solution](https://github.com/iamjackslayer/backbone-twitter-scroll) - [View in browser](https://nameless-spire-43337.herokuapp.com/)
19 | * [Daunenok's solution](https://github.com/daunenok/phones-app) - [View in browser](https://daunenok.github.io/phones-app/)
20 |
21 |
22 | ### Additional Resources
23 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
24 |
25 | * Add some!
26 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/project_node.md:
--------------------------------------------------------------------------------
1 | Coming soon...
2 |
3 | In the meantime, [fire up a Node server and try out some file I/O and a web server.](https://blog.codeship.com/node-js-tutorial/)
4 |
5 | ### Additional Resources
6 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something*
7 |
8 | * Add some!
9 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/templating.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Before we get into frameworks, it's useful to learn about templating tools. Basically, these will let you set up a template (like a Rails layout/view) and insert basic dynamic elements (like loops) into it with minimal effort and without the need to build out a sophisticated back end to handle it. You'll find that most templates feel a whole lot like ERB did in Rails views -- a way of passing snippets of dynamic code and variables into your HTML.
3 |
4 | Some of the more common templating languages include [Mustache](http://mustache.github.io/) and [Handlebars](http://handlebarsjs.com/) (so named because they typically use curly braces {{to surround}} inserted code).
5 |
6 | ### Learning Outcomes
7 |
8 | * What is a client-side template?
9 | * How is this similar to ERB you used in Rails?
10 | * How do you include Mustache.js in your project?
11 | * How do you use Mustache to display a group of `
`'s?
12 |
13 | ### Assignment
14 |
15 |
16 | 1. Read [Smashing Magazine on Client Side Templating](http://coding.smashingmagazine.com/2012/12/05/client-side-templating/), which starts from scratch and gives lots of examples
17 | 2. Read [Learning about Handlebars Templating from JSIS](http://javascriptissexy.com/handlebars-js-tutorial-learn-everything-about-handlebars-js-javascript-templating/) to get an in-depth guide on Mustache. You can skip the early stuff if you've already got a good handle on the theory of templating.
18 |
19 |
20 | ### Additional Resources
21 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something
22 |
23 | * Glance over [An overview of JS templates from Creative Bloq](http://www.creativebloq.com/web-design/templating-engines-9134396) for more examples.
24 | * [Why LinkedIn chose Dust.js for Templating](http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more) (includes a breakdown of the other popular choices)
25 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/widgets.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Working with jQuery is a whole lot of fun... and here's why. jQuery basically drives all the nifty tooltips, modals, lightboxes, sliders, and other widgets you see on a webpage. Just about everything you've ever seen on the web can be done with a combination of the Javascript and jQuery you now know. Let's take a look at some of them in greater depth.
3 |
4 | We covered a [section on design in the HTML/CSS Course](/html5-and-css3) which may be useful to check back on if it's been awhile. Lots of these widgets and effects are best used judiciously -- it's okay to go overboard while you're testing things out but your user doesn't want to have to wait for a whole bunch of fancy-looking stuff to happen on the page so don't go crazy in a production setting.
5 |
6 | ### Learning Outcomes
7 |
8 | * What is jQuery UI and why is it particularly useful for you?
9 | * How do you include jQuery UI in your project?
10 | * How do you use jQuery UI?
11 | * Where are the docs for jQuery UI?
12 |
13 | ### Assignment
14 |
15 |
16 | 1. Read about [jQuery UI from learn.jquery.com](http://learn.jquery.com/jquery-ui/)
17 | 2. Browse through the [jQuery UI demos which let you see all of the effects in action](http://jqueryui.com/demos/) and include the source code. Think of what you can build!
18 | 3. If you want further widget inspiration, [check out this list of 50 jQuery plugins from tutorialzine](http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/) (or do it to see what plugins you might want to use yourself).
19 |
20 |
21 | ### Additional Resources
22 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
23 |
24 | * [jQuery for Designers from Web Designer Wall](http://www.webdesignerwall.com/demo/jquery/)
25 | * [(2009) A list of jQuery widgets and tutorials that can still make you drool from Smashing Magazine](http://coding.smashingmagazine.com/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/) (thought some of them use AJAX, which we cover later, and others are a bit dated).
26 | * [jQuery for Designers](http://jqueryfordesigners.com/)
27 |
--------------------------------------------------------------------------------
/archive/old_lessons/javascript/workflow_tools.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | Very briefly, managing dependencies is something we've had to deal with many times in the past so far -- for example, you can't load jQuery UI before jQuery since it depends on jQuery being there first. The same applies to packages in Node. People have built tools to help you get it right.
3 |
4 | You've probably already got all kinds of kinks in your workflow so people have also designed tools to streamline the process. They allow you to include all the preprocessors, packages, libraries etc. that you need with less manual labor.
5 |
6 | You may need these things now, you may not. At least learn what they are so you'll know where to dig deeper when the time comes.
7 |
8 | ### Learning Outcomes
9 |
10 | * What is a dependency?
11 | * What is a build tool?
12 | * Why would you use a package manager?
13 | * What is Grunt?
14 | * What is Yeoman?
15 | * What is Bower?
16 |
17 | ### Assignment
18 |
19 |
20 | 1. Read [Overwhelmed by Javascript Dependencies? from Startifact.com](http://blog.startifact.com/posts/overwhelmed-by-javascript-dependencies.html)
21 | 2. Read [Grunt for People Who Think Things Like Grunt are Weird and Hard by Chris Coyier](http://24ways.org/2013/grunt-is-not-weird-and-hard/)
22 | 3. [Get up and Running with Grunt from Smashing Magazine](http://coding.smashingmagazine.com/2013/10/29/get-up-running-grunt/)
23 | 4. Glance over the docs for [Yeoman, which builds on Grunt](http://yeoman.io/)
24 | 5. Glance over the docs for [Bower, a front-end package manager](http://bower.io/)
25 |
26 |
27 | ### Additional Resources
28 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
29 |
30 | * [Grunt.js task runner documentation](http://gruntjs.com/)
31 | * ["Can you help me understand the benefit of `require.js`?"](https://gist.github.com/desandro/4686136)
32 | * ["How to manage client-side Javascript dependencies?" from SO](http://stackoverflow.com/questions/12893046/how-to-manage-client-side-javascript-dependencies)
33 | * [SO on Javascript Dependency Management](http://stackoverflow.com/questions/3202606/javascript-dependency-management)
34 |
--------------------------------------------------------------------------------
/archive/old_lessons/rails/introduction_to_rails/project_associations_2.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This final chapter of the RoR Tutorial will require you to have users following users.
4 |
5 | ### Project: Ruby on Rails Tutorial
6 |
7 | You're on the last chapter! This one will require you to implement the final piece of functionality that makes microblogging what it is -- allowing users to follow each other. With your now excellent knowledge of associations, you should be able to see that you'll run into some naming issues (you won't get too far with a User who `has_many :users`). It's a many-to-many relationship that uses the SAME model for both sides ("self-referential")!
8 |
9 | As an added bonus, you'll get a chance to touch a bit of AJAX when making it so the buttons for following don't actually refresh the page with each push. Hooray learning!
10 |
11 | ### Assignment
12 |
13 |
14 | 1. You've got a User model. Write down how you would implement (and name) the associations necessary to make one user follow another. You'll get a lot more out of the tutorial chapter if you think it through first.
15 | 2. Do the [Ruby on Rails Tutorial Chapter 14](https://www.learnenough.com/ruby-on-rails-4th-edition-tutorial/following_users), "Following users".
16 |
17 |
18 | ### Additional Resources
19 | This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
20 |
21 | * [Railscast on Many-to-Many Self-Referential Relationships (2010)](http://railscasts.com/episodes/163-self-referential-association?view=asciicast). This is old but should be helpful to see the concept covered.
22 |
--------------------------------------------------------------------------------
/archive/react/using_nodejs_for_your_backend.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | So, you've now learned a lot of juicy JavaScript, enabling you to make various components of your HTML/CSS page react to user actions and/or input. That's great! As you've seen, you can get your apps to do a lot of pretty cool things already, just using client-side JavaScript. You may have noticed, though, that there is still an important piece of the puzzle missing: unless you use [Local Storage](http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/), your app 'forgets' the user's preferences, as well as any other changes made, as soon as the page gets reloaded.
4 |
5 | While Local Storage is great, it's not ideal: it only stores data on the computer from which the user is accessing the page. This approach does not allow for the app to 'remember' anything when the same user tries to access it again from a different device. For that, you're going to need a real backend.
6 |
7 | ### NodeJS to the rescue!
8 |
9 | We aren't quite ready to leave the frontend to learn all about how to store persistent data, but this question comes up often enough that we thought it was worth leaving a note here about it. NodeJS is a JavaScript runtime environment which will let you build an entire backend with JavaScript. We'll learn all about it later in our [NodeJS](https://www.theodinproject.com/paths/full-stack-javascript/courses/nodejs) course. With Node, we'll be able to add a bunch of cool features to our React apps like user authentication, data persistence, and more.
10 |
11 | For now, just keep in mind that this _is_ something we'll be discussing in depth later and head over to the next lesson and continue working through the curriculum. We'll soon be back to building powerful React frontends in the Node.js course! Good luck on your learning journey!
12 |
--------------------------------------------------------------------------------
/archive/ruby/files_and_serialization/event_attendees.csv:
--------------------------------------------------------------------------------
1 | ,RegDate,first_Name,last_Name,Email_Address,HomePhone,Street,City,State,Zipcode
2 | 1,11/12/08 10:47,Allison,Nguyen,arannon@jumpstartlab.com,6154385000,3155 19th St NW,Washington,DC,20010
3 | 2,11/12/08 13:23,SArah,Hankins,pinalevitsky@jumpstartlab.com,414-520-5000,2022 15th Street NW,Washington,DC,20009
4 | 3,11/12/08 13:30,Sarah,Xx,lqrm4462@jumpstartlab.com,(941)979-2000,4175 3rd Street North,Saint Petersburg,FL,33703
5 | 4,11/25/08 19:21,David,Thomas,gdlia.lepping@jumpstartlab.com,650-799-0000,9 garrison ave,Jersey City,NJ,7306
6 | 5,2/2/09 11:29,Chris,Sackett,fpmorgan07@jumpstartlab.com,613 565-4000,173 Daly Ave,Ottawa,ON,
7 | 6,11/12/08 15:00,Aya,Fuller,jtex@jumpstartlab.com,778.232.7000,2-1325 Barclay Street,Vancouver,BC,90210
8 | 7,11/12/08 16:05,Mary Kate,Curry,wmppydaymaker@jumpstartlab.com,(202) 328 1000,1509 Jackson Street,Baltimore,MD,21230
9 | 8,11/12/08 17:18,Audrey,Hasegan,ffbbieucf@jumpstartlab.com,530-919-3000,1570 Old Ranch Rd.,Placerville,CA,95667
10 | 9,11/13/08 1:32,Shiyu,Armideo,odfarg06@jumpstartlab.com,8084974000,644 Ikemaka PL,Kailua,HI,96734
11 | 10,11/13/08 16:40,Eli,Zielke,jbrabeth.buckley@jumpstartlab.com,858 405 3000,3024 Cranbrook Ct,La Jolla,CA,92037
12 | 11,11/13/08 18:17,Colin,Harmston,qkristie.lencsak@jumpstartlab.com,14018685000,34 blue heron drive,attleboro,MA,2703
13 | 12,11/13/08 21:19,Megan,Doe,wkganize@jumpstartlab.com,315.450.6000,64 King Ave,Columbus,OH,43201
14 | 13,11/16/08 11:44,Meggie,Tippit,dgsanshamel@jumpstartlab.com,510 282 4000,28 Olive Ave.,Piedmont,CA,94611
15 | 14,11/16/08 13:54,Laura,Rapetsky,ikr08@jumpstartlab.com,787-295-0000,Urb Monte Carlo c/15#1287,San Juan,PR,924
16 | 15,11/16/08 20:20,Paul,Fulghum,cnroh@jumpstartlab.com,9.82E+00,shohadaye sadeghiye,Tehran,YK,14517
17 | 16,11/17/08 19:41,Shannon,Warner,gkjordandc@jumpstartlab.com,(603) 305-3000,186 Crooked S Road,Lyndeborough,NH,3082
18 | 17,11/19/08 21:56,Shannon,Davis,ltb3@jumpstartlab.com,530-355-7000,Campion 1108 914 E. Jefferson,Seattle,WA,98122
19 | 18,11/20/08 16:25,Nash,Okaty,qdansonlm@jumpstartlab.com,206-226-3000,914 E Jefferson ST,Seattle,WA,98122
20 | 19,11/23/08 20:44,Amanda,Hartzell,nqm17@jumpstartlab.com,607-280-2000,3515 School St,Valois,NY,14841
21 |
--------------------------------------------------------------------------------
/databases/databases/project_sql_zoo.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | SQL Zoo is one of the few resources online that actually lets you build and run queries against existing tables. Each tutorial will show you a table and then have you run queries against it to answer specific questions. Some of the queries, particularly at first, are quite short. They definitely get more challenging towards the end and can be real head scratchers.
4 |
5 | ### Assignment
6 |
7 |
8 |
9 | 1. Go to [SQL Zoo](https://sqlzoo.net/wiki/SQL_Tutorial) and do Tutorials 0-9 listed under the "Tutorial Section" and the quizzes listed at the end of each. The first tutorial is called "SELECT basics".
10 | - Make sure the dropdown on the upper right of the main page for "Engine" says "MySQL" (the default). Large results will be cut off and not all rows or columns shown, so the "answers" may not look 100% correct.
11 | 1. Before you move on, we would like your feedback - please fill out this [feedback form for the SQL course](https://docs.google.com/forms/d/e/1FAIpQLSenvMG6WFbOOEap_biQOwqfbH-j-xsf5Eyv4ir2Rx5FsYSecQ/viewform?usp=sf_link). Getting user (you) feedback is important so we can continue to improve the curriculum and get an idea of your experience.
12 |
13 |
14 |
15 | ### Additional resources
16 |
17 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
18 |
19 | - [Explanation of SELF JOIN by Caleb Curry](https://www.youtube.com/watch?v=W0p8KP0o8g4). He covers many other topics on his [Database Design](https://www.youtube.com/watch?v=e7Pr1VgPK4w&list=PL_c9BZzLwBRK0Pc28IdvPQizD2mJlgoID) series.
20 | - [OverAPI's SQL Cheat Sheet](http://overapi.com/mysql)
21 | - [GalaXQL](http://sol.gfxile.net/galaxql.html), an interactive space-themed SQL tutorial.
22 |
--------------------------------------------------------------------------------
/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/01.png
--------------------------------------------------------------------------------
/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/css-foundations/inspecting-html-and-css/imgs/03.png
--------------------------------------------------------------------------------
/foundations/html_css/css-foundations/intro_to_css/imgs/00.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/css-foundations/intro_to_css/imgs/00.jpg
--------------------------------------------------------------------------------
/foundations/html_css/css-foundations/the-box-model/imgs/box-model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/css-foundations/the-box-model/imgs/box-model.png
--------------------------------------------------------------------------------
/foundations/html_css/css-foundations/the-box-model/imgs/boxes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/css-foundations/the-box-model/imgs/boxes.png
--------------------------------------------------------------------------------
/foundations/html_css/css-foundations/the-box-model/imgs/odin-lined.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/css-foundations/the-box-model/imgs/odin-lined.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/01.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/02.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/03.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/04.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/05.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/06.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/07.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/08.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/09.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/imgs/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/imgs/10.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/project-landing-page/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/project-landing-page/imgs/01.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/project-landing-page/imgs/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/project-landing-page/imgs/02.png
--------------------------------------------------------------------------------
/foundations/html_css/flexbox/project-landing-page/imgs/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/flexbox/project-landing-page/imgs/03.png
--------------------------------------------------------------------------------
/foundations/html_css/html-foundations/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/html-foundations/imgs/00.png
--------------------------------------------------------------------------------
/foundations/html_css/html-foundations/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/html_css/html-foundations/imgs/01.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/00_whisker_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/00_whisker_icon.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/01_turn_off_python.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/01_turn_off_python.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/02_c_install.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/02_c_install.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/03_start_screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/03_start_screen.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/04_install_start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/04_install_start.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/05_unattended_install.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/05_unattended_install.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/06_hardware.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/06_hardware.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/07_virtual_hard_disk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/07_virtual_hard_disk.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/08_preview_login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/08_preview_login.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/09_virtualization_error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/09_virtualization_error.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/10_login_screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/10_login_screen.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/11_users_and_groups.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/11_users_and_groups.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/12_sudo_group.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/12_sudo_group.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/13_sudo_properties.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/13_sudo_properties.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/14_logout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/14_logout.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/15_restart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/15_restart.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/16_toolbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/16_toolbar.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/17_turtle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/17_turtle.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/18_vboxV.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/18_vboxV.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/19_vbox_close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/19_vbox_close.png
--------------------------------------------------------------------------------
/foundations/installations/installations/imgs/20_send_shutdown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/installations/imgs/20_send_shutdown.png
--------------------------------------------------------------------------------
/foundations/installations/setting_up_git/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/setting_up_git/imgs/00.png
--------------------------------------------------------------------------------
/foundations/installations/setting_up_git/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/installations/setting_up_git/imgs/01.png
--------------------------------------------------------------------------------
/foundations/introduction/motivation_and_mindset/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/introduction/motivation_and_mindset/imgs/00.png
--------------------------------------------------------------------------------
/foundations/javascript_basics/function_basics/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/javascript_basics/function_basics/imgs/00.png
--------------------------------------------------------------------------------
/foundations/javascript_basics/fundamentals-1/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/javascript_basics/fundamentals-1/imgs/00.png
--------------------------------------------------------------------------------
/foundations/javascript_basics/revisiting_rock_paper_scissors/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/javascript_basics/revisiting_rock_paper_scissors/imgs/00.png
--------------------------------------------------------------------------------
/foundations/javascript_basics/understanding_errors/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/javascript_basics/understanding_errors/imgs/00.png
--------------------------------------------------------------------------------
/foundations/javascript_basics/understanding_errors/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/javascript_basics/understanding_errors/imgs/01.png
--------------------------------------------------------------------------------
/foundations/javascript_basics/understanding_errors/imgs/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/javascript_basics/understanding_errors/imgs/02.png
--------------------------------------------------------------------------------
/foundations/javascript_basics/understanding_errors/imgs/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/foundations/javascript_basics/understanding_errors/imgs/03.png
--------------------------------------------------------------------------------
/getting_hired/applying_and_interviewing/conclusion.md:
--------------------------------------------------------------------------------
1 | ### Final words
2 |
3 | I hope you're reading this from your new office. If you got a job after doing The Odin Project, come to [our Discord server](https://discord.gg/theodinproject) and let us know! We'd love to hear how everything went, and we have a Discord channel where anyone can share their success stories. The whole reason for putting this project out there is to try and onboard more people into the web development profession and tech in general. Hopefully your success will inspire even more people to give it a shot.
4 |
5 | Before you move on, we would love it if you could [send us your feedback on the Getting Hired course](https://docs.google.com/forms/d/e/1FAIpQLSenziSaFuSQ3RFeHwn1YHovQj-G-WmNZc-_dgMuV_JcGB25Cg/viewform?usp=sf_link). Getting user(you) feedback is important so we can continue to improve the curriculum and get an idea of your experience.
6 |
7 | So build some kick ass software, learn as much as you can, and pay it forward when you're able. **Thanks for participating in the project!!!**
8 |
--------------------------------------------------------------------------------
/getting_hired/applying_and_interviewing/qualify_leads.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | You should have the criteria that you use to evaluate a job already figured out and it should already be in your spreadsheet. Look through each lead on your spreadsheet and cross off the ones that fail your "must-have" criteria, then rank them based on your "nice-to-have" criteria. You should be able to easily come up with a weighting system that lets you sort the jobs in order of preference. Simpler is better, so no need to go overboard.
4 |
5 | Next, make a column for the percentage likelihood of getting the job with a reasonable effort. Multiply this with the value of the job based on the previous step, sort by this new "expected value", and you should have an indication of which jobs are most worth your time.
6 |
7 | If the job happens to be with one of the many companies like Revature that offer to train you for free before contracting you out, read this [Hire Beware blog post about some warning signs for less-than-ideal opportunities](https://github.com/TheOdinProject/blog/blob/main/hire-beware.md). Part of the reason for qualifying the leads is to make sure you don't get sucked into a process and waste a bunch of time applying to jobs that you wouldn't actually take anyway. That's surprisingly easy. You'll still be able to send out "practice" applications, but at least now you know which companies are worth sending those out to.
8 |
9 | Some other criteria to think about in the "nice-to-have" column:
10 |
11 | - How easily can I continue to learn at that job?
12 | - Is there access to mentors and teaching?
13 | - How good are my peers who I can learn from?
14 | - How much would I like going into work each day?
15 | - What are the job-security risks of the job? Corporations aren't lock-tight just because they're big... they go through restructuring phases and lay off people with little good reason.
16 | - Does it pay well enough to support me?
17 | - Does its location fit the needs of me and my family?
18 | - How long do I want this (first) job for?
19 |
--------------------------------------------------------------------------------
/getting_hired/preparing_for_job_search/how_this_course_will_work.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 | You've been figuring out this web development stuff and building apps for a long time now and it's finally time to get paid to keep learning by working for someone else.
3 |
4 | You're absolutely capable of getting a job but it's rarely easy to find one. You'll have to be honest with yourself about what you want and what you can offer and tackle the challenge of getting hired with the same rigor and structure that has gotten you this far.
5 |
6 | This is as much an odds game as anything is, especially for first-time employees who haven't been "proven" by past experience. That means you'll get your fair share of rejection along the way but everyone does. You just need to keep building your skills and portfolio to make yourself a stronger candidate while continuing to send applications and get yourself out there every day.
7 |
8 | This course will lay out a structured path to follow which should help you avoid some of the pitfalls of just diving into the process without a plan. **Read through this course completely once then use it step-by-step along the way as you go through the process**. Good luck and get after it!
9 |
10 | ### Format
11 |
12 | This course is structured a bit differently than the others because it's much more about you getting out there than it is about learning a specific skill or building a specific project. There are a couple projects which you'll be asked to do but most of the structure here exists to scaffold your job search process.
13 |
14 | ### In each lesson:
15 |
16 | 1. We'll introduce the topic and provide you with its context in your overall search.
17 | 2. You'll be asked to do readings, watch videos, do online courses or otherwise consume content to help you out.
18 | 3. You'll often be asked to do specific tasks, for instance keeping track of the applications you've submitted. This is purely to help you along the way.
19 | 5. Finally, we'll include additional helpful resources and other potentially useful tidbits at the end of each lesson.
20 |
21 | ### Enough talk, go get hired!
22 |
--------------------------------------------------------------------------------
/getting_hired/preparing_for_job_search/strategy.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | The first step is to have a strategy. You've come this far with a deliberate and strategic approach to learning, why abandon it at the most important phase? Getting a job can itself be a full-time job so use your time wisely and plan ahead. There are some things you can and should do ahead of time, which we will cover in greater depth below.
4 |
5 | The path to working takes the following form:
6 |
7 | 1. Figure out your needs and skills
8 | 2. Figure out what companies need and offer
9 | 3. Increase your odds by laying the groundwork early
10 | 4. Collect job leads
11 | 5. Qualify job leads
12 | 6. Reach out and apply
13 | 7. Interview
14 | 8. Handle the offer(s)
15 | 9. Profit??
16 |
17 | You'll notice that it's quite structured. Some things are more optional than others, but you've got to have a plan or you'll find yourself spamming your resume out to every job post on every job board and wondering why you haven't had any success. Or maybe you'll end up going through a long and painful process and realizing you never wanted that job anyway -- a total waste of time.
18 |
19 | We'll also cover some alternate paths you can take like finishing up your education at a coding bootcamp and how you can contribute to open source projects (like this one) to boost your "real world" experience.
20 |
21 | ### Assignment
22 |
23 | A fantastic place to start your "getting hired" journey is this **[very thorough article from Happy Bear Software on How to Get A Programmer Job](https://web.archive.org/web/20160925155912/http://www.happybearsoftware.com/how-to-get-a-programmer-job.html)**.
24 |
25 | Now get your head out of the clouds, stop dreaming about how you'll get hired, and actually do it!
26 |
27 | ### Additional resources
28 |
29 | This section contains helpful links to other content. It isn't required, so consider it supplemental.
30 |
31 | - [Getting your first IT job from InformationWeek](https://www.informationweek.com/team-building-and-staffing/how-to-land-your-first-it-job)
32 | - [Engineer’s Guide to US Visas](http://blog.sourcing.io/visa-guide)
33 | - [Lessons from a Silicon Valley Job Search by Robert Heaton](https://robertheaton.com/2014/03/07/lessons-from-a-silicon-valley-job-search/)
34 |
--------------------------------------------------------------------------------
/intermediate_html_css/forms/project_sign_up_form/imgs/odin-lined.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/intermediate_html_css/forms/project_sign_up_form/imgs/odin-lined.png
--------------------------------------------------------------------------------
/intermediate_html_css/forms/project_sign_up_form/imgs/sign-up-form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/intermediate_html_css/forms/project_sign_up_form/imgs/sign-up-form.png
--------------------------------------------------------------------------------
/intermediate_html_css/grid/project_admin_dashboard/imgs/dashboard-project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/intermediate_html_css/grid/project_admin_dashboard/imgs/dashboard-project.png
--------------------------------------------------------------------------------
/intermediate_html_css/intermediate_html_concepts/emmet/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/intermediate_html_css/intermediate_html_concepts/emmet/imgs/00.png
--------------------------------------------------------------------------------
/intermediate_html_css/intermediate_html_concepts/emmet/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/intermediate_html_css/intermediate_html_concepts/emmet/imgs/01.png
--------------------------------------------------------------------------------
/intermediate_html_css/intermediate_html_concepts/emmet/imgs/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/intermediate_html_css/intermediate_html_concepts/emmet/imgs/02.png
--------------------------------------------------------------------------------
/intermediate_html_css/intermediate_html_concepts/emmet/imgs/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/intermediate_html_css/intermediate_html_concepts/emmet/imgs/03.png
--------------------------------------------------------------------------------
/intermediate_html_css/intermediate_html_concepts/introduction.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This is the first of the two part course where we dig deeper into HTML and CSS.
4 |
5 | Our foundations lessons by design only scratched the surface of what's possible. We wanted to give you all of the bare necessities for getting started so you could move on and be somewhat productive as quickly as possible, but now it's time to slow down and dig in!
6 |
7 | You have probably realized by now that there are many more HTML elements than we mentioned in our foundations content. Throughout this course, we'll be hitting the rest of the important elements such as forms and tables.
8 |
9 | There is also a _lot_ more that you can do with CSS that you'll learn throughout this course, such as variables, functions, shadows and of course grid layouts! So buckle up! By the time you finish this course, you'll be able to recreate just about any web design you can find on the internet... which is an important skill to carry forward. Even if you are not shooting for a front-end specific job, being able to make your portfolio pieces look nice is important when it comes to making yourself stand out.
10 |
11 | You'll learn about animations, accessibility, and responsive design in the second part of this course later in the curriculum.
12 |
13 | ### Assignment
14 |
15 |
16 | 1. Read through this [HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) to get an overview of what other HTML elements are available to you. No need to commit this to memory because you'll be learning the important parts as we go, but having a glance now will help the content stick later.
17 | 2. Take a glance at a somewhat overwhelming looking [CSS Cheat Sheet](https://htmlcheatsheet.com/css/). Again, we don't need you to learn anything specific, or memorize anything from this list. Just use it to get a feel for what you still have left to learn!
18 |
19 |
20 | ### Additional resources
21 |
22 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
23 |
24 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
25 |
--------------------------------------------------------------------------------
/javascript/asynchronous_javascript_and_apis/working_with_apis/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/javascript/asynchronous_javascript_and_apis/working_with_apis/imgs/00.png
--------------------------------------------------------------------------------
/javascript/computer_science/hash_map_data_structure/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/javascript/computer_science/hash_map_data_structure/imgs/00.png
--------------------------------------------------------------------------------
/javascript/computer_science/hash_map_data_structure/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/javascript/computer_science/hash_map_data_structure/imgs/01.png
--------------------------------------------------------------------------------
/javascript/computer_science/project_knights_travails/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/javascript/computer_science/project_knights_travails/imgs/00.png
--------------------------------------------------------------------------------
/javascript/computer_science/project_knights_travails/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/javascript/computer_science/project_knights_travails/imgs/01.png
--------------------------------------------------------------------------------
/javascript/finishing_up_with_javascript/conclusion.md:
--------------------------------------------------------------------------------
1 | ### The end of the JavaScript course!
2 |
3 | Completing the JavaScript course is a major milestone! Congratulations! You've learned a lot of major JavaScript concepts like prototypes, closures, promises, and event loops. Take a moment to reflect on how far you've come.
4 |
5 | At this point, you can create phenomenal and dynamic frontends, all using vanilla JavaScript. However, the frontend isn't over yet. You'll be learning about accessibility, responsive design and about [React](https://react.dev/), a library for creating interfaces, in the upcoming courses. You've already experienced the pain of manually updating the DOM with respect to your underlying data changes, and that's where React simplifies the process.
6 |
7 | #### Give your feedback
8 |
9 | Before you move on to the next section, please fill out this [feedback form for the JavaScript course](https://docs.google.com/forms/d/e/1FAIpQLSeHcp46iWF5D7V7wPPHDeIHK0q5Nu0zXHZi46pP7ExVjULvZA/viewform?usp=sf_link). Your feedback is important to improve the curriculum and understand users' experience.
10 |
11 | #### Parting thoughts
12 |
13 | At the end we'd like to reiterate that learning doesn't stop here. Embrace a growth mindset and explore! Good luck!
14 |
--------------------------------------------------------------------------------
/javascript/introduction/a_quick_review.md:
--------------------------------------------------------------------------------
1 |
2 | ### Introduction
3 |
4 | This course assumes that you have a decent grasp on the fundamentals of JavaScript. If you just finished our [Foundations course](https://theodinproject.com/paths/foundations) then you should skip this review and move on to the next lesson. If it's been a while and you're coming from the Ruby courses, you will probably want to take a day or two to refresh your knowledge of the basics.
5 |
6 | ### Review
7 |
8 | Running through "part 1" of [MDN's JavaScript basics course](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) is a great idea for a refresher on the syntax. If you just want a quick reference to skim, try [LearnXinY](https://learnxinyminutes.com/docs/javascript/).
9 |
10 | Try not to worry too much about forgetting past materials after not using them for a while. As you progress through the curriculum, you will almost certainly find yourself needing to look up topics covered in Foundations that you haven't touched upon in a while. This isn't indicative of any shortcoming on your end; it's just part of being a developer.
11 |
12 | ### jQuery?
13 |
14 | Before you press on, a note about jQuery. We occasionally get questions about why we don't include jQuery in our curriculum. jQuery was very popular in the past, but has fallen out of the limelight in recent years. One of the biggest reasons it has begun to fall out of favor is that you don't *need* it anymore. When it became popular, doing things like DOM manipulation and AJAX calls were difficult in plain JavaScript, but that is no longer the case.
15 |
16 | A quick web-search on the topic will be more useful than any explanations here, and if you still want to learn it (many older codebases still use it, and you will see it on many older Stack Overflow posts) we are confident that you can pick it up quite easily by reading the [jQuery documentation](https://jquery.com/).
17 |
18 | ### Additional resources
19 |
20 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
21 |
22 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
23 |
--------------------------------------------------------------------------------
/javascript/organizing_your_javascript_code/json.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | JSON (JavaScript Object Notation) is a standardized format for structuring data. It is heavily based on the syntax for JavaScript objects. You will often encounter JSON formatted data when working with external servers or APIs - it is essentially the universal format for transmitting data on the web.
4 |
5 | Fortunately, there isn't much to learn here. We're only including a lesson on it because some formatting rules can cause confusion if you aren't aware of them. Spend 10-15 minutes going through the following resources and you'll be good to go.
6 |
7 | ### Assignment
8 |
9 |
10 |
11 | 1. This [JSON MDN tutorial]( https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) is probably all you need...
12 | 2. Read about the 2 JavaScript methods that you'll most often be using when dealing with JSON - [JSON.parse()](https://www.w3schools.com/js/js_json_parse.asp) and [JSON.stringify()](https://www.w3schools.com/js/js_json_stringify.asp).
13 | 3. Mis-formatted JSON is a common cause of errors. This [JSON formatter website](https://jsonformatter.curiousconcept.com/) lets you paste in JSON code and will search it for formatting errors.
14 |
15 |
16 |
17 | ### Additional resources
18 |
19 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
20 |
21 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
22 |
--------------------------------------------------------------------------------
/javascript/organizing_your_javascript_code/organizing_your_javascript_code_introduction.md:
--------------------------------------------------------------------------------
1 | ### Organizing your JavaScript code
2 |
3 | One of the most daunting parts of JavaScript is learning how to organize your code. The reason this subject can be so overwhelming is _not_ because JavaScript is so much more complex than other languages, but because it is incredibly forgiving! Many languages force you into using specific patterns and data structures in your code, but that is not true in JavaScript.
4 |
5 | In the beginning, this is a great thing! For example, if you just want to make a button on your webpage do something, you can set that up in a couple lines of code. However, as your program becomes more complex, it can become hard to maintain unless you take care to organize your code, and because JavaScript is such a flexible language, how you do that is entirely up to you. For many coders, making decisions about design patterns is crippling, so we're here to help.
6 |
7 | This lesson series is going to cover a few of the most common design patterns that occur in modern JavaScript code. We will discuss some pros and cons of each pattern and will give you a chance to practice using each pattern in a project.
8 |
9 | The patterns we'll be covering in this series are:
10 |
11 | - Plain Old JavaScript Objects and Object Constructors
12 | - Factory Functions and the Module Pattern
13 | - Classes
14 | - ES6 Modules
15 |
16 | Going through these will give us a chance to learn about a few other important concepts in JavaScript such as "closure", "prototypes", "IIFEs" and more! This series covers the most important parts of JavaScript after learning the basics of the language... are you ready?
17 |
18 | ### Additional resources
19 |
20 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
21 |
22 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
23 |
--------------------------------------------------------------------------------
/legal_terms_of_use.md:
--------------------------------------------------------------------------------
1 | Our terms of use are located here: https://www.theodinproject.com/terms_of_use
2 |
--------------------------------------------------------------------------------
/lesson.markdownlint-cli2.jsonc:
--------------------------------------------------------------------------------
1 | //
2 |
3 | {
4 | "config": {
5 | "extends": "./.markdownlint-cli2.jsonc",
6 | // lesson-headings
7 | // Enforces a heading order for lessons; can be disabled on a per file basis
8 | // See for details
9 | "TOP004": {
10 | "headings": [
11 | "### Introduction",
12 | "### Lesson overview",
13 | "*",
14 | "### Assignment",
15 | "#### *",
16 | "### Knowledge check",
17 | "### Additional resources"
18 | ],
19 | "match_case": true
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/license.md:
--------------------------------------------------------------------------------
1 | # License
2 |
3 | This curriculum is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).
4 |
5 | It basically means you can do whatever you want with the material as long as it's for non-commercial use but you've got to attribute the original author ([Erik Trautman](http://github.com/eriktrautman)) and share any derivative works under the same license.
6 |
--------------------------------------------------------------------------------
/markdownlint/TOP001_descriptiveLinkText/TOP001_descriptiveLinkText.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | names: ["TOP001", "descriptive-link-text"],
3 | description: "Links have descriptive text labels",
4 | tags: ["accessibility", "links"],
5 | parser: "markdownit",
6 | information: new URL(
7 | "https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP001.md"
8 | ),
9 | function: function TOP001(params, onError) {
10 | const tokensWithLinks = params.parsers.markdownit.tokens?.filter((token) =>
11 | token.children?.some((child) => child.type === "link_open")
12 | );
13 | const childrenOfTokensWithLinks = tokensWithLinks
14 | .map((tokenWithLink) => tokenWithLink.children)
15 | .flat();
16 | const linkOpenTokenIndices = childrenOfTokensWithLinks
17 | .filter((token) => token.type === "link_open")
18 | .map((linkToken) => childrenOfTokensWithLinks.indexOf(linkToken));
19 |
20 | linkOpenTokenIndices.forEach((linkOpenIndex) => {
21 | const tokensAfterLinkOpen =
22 | childrenOfTokensWithLinks.slice(linkOpenIndex);
23 | const linkContentTokens = tokensAfterLinkOpen.slice(
24 | 1,
25 | tokensAfterLinkOpen.findIndex((token) => token.type === "link_close")
26 | );
27 | const linkContentString = linkContentTokens
28 | .map((token) =>
29 | token.type === "code_inline" ? `\`${token.content}\`` : token.content
30 | )
31 | .join("");
32 |
33 | // https://regexr.com/7sdtj to test the following regex against the link text itself
34 | const isInvalid = /.*?(?
32 |
33 | Assignment content
34 |
35 |
36 |
37 | ### Knowledge check
38 |
39 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
40 |
41 | - KC item
42 |
43 | ### Additional resources
44 |
45 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
46 |
47 | - AR item
48 |
--------------------------------------------------------------------------------
/markdownlint/TOP002_noCodeInHeadings/TOP002_noCodeInHeadings.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | names: ["TOP002", "no-code-headings"],
3 | description: "No inline code in headings",
4 | tags: ["headings"],
5 | parser: "markdownit",
6 | information: new URL(
7 | "https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP002.md"
8 | ),
9 | function: function TOP002(params, onError) {
10 | const headingsWithCode = params.parsers.markdownit.tokens?.filter(
11 | (token, currIndex, tokenArray) =>
12 | tokenArray[currIndex - 1]?.type === "heading_open" &&
13 | token.children?.some((child) => child.type === "code_inline")
14 | );
15 |
16 | const codeContent = [];
17 | headingsWithCode.forEach((heading) => {
18 | // https://regexr.com/7uk28 to test the following regex
19 | const codeMatches = heading.line.match(/`.+?`/g);
20 | const codeContentDetails = codeMatches.map((codeMatch) => {
21 | const index = heading.line.indexOf(codeMatch);
22 |
23 | return { text: codeMatch, index, lineNumber: heading.lineNumber };
24 | });
25 | codeContent.push(...codeContentDetails);
26 | });
27 |
28 | codeContent.forEach((content) => {
29 | onError({
30 | lineNumber: content.lineNumber,
31 | detail: `Headings should not contain inline code.`,
32 | context: content.text,
33 | fixInfo: {
34 | lineNumber: content.lineNumber,
35 | editColumn: content.index + 1,
36 | deleteCount: content.text.length,
37 | insertText: content.text.replaceAll("`", ""),
38 | },
39 | });
40 | });
41 | },
42 | };
43 |
--------------------------------------------------------------------------------
/markdownlint/TOP002_noCodeInHeadings/tests/TOP002_test.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Text content.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - LO item
10 |
11 | ### This heading should NOT be flagged
12 |
13 | Some more content.
14 |
15 | ### This `heading` SHOULD be flagged
16 |
17 | Some content.
18 |
19 | ### This `other heading` will get `flagged` twice
20 |
21 | ### Assignment
22 |
23 |
24 |
25 | Assignment content
26 |
27 |
28 |
29 | ### Knowledge check
30 |
31 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
32 |
33 | - KC item
34 |
35 | ### Additional resources
36 |
37 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
38 |
39 | - AR item
40 |
--------------------------------------------------------------------------------
/markdownlint/TOP003_defaultSectionContent/tests/TOP003_test_content-around-list.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Text content
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | Some additional content before the list that should flag an error.
10 |
11 | - LO item
12 |
13 | Some additional content after the list that should flag an error.
14 |
15 | ### Custom section
16 |
17 | Text content
18 |
19 | ### Assignment
20 |
21 |
22 |
23 | Assignment content
24 |
25 |
26 |
27 | ### Knowledge check
28 |
29 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
30 |
31 | - KC item
32 |
33 | ### Additional resources
34 |
35 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
36 |
37 | - AR item
38 |
--------------------------------------------------------------------------------
/markdownlint/TOP003_defaultSectionContent/tests/TOP003_test_empty-section.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should flag 3 errors due to the "Lesson overview", "Knowledge check", and "Additional resources" sections being empty.
4 |
5 | ### Lesson overview
6 |
7 | ### Custom section
8 |
9 | Text content
10 |
11 | ### Assignment
12 |
13 |
14 |
15 | Assignment content
16 |
17 |
18 |
19 | ### Knowledge check
20 |
21 | ### Additional resources
22 |
--------------------------------------------------------------------------------
/markdownlint/TOP003_defaultSectionContent/tests/TOP003_test_incorrect-content.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Text content
4 |
5 | ### Lesson overview
6 |
7 | This section has the wrong text following the heading that should flag an error.
8 |
9 | - LO item
10 |
11 | ### Custom section
12 |
13 | Text content
14 |
15 | ### Assignment
16 |
17 |
18 |
19 | Assignment content
20 |
21 |
22 |
23 | ### Knowledge check
24 |
25 | - KC item that should flag an error
26 |
27 | ### Additional resources
28 |
29 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
30 |
31 | - AR item
32 |
--------------------------------------------------------------------------------
/markdownlint/TOP003_defaultSectionContent/tests/TOP003_test_missing-list.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should flag 3 errors due to the "Lesson overview", "Knowledge check", and "Additional resources" sections not containing unordered lists.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | ### Custom section
10 |
11 | Text content
12 |
13 | ### Assignment
14 |
15 |
16 |
17 | Assignment content
18 |
19 |
20 |
21 | ### Knowledge check
22 |
23 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
24 |
25 | ### Additional resources
26 |
27 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
28 |
--------------------------------------------------------------------------------
/markdownlint/TOP003_defaultSectionContent/tests/TOP003_test_missing-wrapper.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Text content
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - LO item
10 |
11 | ### Custom section
12 |
13 | Text content
14 |
15 | ### Assignment
16 |
17 | Assignment content which should flag an error due to no div wrapper with the applicable attributes being present.
18 |
19 | ### Knowledge check
20 |
21 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
22 |
23 | - KC item
24 |
25 | ### Additional resources
26 |
27 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
28 |
29 | - AR item
30 |
--------------------------------------------------------------------------------
/markdownlint/TOP003_defaultSectionContent/tests/TOP003_test_nested-and-ordered-list.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Text content
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - An item
10 | - A nested item that should flag an error
11 | - Unnested list item
12 |
13 | ### Custom section
14 |
15 | Text content
16 |
17 | ### Assignment
18 |
19 |
20 |
21 | Assignment content
22 |
23 |
24 |
25 | ### Knowledge check
26 |
27 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
28 |
29 | 1. KC item that should flag an error
30 | 1. Another KC item that should flag an error
31 |
32 | ### Additional resources
33 |
34 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
35 |
36 | - AR item
37 |
--------------------------------------------------------------------------------
/markdownlint/TOP004_lessonHeadings/tests/TOP004_test_invalid.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Text content
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - LO item
10 |
11 | ### Custom section
12 |
13 | Text content
14 |
15 | ### Assignment
16 |
17 |
18 |
19 | Assignment content
20 |
21 |
22 |
23 | ### An invalid wildcard heading
24 |
25 | The heading for this section must be a level 4 heading.
26 |
27 | ### Knowledge check
28 |
29 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
30 |
31 | - KC item
32 |
33 | ### Additional resources
34 |
35 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
36 |
37 | - AR item
38 |
--------------------------------------------------------------------------------
/markdownlint/TOP004_lessonHeadings/tests/TOP004_test_valid.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should not be flagged with any errors.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - LO item
10 |
11 | ### Custom section
12 |
13 | Text content
14 |
15 | ### Assignment
16 |
17 |
18 |
19 | Assignment content
20 |
21 | #### Extra credit
22 |
23 |
24 |
25 | ### Knowledge check
26 |
27 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
28 |
29 | - KC item
30 |
31 | ### Additional resources
32 |
33 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
34 |
35 | - AR item
36 |
--------------------------------------------------------------------------------
/markdownlint/TOP006_fullFencedCodeLanguage/TOP006_fullFencedCodeLanguage.js:
--------------------------------------------------------------------------------
1 | const LANGUAGES_WITH_ABBREVIATIONS = new Map()
2 | .set("js", "javascript")
3 | .set("rb", "ruby")
4 | .set("txt", "text")
5 | .set("md", "markdown")
6 | .set("sh", "bash")
7 | .set("yml", "yaml");
8 |
9 | module.exports = {
10 | names: ["TOP006", "full-fenced-code-language"],
11 | description:
12 | "Fenced code blocks must use the full name for a language if both full and abbreviated options are valid.",
13 | tags: ["code", "language"],
14 | parser: "markdownit",
15 | information: new URL(
16 | "https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP006.md"
17 | ),
18 | function: function TOP006(params, onError) {
19 | const fencesWithAbbreviatedName = params.lines.reduce((fences, currentLine, index) => {
20 | // https://regexr.com/7v119 to test the following regex:
21 | const fenceWithLanguageRegex = /^[`~]{3,4}[^`~]+$/;
22 | if (!fenceWithLanguageRegex.test(currentLine.trim())) {
23 | return fences;
24 | }
25 |
26 | const fenceDelimiter = currentLine.trim()[0];
27 | const delimiterEndColumn = currentLine.lastIndexOf(fenceDelimiter) + 1;
28 | const language = currentLine.substring(delimiterEndColumn);
29 |
30 | if (LANGUAGES_WITH_ABBREVIATIONS.has(language)) {
31 | fences.push({
32 | text: currentLine,
33 | languageStartingColumn: delimiterEndColumn + 1,
34 | abbreviatedName: language,
35 | fullName: LANGUAGES_WITH_ABBREVIATIONS.get(language),
36 | lineNumber: index + 1,
37 | });
38 | }
39 | return fences;
40 | }, []);
41 |
42 | fencesWithAbbreviatedName.forEach((fence) => {
43 | onError({
44 | lineNumber: fence.lineNumber,
45 | detail: `Expected: ${fence.fullName}; Actual: ${fence.abbreviatedName} `,
46 | context: fence.text,
47 | fixInfo: {
48 | editColumn: fence.languageStartingColumn,
49 | deleteCount: fence.abbreviatedName.length,
50 | insertText: fence.fullName,
51 | },
52 | });
53 | });
54 | },
55 | };
56 |
--------------------------------------------------------------------------------
/markdownlint/TOP008_useBackticksForFencedCodeBlocks/TOP008_useBackticksForFencedCodeBlocks.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | names: ["TOP008", "use-backticks-for-fenced-code-blocks"],
3 | description: "Fenced code blocks should use backticks instead of tildes",
4 | tags: ["code"],
5 | parser: "markdownit",
6 | information: new URL(
7 | "https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP008.md"
8 | ),
9 | function: function TOP008(params, onError) {
10 | const fencedCodeBlocks = params.lines.reduce((codeBlocks, currentLine, index) => {
11 | const trimmedLine = currentLine.trim();
12 |
13 | if (trimmedLine.startsWith("~~~")) {
14 | codeBlocks.push({
15 | lineNumber: index + 1,
16 | text: currentLine,
17 | tildeCount: trimmedLine.lastIndexOf("~") + 1,
18 | startingColumn: currentLine.indexOf("~") + 1,
19 | });
20 | }
21 |
22 | return codeBlocks;
23 | }, []);
24 |
25 | fencedCodeBlocks.forEach((codeBlock) => {
26 | const backtickReplacement = "`".repeat(codeBlock.tildeCount);
27 |
28 | onError({
29 | lineNumber: codeBlock.lineNumber,
30 | detail: `Expected: "${backtickReplacement}"; Actual: "${"~".repeat(
31 | codeBlock.tildeCount
32 | )}"`,
33 | context: codeBlock.text,
34 | fixInfo: {
35 | lineNumber: codeBlock.lineNumber,
36 | editColumn: codeBlock.startingColumn,
37 | deleteCount: codeBlock.tildeCount,
38 | insertText: backtickReplacement,
39 | },
40 | });
41 | });
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/markdownlint/TOP008_useBackticksForFencedCodeBlocks/tests/TOP008_test.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should flag with TOP008 errors, and no other linting errors.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - LO item
10 |
11 | ### Assignment
12 |
13 |
14 |
15 | Assignment section
16 |
17 |
18 |
19 | #### Custom section
20 |
21 | ~~~text
22 | This codeblock should flag an error as it uses tildes instead of backticks.
23 | ~~~
24 |
25 | ~~~~markdown
26 | ~~~text
27 | Parent and nested code blocks should both individually flag if tildes are used instead of backticks.
28 | ~~~
29 | ~~~~
30 |
31 | 1. List item
32 |
33 | ~~~text
34 | Indented code blocks are treated all the same.
35 | ~~~
36 |
37 | ```text
38 | Backticks are valid and will not flag errors.
39 | ```
40 |
41 | ````markdown
42 | ```text
43 | As will backticked parent and nested code blocks.
44 | ```
45 | ````
46 |
47 | ### Knowledge check
48 |
49 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
50 |
51 | - KC item
52 |
53 | ### Additional resources
54 |
55 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
56 |
57 | - AR item
58 |
--------------------------------------------------------------------------------
/markdownlint/TOP009_lessonOverviewItemsSentenceStructure/tests/TOP009_capital_letter.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should be marked with an error because one of the lesson overview items is not properly capitalized.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - Lesson overview item 1.
10 | - lesson overview item 2.
11 | - Lesson overview item 3.
12 | - Lesson overview item 4.
13 |
14 | ### Custom section
15 |
16 | Text content
17 |
18 | ### Assignment
19 |
20 |
21 |
22 | Assignment content
23 |
24 | #### Extra credit
25 |
26 |
27 |
28 | ### Knowledge check
29 |
30 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
31 |
32 | - KC item
33 |
34 | ### Additional resources
35 |
36 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
37 |
38 | - AR item
39 |
--------------------------------------------------------------------------------
/markdownlint/TOP009_lessonOverviewItemsSentenceStructure/tests/TOP009_invalid_punctuation.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should be marked with an error because one of the lesson overview items is a question.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - Lesson overview item 1.
10 | - Lesson overview item 2.
11 | - Lesson overview item 3?
12 | - Lesson overview item 5.
13 | - Lesson overview item 6
14 | - Lesson overview item 7.
15 |
16 | ### Custom section
17 |
18 | Text content
19 |
20 | ### Assignment
21 |
22 |
23 |
24 | Assignment content
25 |
26 | #### Extra credit
27 |
28 |
29 |
30 | ### Knowledge check
31 |
32 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
33 |
34 | - KC item
35 |
36 | ### Additional resources
37 |
38 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
39 |
40 | - AR item
41 |
--------------------------------------------------------------------------------
/markdownlint/TOP009_lessonOverviewItemsSentenceStructure/tests/TOP009_test_valid.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should not be flagged with any errors.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - Lesson overview item 1.
10 | - Lesson overview item 2.
11 | - Lesson overview item 3.
12 | - Lesson overview item 4.
13 |
14 | ### Custom section
15 |
16 | Text content
17 |
18 | ### Assignment
19 |
20 |
21 |
22 | Assignment content
23 |
24 | #### Extra credit
25 |
26 |
27 |
28 | ### Knowledge check
29 |
30 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
31 |
32 | - KC item
33 |
34 | ### Additional resources
35 |
36 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
37 |
38 | - AR item
39 |
--------------------------------------------------------------------------------
/markdownlint/TOP010_useLazyNumbering/TOP010_useLazyNumbering.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | names: ["TOP010", "lazy-numbering-for-ordered-lists"],
3 | description: "Ordered lists must always use 1. as a prefix (lazy numbering)",
4 | information: new URL(
5 | "https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP010.md"
6 | ),
7 | tags: ["ol"],
8 | parser: "markdownit",
9 | function: function TOP010(params, onError) {
10 | params.parsers.markdownit.tokens.forEach((token) => {
11 | // https://regexr.com/80oan to test this regex
12 | const digit = /^\s*\d+/;
13 | if (
14 | token.tag === "li" &&
15 | digit.test(token.line) &&
16 | token.info !== "1"
17 | ) {
18 | const lineNumber = token.lineNumber;
19 | const tokenLine = token.line.split(".");
20 | const lazyNumbering = tokenLine[0].replace(/\d+/, "1");
21 |
22 | onError({
23 | lineNumber: lineNumber,
24 | detail: `\n Expected: "${lazyNumbering}"\n Actual: "${tokenLine[0]}"\n`,
25 | fixInfo: {
26 | lineNumber: lineNumber,
27 | deleteCount: tokenLine[0].length,
28 | insertText: lazyNumbering,
29 | },
30 | });
31 | }
32 | });
33 | },
34 | };
35 |
--------------------------------------------------------------------------------
/markdownlint/TOP010_useLazyNumbering/tests/TOP010_test.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This file should flag with TOP010 errors, and no other linting errors.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - A LESSON OVERVIEW ITEM.
10 |
11 | ### CUSTOM SECTION HEADING
12 |
13 | CUSTOM SECTION CONTENT.
14 |
15 | ### Assignment
16 |
17 |
18 |
19 | #### OPTIONAL CUSTOM ASSIGNMENT HEADING
20 |
21 | 1. A RESOURCE OR EXERCISE ITEM
22 |
23 | - AN INSTRUCTION ITEM
24 |
25 | 1. Item One
26 | 2. Item Two
27 | 1. Child of Item Two
28 | 2. Child of Item Two
29 | 3. Item Three
30 |
31 | 1. Item One
32 | 1. Item Two
33 | 1. Child of Item Two
34 | 1. Child of Item Two
35 | 1. Item Three
36 |
37 | 1. *foo*
38 | 2. *Bar*
39 |
40 | - This is an unordered list item to test TOP010
41 | - This is another unordered list item
42 |
43 |
44 |
45 | ### Knowledge check
46 |
47 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
48 |
49 | - [A KNOWLEDGE CHECK QUESTION](A-KNOWLEDGE-CHECK-URL)
50 |
51 | ### Additional resources
52 |
53 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
54 |
55 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
56 |
--------------------------------------------------------------------------------
/markdownlint/docs/README.md:
--------------------------------------------------------------------------------
1 | # TOP Custom Markdownlint Rules
2 |
3 | This directory contains documentation for our custom rules for linting Markdown files using the markdownlint tool. These rules supplement the [default rules provided by markdownlint](https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md) to enforce our [curriculum's layout style](https://github.com/TheOdinProject/curriculum/blob/main/LAYOUT_STYLE_GUIDE.md).
4 |
--------------------------------------------------------------------------------
/markdownlint/docs/TOP001.md:
--------------------------------------------------------------------------------
1 | # `TOP001` - Descriptive link text
2 |
3 | Tags: `accessibility`, `links`
4 |
5 | Aliases: `descriptive-link-text`
6 |
7 | This rule is triggered when a link has a text label that uses the words "this" or "here", for example:
8 |
9 | ```markdown
10 | You can read more about variables in JavaScript [here](https://example.com).
11 | [This article](https://example.com) provides more information about closures.
12 | ```
13 |
14 | To fix this issue, remove the words "here" and "this" and use more descriptive text that clearly conveys the purpose or content of the link. You may need to also update the surrounding text. The following code block demonstrates how the links from above could be fixed:
15 |
16 | ```markdown
17 | You can read more about [variables in JavaScript](https://example.com).
18 | [An in-depth article about closures in JavaScript](https://example.com) provides more information.
19 | ```
20 |
21 | Note that this rule only flags text labels containing the words "this" or "here", even if the text is somewhat descriptive:
22 |
23 | ```markdown
24 | [Here is a comprehensive guide to understanding closures](https://example.com).
25 | ```
26 |
27 | In this case, it's still better to rephrase the link text to be more concise and descriptive:
28 |
29 | ```markdown
30 | [Comprehensive guide to understanding closures](https://example.com)
31 | ```
32 |
33 | Additionally, consider including relevant keywords in the link text to provide more context:
34 |
35 | ```markdown
36 | For more information, refer to the [official documentation on closures in JavaScript](https://example.com).
37 | ```
38 |
39 | ## Rationale
40 |
41 | Descriptive link text improves accessibility by providing clear and meaningful context about the link's destination. Links with text labels using the words "this" or "here" tend to be less descriptive and may not effectively convey the purpose of the link to users, especially those using assistive technologies. By using specific and relevant keywords in the link text, you can enhance the user experience and make it easier for users to understand the context and purpose of the link.
42 |
--------------------------------------------------------------------------------
/markdownlint/docs/TOP002.md:
--------------------------------------------------------------------------------
1 | # `TOP002` - No inline code in headings
2 |
3 | Tags: `headings`
4 |
5 | Aliases: `no-code-headings`
6 |
7 | This rule is triggered when a heading contains inline code. For example:
8 |
9 | ```markdown
10 | ## Using `console.log()` for Debugging
11 | ```
12 |
13 | To fix this issue, remove the inline code from the heading and rephrase it to convey the same meaning without using code:
14 |
15 | ```markdown
16 | ## Using console.log for Debugging
17 | ```
18 |
19 | This rule's fixer currently may not work correctly if there are spaces within inline code blocks. For example, the following scenario would have the default rule [MD038 - no spaces in code](https://github.com/DavidAnson/markdownlint/blob/main/doc/md038.md) run its fixer first.
20 |
21 | ```markdown
22 |
23 |
24 | ### A `space `inside a heading
25 |
26 |
27 |
28 | ### A `space`inside a heading
29 | ```
30 |
31 | Notice how the space has been removed from inside the inline code block, but the code block has not been removed. Running the fix command will remove the inline code, but the space would then be missing between the words "space" and "inside".
32 |
33 | ## Rationale
34 |
35 | Headings should be concise and descriptive, providing a clear overview of the section's content. Including inline code in headings can make them less readable and may not effectively convey the purpose of the section to users.
36 |
--------------------------------------------------------------------------------
/markdownlint/docs/TOP004.md:
--------------------------------------------------------------------------------
1 | # `TOP004` - Lesson headings
2 |
3 | Tags: `headings`
4 |
5 | Aliases: `lesson-headings`
6 |
7 | The rule is triggered when the headings in the document do not match the specified list of required headings. It compares each heading in the document with the corresponding required heading and reports any mismatches.
8 |
9 | Currently, the required headings depend on the content's type:
10 |
11 | ## Lesson headings structure
12 |
13 | ```markdown
14 | ### Introduction
15 | ### Lesson Overview
16 | ### A Custom Heading
17 | * (Wildcard: Any heading at the same or lower level)
18 | ### Assignment
19 | #### * (Wildcard: Any subheading at the h4 level)
20 | ### Knowledge Check
21 | ### Additional Resources
22 | ```
23 |
24 | The wildcard symbol * represents any heading text at the specified level. This means that any heading at the specified level will be considered valid, regardless of its actual text content.
25 |
26 | ## Project headings structure
27 |
28 | ```markdown
29 | ### Introduction
30 | * (Wildcard: Any heading at the same level or lower level)
31 | ### Assignment
32 | * (Wildcard: Any heading at the same level or lower level)
33 | ```
34 |
35 | Similar to the lesson headings structure, the wildcard symbol * in the project headings structure allows for any heading text at the specified level.
36 |
37 | ## Rationale
38 |
39 | Enforcing a consistent heading structure improves readability, organization, and navigation. By specifying a required heading structure, authors can ensure that their documents follow a standardized format and include all the necessary sections. This rule helps maintain consistency across multiple documents and makes it easier for readers to locate specific information.
40 |
--------------------------------------------------------------------------------
/markdownlint/docs/TOP006.md:
--------------------------------------------------------------------------------
1 | # `TOP006` - Use full language name for fenced code blocks
2 |
3 | Tags: `code`, `language`
4 |
5 | Aliases: `full-fenced-code-language`
6 |
7 | The rule is triggered when a language is specified for a fenced code block that uses a valid abbreviated name instead of the full language name.
8 |
9 | In this repo, the expected languages for this to affect are:
10 |
11 | - `js` => `javascript`
12 | - `rb` => `ruby`
13 | - `md` => `markdown`
14 | - `txt` => `text`
15 | - `sh` => `bash`
16 | - `yml` => `yaml`
17 |
18 | Other languages that have abbreviated names, such as HTML and CSS, are not affected by this rule, as only the abbreviated forms are valid options.
19 |
20 | ## Rationale
21 |
22 | Alongside other rules such as code block delimiters, list styles, and blank lines, the purpose of this rule is to enforce consistency within and between our files.
23 |
--------------------------------------------------------------------------------
/markdownlint/docs/TOP007.md:
--------------------------------------------------------------------------------
1 | # `TOP007` - Use markdown links
2 |
3 | Tags: `links`, `html`
4 |
5 | Aliases: `use-markdown-links`
6 |
7 | The rule is triggered when an anchor tag with an href attribute is used for a link **outside** of a code block (whether fenced or inline).
8 |
9 | These links should be written as markdown links instead of anchors.
10 |
11 | ```markdown
12 |
13 |
The Odin Project
14 |
15 |
16 | [The Odin Project](https://www.theodinproject.com/)
17 | ```
18 |
19 | The `knowledge-check-link` class is not longer required for knowledge check links.
20 |
21 | ```markdown
22 |
23 | -
Text
24 |
25 |
26 | - [Text](#link-here)
27 | ```
28 |
29 | ## Exceptions
30 |
31 | - Any anchors inside code blocks.
32 | - Any anchors used for a codepen embed, as these do not require changing to markdown links.
33 |
34 | ## Rationale
35 |
36 | `markdownlint` is unable to lint HTML anchors with the same link-based rules as with markdown links. Therefore, anchors that would error with the [TOP001 (Descriptive link text)](https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP001.md) rule would not error as an anchor. Converting to a markdown link will allow such rules to be used on it.
37 |
38 | Other linting rules also cannot be used on most anchors' text, due to the way markdown parsers tokenize HTML elements when no blank lines are included (related to [TOP005 (Blanks around multiline HTML tags)](https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md)). `_` emphasis markers (which should be `*`) will not trigger errors.
39 |
40 | Anchors will also not automatically include `target="_blank"` or `rel="noopener noreferrer"` unless they are manually included. Markdown links are automatically converted by the web app to anchors with both of those attributes.
41 |
42 | Anchors that are not used for this purpose (e.g. for Codepen embeds, as code inside code blocks etc.) do not require action.
43 |
--------------------------------------------------------------------------------
/markdownlint/docs/TOP008.md:
--------------------------------------------------------------------------------
1 | # `TOP008` - Use backticks for fenced code blocks
2 |
3 | Tags: `code`
4 |
5 | Aliases: `use-backticks-for-fenced-code-blocks`
6 |
7 | This rule is triggered when a fenced code block uses tildes (`~`) as its delimiters instead of backticks (`` ` ``). The rule applies regardless of whether three or four tildes are used.
8 |
9 | ````markdown
10 | ~~~text
11 | This fenced code block uses tildes, which will flag an error
12 | ~~~
13 |
14 | ```text
15 | You should use backticks instead
16 | ```
17 | ````
18 |
19 | ## Rationale
20 |
21 | Consistent formatting makes it easier to understand a document.
22 |
23 | Markdown lint's [MD048 rule](https://github.com/DavidAnson/markdownlint/blob/main/doc/md048.md) already covers this check, but does not include fix information, therefore can only be used to raise errors for manual fixing. This custom rule enforces the same style but includes fix information that can be used alongside our fix scripts.
--------------------------------------------------------------------------------
/markdownlint/docs/TOP009.md:
--------------------------------------------------------------------------------
1 | # `TOP009`: Lesson overview items sentence structure
2 |
3 | Tags: `content`
4 |
5 | Aliases: `lesson-overview-items-sentence-structure`
6 |
7 | This rule is triggered when a lesson overview item doesn't end with a period `.` or doesn't start with a capital letter. For example:
8 |
9 | ```markdown
10 | - Lesson overview item 1
11 | - Lesson overview item 2?
12 | - lesson overview item 3.
13 | ```
14 |
15 | To fix this issue, make sure that each bullet point ends with a period `.` and starts with a capital letter, rewording if you need to fix grammar since these should not be questions.
16 |
17 | ```markdown
18 | - Lesson overview item 1.
19 | - Lesson overview item 2.
20 | - Lesson overview item 3.
21 | ```
22 |
23 | ## Rationale
24 |
25 | Lesson overview items should follow a consistent structure. They must tell the user what the lesson is about via brief overview statements, and must not be conveyed in the form of a question that the user is expected to be able to answer after completing the lesson.
26 |
--------------------------------------------------------------------------------
/markdownlint/docs/TOP010.md:
--------------------------------------------------------------------------------
1 | # `TOP010` - Use lazy numbering within ordered lists
2 |
3 | Tags: `ol`
4 |
5 | Aliases: `lazy-numbering-for-ordered-lists`
6 |
7 | This rule is triggered when lazy-numbering is not used in ordered lists. Specifically we only want `1.` and not other numbers.
8 |
9 | ```markdown
10 | 1. ONE
11 | 2. TWO
12 | 1. child one
13 | 2. child two
14 | 3. THREE
15 |
16 | Running a fix:* script will fix the above example.
17 |
18 | 1. ONE
19 | 1. TWO
20 | 1. child one
21 | 1. child two
22 | 1. THREE
23 | ```
24 |
25 | ## Rationale
26 |
27 | Consistent formatting makes it easier to understand a document.
28 |
29 | Markdown lint's [MD029 rule](https://github.com/DavidAnson/markdownlint/blob/main/doc/md029.md) already covers this check, but does not include fix information, therefore can only be used to raise errors for manual fixing. This custom rule enforces the same style but includes fix information that can be used alongside our fix scripts.
30 |
--------------------------------------------------------------------------------
/nodeJS/introduction_to_nodeJS/debugging_node.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Up until this point, you've likely only relied on the browser's DevTools to debug your code.
When it comes to debugging Node and server side code, VS Code has a handy built-in debugger that you can use to debug directly in your editor! Additionally, you can also set Google Chrome up to debug Node and get the full benefits of the Chrome DevTools. Ultimately, this lesson will familiarize you with the Node debugger, which is a critical tool at this point in your learning, and will likely be a key tool you use daily in your professional life.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - Use the VS Code built-in Node debugger.
10 | - Use the Chrome DevTools to debug Node.
11 |
12 | ### Assignment
13 |
14 |
15 |
16 | - Watch this [video tutorial about Node.js debugging in VS Code](https://www.youtube.com/watch?v=2oFKNL7vYV8&ab_channel=VisualStudioCode) to see the process in action.
17 | - Check out the official [VS Code Node debugger documentation](https://code.visualstudio.com/docs/nodejs/nodejs-debugging). Take note of the JavaScript Debug Terminal- this is an easy way to get the debugger running!
18 | - Read this [article](https://web.archive.org/web/20230923074524/https://www.section.io/engineering-education/debug-node-devtools/) for a tutorial on how to debug Node with Chrome. NOTE: You can ignore anything that refers to debugging remote apps- you'll be debugging local apps.
19 |
20 |
21 |
22 | ### Knowledge check
23 |
24 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
25 |
26 | - [What are two ways to debug Node?](#two-ways)
27 |
28 | ### Additional resources
29 |
30 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
31 |
32 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
33 |
--------------------------------------------------------------------------------
/nodeJS/introduction_to_nodeJS/project_basic_informational_site.md:
--------------------------------------------------------------------------------
1 | ### A Node website!
2 |
3 | By now you should know enough to be dangerous. There's *definitely* more to learn but you already know enough about Node to actually make something! So let's do it! You will be creating a very basic informational site that contains 4 pages: index, about, contact-me and 404. Keep in mind that the content of these pages isn't really all that important. So there's no need to spend a lot of time filling them up or trying to make them look pretty.
4 |
5 | If you get stuck at anytime, feel free to go back to the [Getting Started lesson](https://www.theodinproject.com/lessons/nodejs-getting-started), especially the W3 schools tutorial at the end.
6 |
7 | ### Assignment
8 |
9 |
10 |
11 | 1. Make a project directory and create the following files inside that directory:
12 | - index.html
13 | - about.html
14 | - contact-me.html
15 | - 404.html
16 |
17 | 2. Create your node.js server file `index.js` and add the code needed to serve the right page according to the url.
18 | - [localhost:8080](http://localhost:8080) should take users to index.html
19 | - [localhost:8080/about](http://localhost:8080/about) should take users to about.html
20 | - [localhost:8080/contact-me](http://localhost:8080/contact-me) should take users to contact-me.html
21 | - 404.html should display any time the user tries to go to a page not listed above.
22 |
23 |
24 | ### Submitting a solution
25 | If you're planning to submit a live demo with your student solution, one of the easiest ways to do that is using Replit. To do this:
26 |
27 | 1. Go to [replit.com](https://replit.com)
28 | 2. Create a new repl
29 | 3. Enter the url for your submission github repo and click "Import from GitHub"
30 | 4. Change the language to Node.js
31 | 5. Click the "Run" button and you should get the URL to your demo in the URL bar of the repl's web view.
32 |
--------------------------------------------------------------------------------
/nodeJS/orms/project_file_uploader.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | In this project, we'll be building a stripped down version of [Google Drive](https://www.google.com/drive/) (or any other personal storage service).
4 |
5 | ### Assignment
6 |
7 |
8 |
9 | 1. Set up a new project using Express and Prisma. Install all the necessary dependencies including Passport etc.
10 | 1. Set up session based authentication using Passport.js. Use the [Prisma session store library](https://github.com/kleydon/prisma-session-store#readme) to persist sessions in the database.
11 | 1. Add a form where authenticated users can upload a file. Save the file in your filesystem for now. You'll need to integrate the [multer middleware](https://github.com/expressjs/multer). We'll upload these files once we have all other features working.
12 | 1. Add folders. Users should be able to CRUD folders and upload files in them. Set up routes and necessary database interactions for this.
13 | 1. Add a route to view specific file details like name, size, and upload time. There should be a download button to allow users to download the file.
14 | 1. Finally, add logic to upload files. You could store it in a database, but it's advised to use a cloud storage service for this usecase. You can use [Cloudinary](https://cloudinary.com/) or [Supabase storage](https://supabase.com/docs/guides/storage). When a file is uploaded, save the file URL in the database.
15 |
16 | #### Extra credit
17 |
18 | - Add a share folder functionality. When a user wants to share a folder (and all of its contents), they should have a form to specify the duration i.e. 1d, 10d etc. This should generate a link that can be shared with anyone (unauthenticated users). For example, the link could be in the following format: `https://yourapp.com/share/c758c495-0705-44c6-8bab-6635fd12cf81`
19 |
20 |
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "curriculum",
3 | "version": "1.0.0",
4 | "description": "[The Odin Project](https://www.theodinproject.com/) (TOP) is an open-source curriculum for learning full-stack web development. Our curriculum is divided into distinct courses, each covering the subject language in depth. Each course contains a listing of lessons interspersed with multiple projects. These projects give users the opportunity to practice what they are learning, thereby reinforcing and solidifying the theoretical knowledge learned in the lessons. Completed projects may then be included in the user's portfolio.",
5 | "scripts": {
6 | "lint:lesson": "markdownlint-cli2 --config lesson.markdownlint-cli2.jsonc",
7 | "lint:project": "markdownlint-cli2 --config project.markdownlint-cli2.jsonc",
8 | "fix:lesson": "markdownlint-cli2 --fix --config lesson.markdownlint-cli2.jsonc",
9 | "fix:project": "markdownlint-cli2 --fix --config project.markdownlint-cli2.jsonc"
10 | },
11 | "license": "CC BY-NC-SA 4.0",
12 | "devDependencies": {
13 | "markdownlint-cli2": "^0.12.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/project.markdownlint-cli2.jsonc:
--------------------------------------------------------------------------------
1 | // https://github.com/DavidAnson/markdownlint
2 |
3 | {
4 | "config": {
5 | "extends": "./.markdownlint-cli2.jsonc",
6 | // lesson-headings
7 | // Enforces a heading order for lessons; can be disabled on a per file basis
8 | // See https://github.com/DavidAnson/markdownlint#configuration for details
9 | "TOP004": {
10 | "headings": ["### Introduction", "*", "### Assignment", "*"],
11 | "match_case": true
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/react/getting_started_with_react/react_components/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/react/getting_started_with_react/react_components/imgs/00.png
--------------------------------------------------------------------------------
/react/getting_started_with_react/what_is_jsx/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/react/getting_started_with_react/what_is_jsx/imgs/00.png
--------------------------------------------------------------------------------
/react/introduction/how_this_course_will_work.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Hello there, and welcome to The Odin Project’s React course. In this course, we'll start by learning about the basics of React and then move on to more advanced concepts. We'll be building projects along the way that you can add to your portfolio to impress recruiters with your React skills.
4 |
5 | Make sure you’ve completed our [JavaScript course](https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript) before starting this one. We can’t emphasize enough how important it is to have a solid understanding of JavaScript before diving into React. At the end of the day, React *is* vanilla JavaScript, so being able to navigate JavaScript is paramount to building a successful React project.
6 |
7 | ### The journey ahead
8 |
9 | All the lessons follow a similar structure that you'll be accustomed to from prior courses: lesson content followed by assignments. We've also incorporated interactive examples via CodeSandbox to demonstrate the concepts you'll learn in those lessons.
10 |
11 | As always, we'll preface this by saying that learning a new technology can be a frustrating endeavor, but we're confident you can persevere. There might be times when you think to yourself, “I can do this with vanilla JavaScript, why am I even learning React?” and that's fine. As you work through the lessons, you'll soon realize how convenient React can be in front-end development. Remember the dreaded [Todo List project](https://www.theodinproject.com/lessons/node-path-javascript-todo-list) from the JavaScript course? In React, it would typically take less time to build the core functionality. That should get you excited. By the end of the course, you’ll be a React Guru!
12 |
13 | Now then,
14 |
15 | ### Let’s start Reactin’
16 |
--------------------------------------------------------------------------------
/react/introduction/setting_up_a_react_environment/imgs/vite_react_homepage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/react/introduction/setting_up_a_react_environment/imgs/vite_react_homepage.png
--------------------------------------------------------------------------------
/react/more_react_concepts/managing_state_with_context_api/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/react/more_react_concepts/managing_state_with_context_api/imgs/00.png
--------------------------------------------------------------------------------
/react/react_and_the_backend/project_messaging_app.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Think of your favorite messaging app - Discord, Telegram, WhatsApp, Facebook Messenger, AOL Instant Messenger, etc. - and imagine what it would be like if you could build your own. This project will give you a chance to do just that. You'll be building a web app that allows users to send messages to each other.
4 |
5 | ### Assignment
6 |
7 |
8 |
9 | 1. Keep in mind that the apps we mentioned earlier have entire teams of developers working on them, so you shouldn't feel the need to go overboard with features in your app. At a minimum, though, your app should include the following core functionality:
10 | 1. Authorization
11 | 1. Sending messages to another user
12 | 1. Customizing a user profile
13 | 1. Spend some time planning out your app. What will the user interface look like? What will the data model look like? What libraries will you need to use?
14 | 1. Start building your app by implementing the core functionality in your backend and frontend.
15 | 1. You may have realized that a REST API backend cannot handle real time updates. It is "request-response", so the server can only respond to a request. If a user sends a message to another user, a REST API cannot automatically notify the recipient as the recipient will not have requested that data. Methods for real time server-client updates (particularly when dealing with a split front/backend) have not been taught, so you are not expected to implement any in this app.
16 | 1. Deploy your app to the web and showcase it in the submissions below as well as on our Discord. We'd love to see what you've built!
17 |
18 | #### Extra credit
19 |
20 | - Allow sending images in chat
21 | - Add a friends list that users can add other users to and see when someone is online (alternative: "Add a users list to show which users are currently online"; same thing except maybe a step or two less since it doesn't require adding a friend)
22 | - Allow users to create and send messages in group chats
23 |
24 |
25 |
--------------------------------------------------------------------------------
/react/states_and_effects/introduction_to_state/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/react/states_and_effects/introduction_to_state/imgs/00.png
--------------------------------------------------------------------------------
/react/states_and_effects/more_on_state/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/react/states_and_effects/more_on_state/imgs/00.png
--------------------------------------------------------------------------------
/react/states_and_effects/project_memory_card.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Here we go again with a new project! Let's make sure you understand the concepts so far. The main goal of this project is to implement the concepts learned so far by using hooks to manage and utilize state while fetching and using data from an external API.
4 |
5 | ### How the game works
6 |
7 | Go play around with this [student's solution](https://heldersrvio.github.io/memory-card-game/) to find out for yourself how the Memory game works. Although this example uses cartoon characters, you can use anything you like for your game.
8 |
9 | ### Assignment
10 |
11 |
12 |
13 | 1. Create a new React Project.
14 | 1. Take some time to think about the features you want to implement, which components you need, how to structure your application, and how to get the images from an API. Your application should include a scoreboard, which counts the current score, and a "Best Score", which shows the highest score you've achieved thus far. There should be a function that displays the cards in a random order anytime a user clicks one. Be sure to invoke that function when the component mounts.
15 | 1. You also need a handful of cards that display images and possibly informational text. These images and texts need to be fetched from an external API. You can use anything from [Giphy](https://giphy.com/) to a [Pokemon API](https://pokeapi.co/).
16 | 1. Now that you've thought about the structure of your application, set up the folder structure and start creating the components.
17 | 1. Style your application so you can show it off!
18 | 1. As always, push the project to GitHub, and don't forget to deploy it.
19 |
20 |
21 |
--------------------------------------------------------------------------------
/ruby/automated_testing/test_driven_development/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/automated_testing/test_driven_development/imgs/00.png
--------------------------------------------------------------------------------
/ruby/automated_testing/test_driven_development/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/automated_testing/test_driven_development/imgs/01.png
--------------------------------------------------------------------------------
/ruby/automated_testing/test_driven_development/imgs/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/automated_testing/test_driven_development/imgs/02.png
--------------------------------------------------------------------------------
/ruby/automated_testing/test_driven_development/imgs/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/automated_testing/test_driven_development/imgs/03.png
--------------------------------------------------------------------------------
/ruby/automated_testing/test_driven_development/imgs/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/automated_testing/test_driven_development/imgs/04.png
--------------------------------------------------------------------------------
/ruby/basic_ruby/debugging/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/basic_ruby/debugging/imgs/00.png
--------------------------------------------------------------------------------
/ruby/basic_ruby/debugging/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/basic_ruby/debugging/imgs/01.png
--------------------------------------------------------------------------------
/ruby/basic_ruby/enumerable_exercises.md:
--------------------------------------------------------------------------------
1 | ### Enumerable exercises
2 | #### 1. Write a program that prints **each** item in a array to the console.
3 |
4 | Here are some sample arrays to test your code:
5 |
6 | ```ruby
7 | [1, 2, 3, 4, 5]
8 |
9 | #=> 1
10 | #=> 2
11 | #=> 3
12 | #=> 4
13 | #=> 5
14 | ```
15 |
16 | ```ruby
17 | ['oh', 'no', 'pls', 'stahp', 'undo']
18 |
19 | #=> 'oh'
20 | #=> 'no'
21 | #=> 'pls'
22 | #=> 'stahp'
23 | #=> 'undo'
24 | ```
25 |
26 | #### 2. Write a program that multiplies each number in a array by 10 and returns a new array with the larger numbers.
27 |
28 | Here are some sample arrays to test your code:
29 |
30 | `[1, 2, 3, 4]`
31 | `#=> [10, 20, 30, 40]`
32 |
33 | `[10, 20, 30, 40, 50]`
34 | `#=> [100, 200, 300, 400, 500]`
35 |
36 |
37 | #### 3. Write a program that **selects** all the numbers that are less than 10 and returns them in a new array.
38 |
39 | Here are some sample arrays to test your code:
40 |
41 | `[10, 2, 3, 4, 78, 8, 67, 25]`
42 | `#=> [2, 3, 4, 8]`
43 |
44 | `[1, 22, 3, 7, 50, 89, 9]`
45 | `#=> [1, 3, 7, 9]`
46 |
47 | #### 4. Write a program that returns the sum of all the numbers in an array.
48 |
49 | Here are some sample arrays to test your code:
50 |
51 | `[10, 20, 30, 40]`
52 | `#=> 100`
53 |
54 | `[1, 2, 3, 7, 10]`
55 | `#=> 20`
56 |
57 | #### 5. Write a program that returns `true` if a array **includes** 15. Otherwise, it should return `false`.
58 |
59 | Here are some sample arrays to test your code:
60 |
61 | `[10, 15, 30, 40]`
62 | `#=> true`
63 |
64 | `[1, 2, 3, 14, 16]`
65 | `#=> false`
66 |
67 | #### 6. Write a program that returns `true` if **all** the elements in an array are greater than 10. Otherwise, it should return `false`.
68 |
69 | Here are some sample arrays to test your code:
70 |
71 | `[10,20,30,40]`
72 | `#=> true`
73 |
74 | `[1,2,3,4,5]`
75 | `#=> false`
76 |
77 | `[1,10,2,20,3,30]`
78 | `#=> false`
79 |
80 | #### 7. Write a program that returns `true` if **any** numbers in an array are greater than 10. Otherwise, it should return `false`.
81 |
82 | Here are some sample arrays to test your code:
83 |
84 | `[10,20,30,40]`
85 | `#=> true`
86 |
87 | `[2,8,17,89,50,3]`
88 | `#=> true`
89 |
90 | `[1,2,3,4,5]`
91 | `#=> false`
92 |
--------------------------------------------------------------------------------
/ruby/basic_ruby_projects/bubble_sort/imgs/00.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/basic_ruby_projects/bubble_sort/imgs/00.gif
--------------------------------------------------------------------------------
/ruby/basic_ruby_projects/project_bubble_sort.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Sorting algorithms are some of the earliest that you typically get exposed to in Computer Science. It may not be immediately obvious how important they are, but it shouldn't be hard to think of some examples where your computer needs to sort some massive datasets during everyday operations.
4 |
5 | One of the simpler (but more processor-intensive) ways of sorting a group of items in an array is **bubble sort**, where each element is compared to the one next to it and they are swapped if the one on the left is larger than the one on the right. This continues until the array is eventually sorted.
6 |
7 | Check out this [video from Harvard’s CS50 on Bubble Sort](https://www.youtube.com/watch?v=8Kp-8OGwphY).
8 |
9 | There's also [an entry on Bubble Sort on Wikipedia](http://en.wikipedia.org/wiki/Bubble_sort) that's worth taking a look at.
10 |
11 | 
12 |
13 | ### Assignment
14 |
15 |
16 |
17 | - Build a method `#bubble_sort` that takes an array and returns a sorted array. It must use the bubble sort methodology (using `#sort` would be pretty pointless, wouldn't it?).
18 |
19 | ```ruby
20 | > bubble_sort([4,3,78,2,0,2])
21 | => [0,2,2,3,4,78]
22 | ```
23 |
24 |
25 |
--------------------------------------------------------------------------------
/ruby/basic_ruby_projects/project_caesar_cipher.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | By now you should feel pretty good working with strings, arrays and hashes. We'll do a couple of classic "intro to programming" problems in the next few lessons to help solidify your knowledge and get warmed up to working on small projects. You'll need to rely on some of your basic knowledge of conditionals and flow control from the prep work but you shouldn't need to do anything you haven't seen before.
4 |
5 |
6 |
7 | If you want to actually write and run your own Ruby code, you can either use IRB from the command line (type `irb` after the prompt), or run it from a script file using `$ ruby ./your_file_name_in_the_current_directory.rb`, or use the online editor at [replit.com](http://replit.com/languages/Ruby).
8 |
9 |
10 |
11 | ### Assignment
12 |
13 | From Wikipedia:
14 |
15 | > In cryptography, a Caesar cipher, also known as Caesar's cipher, the shift cipher, Caesar's code or Caesar shift, is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on. The method is named after Julius Caesar, who used it in his private correspondence.
16 |
17 | Harvard's CS50 class has a [video about the Caesar cipher](https://www.youtube.com/watch?v=36xNpbosfTY).
18 |
19 |
20 |
21 | Implement a Caesar cipher that takes in a string and the shift factor and then outputs the modified string using a right shift:
22 |
23 | ```ruby
24 | > caesar_cipher("What a string!", 5)
25 | => "Bmfy f xywnsl!"
26 | ```
27 |
28 | **Quick Tips:**
29 |
30 | - You will need to remember how to convert a string into a number.
31 | - Don't forget to wrap from `z` to `a`.
32 | - Don't forget to keep the same case.
33 | - The Wikipedia quote discusses a Caesar cipher using a left shift.
34 |
35 |
36 |
--------------------------------------------------------------------------------
/ruby/basic_ruby_projects/project_stock_picker.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | By now you should feel pretty good working with strings, arrays and hashes. We'll do a couple of classic "intro to programming" problems in the next few lessons to help solidify your knowledge and get warmed up to working on small projects. You'll need to rely on some of your basic knowledge of conditionals and flow control from the prep work but you shouldn't need to do anything you haven't seen before.
4 |
5 |
6 |
7 | If you want to actually write and run your own Ruby code, you can either use IRB from the command line (type `irb` after the prompt), or run it from a script file using `$ ruby ./your_file_name_in_the_current_directory.rb`, or use the online editor at [replit.com](http://replit.com/languages/Ruby).
8 |
9 |
10 |
11 | ### Assignment
12 |
13 |
14 |
15 | Implement a method `#stock_picker` that takes in an array of stock prices, one for each hypothetical day. It should return a pair of days representing the best day to buy and the best day to sell. Days start at 0.
16 |
17 | ```ruby
18 | > stock_picker([17,3,6,9,15,8,6,1,10])
19 | => [1,4] # for a profit of $15 - $3 == $12
20 | ```
21 |
22 | **Quick Tips:**
23 |
24 | - You need to buy before you can sell
25 | - Pay attention to edge cases like when the lowest day is the last day or the highest day is the first day.
26 |
27 |
--------------------------------------------------------------------------------
/ruby/basic_ruby_projects/project_sub_strings.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | By now you should feel pretty good working with strings, arrays and hashes. We'll do a couple of classic "intro to programming" problems in the next few lessons to help solidify your knowledge and get warmed up to working on small projects. You'll need to rely on some of your basic knowledge of conditionals and flow control from the prep work but you shouldn't need to do anything you haven't seen before.
4 |
5 |
6 |
7 | If you want to actually write and run your own Ruby code, you can either use IRB from the command line (type `irb` after the prompt), or run it from a script file using `$ ruby ./your_file_name_in_the_current_directory.rb`, or use the online editor at [replit.com](http://replit.com/languages/Ruby).
8 |
9 |
10 |
11 | ### Assignment
12 |
13 |
14 |
15 | Implement a method `#substrings` that takes a word as the first argument and then an array of valid substrings (your dictionary) as the second argument. It should return a hash listing each substring (case insensitive) that was found in the original string and how many times it was found.
16 |
17 | ```ruby
18 | > dictionary = ["below","down","go","going","horn","how","howdy","it","i","low","own","part","partner","sit"]
19 | => ["below","down","go","going","horn","how","howdy","it","i","low","own","part","partner","sit"]
20 | > substrings("below", dictionary)
21 | => { "below" => 1, "low" => 1 }
22 | ```
23 |
24 | Next, make sure your method can handle multiple words:
25 |
26 | ```ruby
27 | > substrings("Howdy partner, sit down! How's it going?", dictionary)
28 | => { "down" => 1, "go" => 1, "going" => 1, "how" => 2, "howdy" => 1, "it" => 2, "i" => 3, "own" => 1, "part" => 1, "partner" => 1, "sit" => 1 }
29 | ```
30 |
31 | **Quick Tips:**
32 |
33 | - Recall how to turn strings into arrays and arrays into strings.
34 |
35 |
36 |
--------------------------------------------------------------------------------
/ruby/computer_science/hash_map_data_structure/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/computer_science/hash_map_data_structure/00.png
--------------------------------------------------------------------------------
/ruby/computer_science/hash_map_data_structure/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/computer_science/hash_map_data_structure/01.png
--------------------------------------------------------------------------------
/ruby/computer_science/project_knights_travails/imgs/00.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/computer_science/project_knights_travails/imgs/00.png
--------------------------------------------------------------------------------
/ruby/computer_science/project_knights_travails/imgs/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/computer_science/project_knights_travails/imgs/01.png
--------------------------------------------------------------------------------
/ruby/conclusion/conclusion.md:
--------------------------------------------------------------------------------
1 | ### You did it!
2 |
3 | Ruby is conquered. You're now a ninja.... okay, that's a bit hyperbolic but the fact is that you now know more than enough Ruby to take on Rails like a Boss. And, actually, the real secret is that the hard part is over. Getting to this point is the most difficult part of the learning curve.
4 |
5 | Sure, you've still got plenty to learn, but the real conceptual leaps have already been made. You can think like a programmer now and should be able to figure out how to appropriately Google for pretty much anything you don't already know.
6 |
7 | If you know Ruby, the world is sort of opened up for you. Want to learn Python? That would be a whole lot easier now. Nervous about Rails? Don't be. Rails is just Ruby that's been packaged up to do lots of stuff for you. With what you know, you'll have a much easier time "seeing the matrix" and understanding what Rails is up to. Even JavaScript should make a whole lot more sense to you once we get back to it.
8 |
9 | Before you move on, we would love it if you could [send us your feedback on the Ruby course](https://docs.google.com/forms/d/e/1FAIpQLSdYksRBRg_0GzcYxzm5Csikfhj2Nceh2ifMYRmfMH6quwRRDw/viewform?usp=sf_link). Getting user (you) feedback is important so we can continue to improve the curriculum and get an idea of your experience. So that's it, you're more than ready to go ahead and take on Rails. **Congratulations!!!**
10 |
11 | ### Additional resources
12 |
13 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
14 |
15 | - [Why Ruby and Python are different](http://stackoverflow.com/questions/1113611/what-does-ruby-have-that-python-doesnt-and-vice-versa?rq=1)
16 | - [Exercism](http://exercism.org/), a site where you can grow and improve your ability to **write code** by **reading others' code** and **commenting** on it.
17 |
--------------------------------------------------------------------------------
/ruby/files_and_serialization/project_hangman.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Files are a great way to save and reload a game, so we'll give it a shot here by building [Hangman](https://www.wikihow.com/Play-Hangman).
4 |
5 | ### Assignment
6 |
7 | You will be building a command line Hangman game where one player plays against the computer, but a bit more advanced.
8 |
9 |
10 |
11 | 1. Download the `google-10000-english-no-swears.txt` dictionary file from the first20hours GitHub repository [google-10000-english](https://raw.githubusercontent.com/first20hours/google-10000-english/master/google-10000-english-no-swears.txt).
12 | 1. When a new game is started, your script should load in the dictionary and randomly select a word between 5 and 12 characters long for the secret word.
13 | 1. You don't need to draw an actual stick figure (though you can if you want to!), but do display some sort of count so the player knows how many more incorrect guesses they have before the game ends. You should also display which correct letters have already been chosen (and their position in the word, e.g. `_ r o g r a _ _ i n g`) and which incorrect letters have already been chosen.
14 | 1. Every turn, allow the player to make a guess of a letter. It should be case insensitive. Update the display to reflect whether the letter was correct or incorrect. If out of guesses, the player should lose.
15 | 1. Now implement the functionality where, at the start of any turn, instead of making a guess the player should also have the option to save the game. Remember what you learned about serializing objects.
16 | 1. When the program first loads, add in an option that allows you to open one of your saved games, which should jump you exactly back to where you were when you saved. Play on!
17 |
18 |
19 |
--------------------------------------------------------------------------------
/ruby/object_oriented_programming_basics/linting_and_rubocop/imgs/quickfixrubocop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/object_oriented_programming_basics/linting_and_rubocop/imgs/quickfixrubocop.png
--------------------------------------------------------------------------------
/ruby/object_oriented_programming_basics/linting_and_rubocop/imgs/rubocopinvsc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/object_oriented_programming_basics/linting_and_rubocop/imgs/rubocopinvsc.png
--------------------------------------------------------------------------------
/ruby/object_oriented_programming_basics/linting_and_rubocop/imgs/rubohover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheOdinProject/curriculum/80ba67975fddb2a9b02ccd35ad98a1afb85cdd76/ruby/object_oriented_programming_basics/linting_and_rubocop/imgs/rubohover.png
--------------------------------------------------------------------------------
/ruby/object_oriented_programming_basics/project_mastermind.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | If you've never played [Mastermind](https://www.wikihow.com/Play-Mastermind), it's a game where you have to guess your opponent's secret code within a certain number of turns (like hangman with colored pegs). Each turn you get some feedback about how good your guess was -- whether it was exactly correct or just the correct color but in the wrong space.
4 |
5 | ### Assignment
6 |
7 | Build a Mastermind game from the command line where you have 12 turns to guess the secret code, starting with you guessing the computer's random code.
8 |
9 |
10 |
11 | 1. Think about how you would set this problem up!
12 | 1. Build the game assuming the computer randomly selects the secret colors and the human player must guess them. Remember that you need to give the proper feedback on how good the guess was each turn!
13 | 1. Now refactor your code to allow the human player to choose whether they want to be the creator of the secret code or the guesser.
14 | 1. Build it out so that the computer will guess if you decide to choose your own secret colors. You may choose to implement a computer strategy that follows the rules of the game or you can modify these rules.
15 | 1. If you choose to modify the rules, you can provide the computer additional information about each guess. For example, you can start by having the computer guess randomly, but keep the ones that match exactly. You can add a little bit more intelligence to the computer player so that, if the computer has guessed the right color but the wrong position, its next guess will need to include that color somewhere.
16 | 1. If you want to follow the rules of the game, you'll need to research [strategies for solving Mastermind](https://puzzling.stackexchange.com/questions/546/clever-ways-to-solve-mastermind).
17 | 1. Post your solution below!
18 |
19 |
20 |
21 | ### Additional resources
22 |
23 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
24 |
25 | - Not directly helpful, but here are some [Ruby game libraries](https://www.ruby-toolbox.com/categories/game_libraries) for fun.
26 |
--------------------------------------------------------------------------------
/ruby/object_oriented_programming_basics/project_tic_tac_toe.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | Remember [Tic Tac Toe](https://en.wikipedia.org/wiki/Tic-tac-toe) (also known as "Noughts and Crosses")? It involves a couple of players, a board, checking for victory in a game loop... all the conditions that make it a fun little problem to solve using our newfound OOP sea legs. Let's build it!
4 |
5 | ### Assignment
6 |
7 | Build a tic-tac-toe game on the command line where two human players can play against each other and the board is displayed in between turns.
8 |
9 |
10 |
11 | 1. Think about how you would set up the different elements within the game... What should be a class? Instance variable? Method? A few minutes of thought can save you from wasting an hour of coding.
12 | 1. Build your game, taking care to not share information between classes any more than you have to.
13 | 1. Post your solution below, then check out this [example Tic Tac Toe solution from RosettaCode.org](http://rosettacode.org/wiki/Tic-tac-toe#Ruby).
14 |
15 |
16 |
17 | ### Additional resources
18 |
19 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
20 |
21 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
22 |
--------------------------------------------------------------------------------
/templates/lesson-template.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | A BRIEF INTRODUCTION.
4 |
5 | ### Lesson overview
6 |
7 | This section contains a general overview of topics that you will learn in this lesson.
8 |
9 | - A LESSON OVERVIEW ITEM.
10 |
11 | ### CUSTOM SECTION HEADING
12 |
13 | CUSTOM SECTION CONTENT.
14 |
15 | #### Note box variations
16 |
17 |
18 |
19 | #### A sample title
20 |
21 | A sample note box.
22 |
23 |
24 |
25 |
26 |
27 | #### level 4 heading for title is recommended
28 |
29 | A sample note box, variation: tip.
30 |
31 |
32 |
33 |
34 |
35 | #### But title is also optional
36 |
37 | A sample note box, variation: warning.
38 |
39 |
40 |
41 |
42 |
43 | A sample note box, variation: critical.
44 |
45 |
46 |
47 | ### Assignment
48 |
49 |
50 |
51 | 1. A RESOURCE ITEM
52 | - AN INSTRUCTION ITEM
53 | 1. A PRACTICE ITEM
54 | - A TASK ITEM
55 |
56 |
57 |
58 | ### Knowledge check
59 |
60 | The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
61 |
62 | - [A KNOWLEDGE CHECK QUESTION](A-KNOWLEDGE-CHECK-URL)
63 |
64 | ### Additional resources
65 |
66 | This section contains helpful links to related content. It isn't required, so consider it supplemental.
67 |
68 | - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.
69 |
--------------------------------------------------------------------------------
/templates/project-example.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | This example takes snippets from the Landing Page project in Foundations, and is meant to show how an authored project might look after following the style guide.
4 |
5 | For this project you’ll be creating an entire web page from a design we’ll provide for you. If you’ve been following along you should have the skills you need to accomplish this, but it may not be easy!
6 |
7 | ### Setting up your project’s GitHub repository
8 |
9 | As we did in the Recipe project, go ahead and set up a git repository before beginning work on this project. Git and GitHub are going to act as a portfolio for you moving forward, so you need to keep everything in there! Look back at the recipe project if you need a reminder on how to set it up.
10 |
11 | ### Assignment
12 |
13 |
14 |
15 | 1. Download the design images and take a look at what you’re going to be creating here. Image One (Full Design), Image Two (Color and Fonts)
16 |
17 | - The font that’s being used in the images is roboto.
18 | - Hero text is the statement that appears at the top of a web page.
19 |
20 | 1. There are many ways to tackle a project like this, and it can be overwhelming to look at a blank HTML document and not know where to start. Our suggestion: take it one section at a time. The website you’re creating has 4 main sections (and a footer), so pick one and get it into pretty good shape before moving on. Starting at the top is always a solid plan.
21 |
22 | #### Extra credit
23 |
24 | - This section isn't in the original Landing Page project, but we want to show what an extra credit item might look like.
25 | - Put your own spin on the project! Instead of copying the text from the design images 1:1, theme the project to your own interest or something you like.
26 |
27 |
28 |
29 | ### Viewing your project on the web
30 |
31 | There are a couple of ways to go about publishing your project, but the simplest is the following:
32 |
33 | - Make sure that the main HTML file of your project is called `index.html`. If it is not, you need to rename it.
34 |
--------------------------------------------------------------------------------
/templates/project-template.md:
--------------------------------------------------------------------------------
1 | ### Introduction
2 |
3 | A BRIEF INTRODUCTION.
4 |
5 | ### PRE-ASSIGNMENT SECTION HEADING
6 |
7 | PRE-ASSIGNMENT SECTION CONTENT.
8 |
9 | ### Assignment
10 |
11 |
12 |
13 | 1. A REQUIREMENT/USER STORY.
14 |
15 | #### Extra credit
16 |
17 | - AN OPTIONAL ADD-ON/USER STORY.
18 |
19 |
20 |
21 | ### POST-ASSIGNMENT SECTION HEADING
22 |
23 | POST-ASSIGNMENT SECTION CONTENT.
24 |
--------------------------------------------------------------------------------