├── .gitignore ├── .travis.yml ├── LICENSE.txt ├── README.md ├── index.html ├── package.json ├── screenshot.png └── test └── index_test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '6.2.1' 4 | notifications: 5 | email: false 6 | cache: 7 | directories: 8 | - node_modules 9 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Code School 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hello Code School 2 | 3 | This is a sample project to test out how projects work at Code School. For this project, you'll be creating a basic website using HTML. If you want to deploy it to a real website, we'll even walkthrough how to do that! 4 | 5 | # Getting Started 6 | 7 | To get started with this project, head over to the [Hello Code School](https://www.codeschool.com/projects/hello-code-school) project on Code School, and begin! It'll walk you through all of the steps below. They're included here in the readme in case you work better locally, or want to try working on this project offline. 8 | 9 | # Prerequisites 10 | 11 | In order to complete this project, you'll need to know the basics of HTML! Aside from that, you'll need a local computer where you can install git, and edit some files. We'll walk you through that part, so if you haven't used Git before -- don't worry. We recommend that you should have already completed Code Schools [Front-End Foundations](https://www.codeschool.com/courses/front-end-foundations) course, or have basic familiarity with HTML. When we say basic familiarity here's what we mean: 12 | 13 | * Know what an HTML tag looks like 14 | * Know some of the most common tags -- `title`, `h1`, `ul`, `li`. 15 | 16 | If you know these, you should be all set to jump in and give this project a shot! 17 | 18 | # Setup 19 | 20 | In order to get this working, you'll need to have [Git](https://git-scm.com/) installed, and have a GitHub account. If this is your first time setting up Git, I'd recommend checking out Code School's video on How to Setup Git for Code School Projects in 5 Minutes to learn what you need to know. 21 | 22 | To get started, fork this repository to your account and clone it down locally. If you want, you can also try doing this completely from GitHub! 23 | 24 | # Build 25 | 26 | Once you've forked this repository, go ahead and make the following changes to the `index.html` file. 27 | 28 | ## Add a Page Title 29 | 30 | Create a `title` element with your Code School account name. 31 | 32 | ## Add a Header Element 33 | 34 | Add an `h1` saying "Hello, Code School!". 35 | 36 | ## Create an Unordered List 37 | 38 | Create a `ul` element with at least 2 `li` elements. 39 | 40 | ## What Do You Want to Learn? 41 | 42 | In these `li` elements, list out what you want to learn. 43 | 44 | # Checking Your Work 45 | 46 | Once you've completed all of the tasks, go ahead and commit those to your fork of this repository and push it up to GitHub. Follow the directions on [Hello Code School](https://www.codeschool.com/projects/hello-code-school) to submit your project and get feedback from Code School. 47 | 48 | ## Running Tests Locally 49 | 50 | You don't need to run and of the tests locally -- they'll all run when you submit your project. If you're an overachiever and want to try running the tests locally, here's what you'll need to do. 51 | 52 | First off, install [node.js](https://nodejs.org/en/) locally. Next you'll need to run a few commands from this folder. 53 | 54 | ``` 55 | $ npm install 56 | $ npm test 57 | ``` 58 | 59 | If everything is working, you should see something like this: 60 | 61 | ``` 62 | HelloCodeSchoolProject (answer) $ npm test 63 | 64 | > hello-codeschool-project@1.0.0 test /Users/adam/code/projects/HelloCodeSchoolProject 65 | > mocha test/ 66 | 67 | 68 | 69 | Your HTML Page 70 | ✓ should have a different title 71 | ✓ should have a different h1 72 | ✓ should have a ul 73 | ✓ should have at least 2 li elements 74 | 75 | 76 | 4 passing (306ms) 77 | ``` 78 | 79 | # Making it Public 80 | 81 | Once all tests are passing, try pushing your master branch up to the `gh-pages` branch -- this will make your webpage available on the web! Here's a command to do that: 82 | 83 | ``` 84 | $ git push origin master:gh-pages 85 | ``` 86 | 87 | This will make your `index.html` file available at the URL: 88 | 89 | `http://.github.io/HelloCodeSchoolProject/` 90 | 91 | # Another Answer 92 | 93 | If you want to checkout one other possible solution to this problem and compare your work, you can checkout the `solution` branch. 94 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-codeschool-project", 3 | "version": "1.0.0", 4 | "description": "Sample Code School Project", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "./node_modules/.bin/mocha test/" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "chai": "^3.5.0", 13 | "jsdom": "^9.2.1", 14 | "mocha": "^2.5.3" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeschool-projects/HelloCodeSchoolProject/c1174ac7d251ff47c90ae1790671931a1ccd0e4e/screenshot.png -------------------------------------------------------------------------------- /test/index_test.js: -------------------------------------------------------------------------------- 1 | var jsdom = require('jsdom'), 2 | fs = require('fs'), 3 | assert = require('chai').assert, 4 | file = fs.readFileSync('index.html').toString(); 5 | 6 | describe('Your HTML Page', function() { 7 | var window; 8 | before(function(next) { 9 | jsdom.env( 10 | file, 11 | ["http://code.jquery.com/jquery.js"], 12 | function (err, w) { 13 | if(err) { next(err); } 14 | window = w; 15 | next(); 16 | } 17 | ); 18 | }); 19 | 20 | it('should have a title @title', function() { 21 | assert.equal(window.$('title').length, 1, 'Make sure to create a `title` element.'); 22 | }); 23 | 24 | it('should have a title that contains your name @title', function() { 25 | assert.notEqual(window.$('title').text(), '', 'Make sure to set the content of the `title` element to your Code School username.'); 26 | }); 27 | 28 | it('should have a h1 element @h1', function() { 29 | assert.isAtLeast(window.$('h1').length, 1, "Make sure to create an `h1` element."); 30 | }); 31 | 32 | it('should have content in the h1 element @h1', function() { 33 | assert.equal(window.$('h1').text(), 'Hello, Code School!', "Make sure to set the content of your `h1` element to 'Hello, Code School!'."); 34 | }); 35 | 36 | it('should have a ul @ul', function() { 37 | assert.isAtLeast(window.$('ul').length, 1, "Make sure to create a `ul` element."); 38 | }); 39 | 40 | it('should have at least 2 li elements @li', function() { 41 | assert.isAtLeast(window.$('li').length, 2, "Make sure to create at least 2 `li` elements."); 42 | }); 43 | 44 | it('should have content for all `li` elements. @li', function() { 45 | var message = "Make sure to include something you want to learn for each `li` element." 46 | assert.notEqual(window.$('li:first').text(), '', message); 47 | assert.notEqual(window.$('li:last').text(), '', message); 48 | }); 49 | }); 50 | --------------------------------------------------------------------------------