Add files via upload

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Code School
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,107 @@
+# HTML Portfolio
+
+You'll create a personal web page to show off your work. We will test your HTML knowledge, and then it will be up to you to use CSS to style your own page and make it unique.
+
+## What You'll Build
+
+The end result will be a portfolio that you can deploy publicly! Here's a sample of what this could look like:
+
+![Sample Portfolio](http://courseware.codeschool.com.s3.amazonaws.com/projects/build-a-portfolio-using-html-and-css.png)
+
+## What You'll Learn
+
+We'll dive into a number of basic HTML concepts, including:
+
+* Creating an HTML page
+* Using classes to organize your page and tie in styles
+* Using headings to denote importance
+* Adding text using paragraphs
+* Creating links so users can contact you
+
+## What You'll Need
+
+You'll need a GitHub account, Git installed locally, and a text editor to edit HTML. We recommend using GitHub's [Atom Editor](https://atom.io/), which is free and very powerful. The [Brackets](http://brackets.io/) editor is another great tool.
+
+## Live Demo
+
+Here is a [working version of this project](https://codeschool-project-demos.github.io/HTMLPortfolioProject/), and now it is your job to out-do our version of this project by customizing your portfolio even further and adding more CSS rules, etc. We can't wait to see what you come up with!
+
+## Setup
+
+Once you have cloned the forked repository, go into the directory containing the project and look for the `/src` directory. This is the directory where you will be making changes when you start following the step-by-step instructions. You can simply open those files in a text editor and get started.
+
+You can always open the index.html file directly in your browser and work through the tasks below. You can also head over to the [Node.js](https://nodejs.org) website and follow the instructions to install Node on your machine. Once you have Node installed, open your command line and follow these instructions:
+
+```
+cd HTMLPortfolioProject
+npm install
+npm start
+```
+
+Running `npm start` should open a browser window pointing to `http://localhost:3000`. Now once you make changes to the files under the `/src` directory, your browser will refresh automatically, displaying the newest changes made to the files. This will save you the round trip of saving files and clicking refresh on your browser.
+
+## Tasks
+
+Complete the following tasks to finish this project.
+
+
+### Create the Page Header
+
+At the top of our page, we'll want to create an element with a class of `header` for us to add some information about ourselves.	MENU
+
+### Header Text
+
+Inside of our `.header` element, create an `h1` tag with your name in it. This is your portfolio, so it makes sense for your name to have the most prominence.	MENU
+
+### Job Title
+
+Also inside the `.header` element, add a `h2` tag with a job title (ie. "software developer", or "web designer", or "maker of things", etc).	MENU
+
+### The Tagline Element
+
+Next, create a new element that has a CSS class called `tagline`. In this element you'll be giving a little more information about yourself.	MENU
+
+### A Little About You
+
+Inside the `.tagline` element, create a `h3` tag inviting the visitor to learn more about you (ie. "Learn More About Me", or "Here's What I Do", etc). Also add an introductory paragraph with more information about yourself, including what things you're passionate about, programming languages you enjoy writing in, etc.	MENU
+
+### The Skills Element
+
+Next, we'll create a place to list out our current skills by creating an element with a class of `skills`. In here we'll be listing out what we already know.	MENU
+
+### Skills Content
+
+Inside the `.skills` element, create a `h3` tag inviting the user to learn more about your skills (ie. "my skills"). Also add a paragraph tag describing your skills (ie. "I enjoy writing front-end code with these technologies").	MENU
+
+### List of Skills
+
+Inside the `.skills` element, create a new `ul` which will be a list of of your skills. In here, add 3 skills you currently possess. `HTML` must be one of these skills.	MENU
+
+### The Contact Element
+
+The last section of our page will give people a way to contact us. Create a wrapper element for this area and give it a class of `contact`.	MENU
+
+### Contact Copy
+
+Inside the `.contact` element, create a `h3` tag inviting the user to contact you (ie. "contact me", or "drop me a line"). Also add a paragraph tag describing how people can contact you.	MENU
+
+### Contact Link
+
+Lastly, we just need a way for people to get in touch with us! In the paragraph you created, add an anchor tag (an `<a>` element) pointing people to a place where they can get more information about you (ie. Twitter, LinkedIn, Github, etc).
+
+
+## Next Steps
+
+Now that we have a working portfolio site, the next (optional) step is to style it. If you want to learn how to style this one with Bootstrap, head over to the [Build a Portfolio Using Bootstrap)(/projects/build-a-portfolio-using-twitter-bootstrap) project.
+
+If you’d rather style it on your own, now’s an excellent chance to add a stylesheet to this project and use those CSS skills!
+
+## Deploying
+
+Putting this site up on GitHub pages is a bit different than some other projects because the code is all in the `/src` directory. There’s a nifty way to push this directory to a GitHub branch, which allows you to use GitHub pages with it! Try running this Git command for this project:
+
+```
+git subtree push --prefix src origin gh-pages
+```
+
+This will push the `src` folder up to GitHub on the `gh-pages` branch. After that, you should be able to open up `http://username.github.io/HTMLPortfolioProject`, where `username` is your GitHub username.

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "project-html-portfolio",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "start": "browser-sync start --server ./src --files ./src",
+    "test": "mocha --compilers js:babel-register test/*.spec.js",
+    "deploy:github-pages": "git subtree push --prefix src origin gh-pages"
+  },
+  "author": "Sergio Cruz <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-preset-es2015": "^6.18.0",
+    "babel-register": "^6.18.0",
+    "browser-sync": "^2.14.0",
+    "chai": "^3.5.0",
+    "jsdom": "^9.4.1",
+    "mocha": "^3.0.1"
+  },
+  "engines": {
+    "node": ">=4.6",
+    "npm": ">=2.15"
+  },
+  "babel": {
+    "presets": ["es2015"]
+  }
+}

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
+  <link rel="stylesheet" href="main.css">
+  <title>HTML Portfolio</title>
+</head>
+<body>
+
+  Welcome to the HTML Portfolio Project
+
+</body>
+</html>

test/portfolio.spec.js

@@ -0,0 +1,132 @@
+// Libraries
+const fs = require('fs');
+const jsdom = require('jsdom');
+const { assert } = require('chai');
+
+// HTML
+const srcHtml = fs.readFileSync('./src/index.html');
+const doc = jsdom.jsdom(srcHtml);
+
+// Tests
+describe('The webpage', () => {
+
+  /**
+   * HEADER
+   */
+  describe('header', () => {
+    it('should exist @header', () => {
+      const header = doc.querySelector('.header');
+      assert.isOk(header, 'We need a `.header` element.');
+    });
+
+    it('should have a non-empty title @h1', () => {
+      const h1 = doc.querySelector('.header h1');
+      assert.isOk(h1, 'We need an `h1` element inside `.header`.');
+      assert.isOk(h1.textContent, 'Our header\'s `h1` element cannot be empty.');
+    });
+
+    it('should have a non-empty description @h2', () => {
+      const h2 = doc.querySelector('.header h2');
+      assert.isOk(h2, 'We need an `h2` element inside `.header`.');
+      assert.isOk(h2.textContent, 'Our header\'s `h2` element cannot be empty.');
+    });
+  });
+
+
+  /**
+   * TAGLINE
+   */
+  describe('tagline', () => {
+    it('should exist @tagline', () => {
+      const tagline = doc.querySelector('.tagline');
+      assert.isOk(tagline, 'We need a `.tagline` element.');
+    });
+
+    it('should have a non-empty h3 tag @tagline-content', () => {
+      const h3 = doc.querySelector('.tagline h3');
+      assert.isOk(h3, 'We need an `h3` element inside `.tagline`.');
+      assert.isOk(h3.textContent, 'Our tagline\'s `h3` element cannot be empty.');
+    });
+
+    it('should have a descriptive paragraph @tagline-content', () => {
+      const p = doc.querySelector('.tagline p');
+      assert.isOk(p, 'We need a `p` element inside `.tagline`.');
+      assert.isOk(p.textContent, 'Our tagline\'s `p` element cannot be empty.');
+    });
+  });
+
+
+  /**
+   * SKILLS
+   */
+  describe('skills', () => {
+    it('should exist @skills', () => {
+      const skills = doc.querySelector('.skills');
+      assert.isOk(skills, 'We need a `.skills` element.');
+    });
+
+    it('should have a non-empty h3 tag @skills-content', () => {
+      const h3 = doc.querySelector('.skills h3');
+      assert.isOk(h3, 'We need an `h3` element inside `.skills`.');
+      assert.isOk(h3.textContent, 'Our skills\' `h3` element cannot be empty.');
+    });
+
+    it('should have a descriptive paragraph @skills-content', () => {
+      const p = doc.querySelector('.skills p');
+      assert.isOk(p, 'We need a `p` element inside `.skills`.');
+      assert.isOk(p.textContent, 'Our skills\' `p` element cannot be empty.');
+    });
+
+    it('should have an unordered list of your skills @skills-list', () => {
+      const ul = doc.querySelector('.skills ul');
+      assert.isOk(ul, 'We need a `ul` element inside `.skills`.');
+    });
+
+    it('should have at least 3 skills @skills-list', () => {
+      const skillItems = doc.querySelectorAll('.skills ul li');
+      assert.isAtLeast(skillItems.length, 3, 'We need at least 3 `li` elements inside the skills\' `ul`.');
+    });
+
+    it('should have one skill that contains HTML @skills-list', () => {
+      const skillItems = Array.from(doc.querySelectorAll('.skills ul li'));
+      const htmlRegex = /html/i;
+
+      const skillsWithHtml = skillItems
+        .map(li => li.textContent)
+        .filter(skill => htmlRegex.test(skill));
+
+      assert.equal(skillsWithHtml.length, 1, 'HTML needs be part of one of your skills.');
+    });
+  });
+
+
+  /**
+   * CONTACT
+   */
+  describe('contact', () => {
+    it('should exist @contact', () => {
+      const contact = doc.querySelector('.contact');
+      assert.isOk(contact, 'We need a `.contact` element.');
+    });
+
+    it('should have a non-empty h3 tag @contact-content', () => {
+      const h3 = doc.querySelector('.contact h3');
+      assert.isOk(h3, 'We need an `h3` element inside `.contact`.');
+      assert.isOk(h3.textContent, 'Our contact\'s `h3` element cannot be empty.');
+    });
+
+    it('should have a descriptive paragraph @contact-content', () => {
+      const p = doc.querySelector('.contact p');
+      assert.isOk(p, 'We need a `p` element inside `.contact`.');
+      assert.isOk(p.textContent, 'Our contact\'s `p` element cannot be empty.');
+    });
+
+    it('should have a link with an href within the paragraph @contact-link', () => {
+      const a = doc.querySelector('.contact p a');
+      assert.isOk(a, 'We need a `a` element our inside contact\'s `p` element.');
+      assert.isOk(a.textContent, 'Our contact\'s `a` element cannot be empty.');
+      assert.isOk(a.getAttribute('href'), 'Our contact\'s `a` element needs a non-empty `href` attribute.');
+    });
+  });
+
+});