diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 00000000..94075e99 --- /dev/null +++ b/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. diff --git a/README.md b/README.md index de7fa649..316fff38 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,33 @@ Welcome to the Semantic HTML Portfolio Project! For this project, we'll be conve Please follow the instructions below to complete the project. Be sure to run tests to make sure your tests are passing before submitting your code. +## What You'll Build + +We'll be using the [Build a Portfolio Using HTML and CSS](https://www.codeschool.com/projects/build-a-portfolio-using-html-and-css) project as a starting point and converting it to use semantic HTML elements. The result won't look that different than before, but this will introduce a few new HTML elements into the mix to help make our HTML more clear. Here's a sample of what this could look like: + +![Sample Portfolio](http://courseware.codeschool.com.s3.amazonaws.com/projects/semantic-html-portfolio-project.png) + + +## What You'll Learn + +We'll use a bunch of HTML 5 elements, including: + +- `header` +- `footer` +- `main` +- `nav` +- `section` + +If you've never used these elements, we recommend taking the [Front-End Formations](https://www.codeschool.com/courses/front-end-formations) course to get familiar with these elements before jumping in. + +## Live Demo + +Wondering what this project will look like when you've completed it? [Follow this link](https://codeschool-project-demos.github.io/SemanticHTMLPortfolioProject/) to see a live version of this project. + + ## Getting Started -To get started with this project, head over to the [Semantic HTML Portfolio](#) project on Code School, and begin! +To get started with this project, head over to the [Semantic HTML Portfolio](https://www.codeschool.com/projects/semantic-html-portfolio-project) project on Code School, and begin! To get setup locally, run the following commands: @@ -38,3 +62,15 @@ Our 3 main sections make up the focus of our page. Wrap these three sections (ta ### Footer Lastly, the element with a class of `footer` isn't the most semantic use of that area either. Luckily HTML 5 has a much better element we can use for footers. Update this element to use the semantically correct tag. + +## Next Steps + +Now that your site is working, the next step would be to deploy it to production! + +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/SemanticHTMLPortfolioProject`, where `username` is your GitHub username. diff --git a/package.json b/package.json index 7ab716fd..223f8525 100644 --- a/package.json +++ b/package.json @@ -5,17 +5,26 @@ "private": true, "scripts": { "start": "browser-sync start --server ./src --files ./src", - "test": "mocha --colors test/*.spec.js", + "test": "mocha --colors --compilers js:babel-register test/*.spec.js", "test:watch": "watch-run -p 'src/index.html,test/portfolio.spec.js' npm run test", "deploy:github-pages": "git subtree push --prefix src origin gh-pages" }, "author": "Adam Fortuna ", "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", "watch-run": "^1.2.4" + }, + "engines": { + "node": ">=4.6", + "npm": ">=2.15" + }, + "babel": { + "presets": ["es2015"] } } diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 00000000..404cdca8 Binary files /dev/null and b/screenshot.png differ