├── src
├── main.css
└── index.html
├── .gitignore
├── preview.png
├── screenshot.png
├── .editorconfig
├── package.json
├── LICENSE.txt
├── test
└── portfolio.spec.js
└── README.md
/src/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 |
--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool-projects/HTMLPortfolioProject/HEAD/preview.png
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeschool-projects/HTMLPortfolioProject/HEAD/screenshot.png
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: http://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | # Unix-style newlines with a newline ending every file
7 | [*]
8 | end_of_line = lf
9 | insert_final_newline = true
10 | indent_style = space
11 | indent_size = 2
12 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | HTML Portfolio
8 |
9 |
10 |
11 | Welcome to the HTML Portfolio Project
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "project-html-portfolio",
3 | "version": "1.0.0",
4 | "description": "",
5 | "private": true,
6 | "scripts": {
7 | "start": "browser-sync start --server ./src --files ./src",
8 | "test": "mocha --compilers js:babel-register test/*.spec.js",
9 | "deploy:github-pages": "git subtree push --prefix src origin gh-pages"
10 | },
11 | "author": "Sergio Cruz ",
12 | "license": "MIT",
13 | "devDependencies": {
14 | "babel-preset-es2015": "^6.18.0",
15 | "babel-register": "^6.18.0",
16 | "browser-sync": "^2.14.0",
17 | "chai": "^3.5.0",
18 | "jsdom": "^9.4.1",
19 | "mocha": "^3.0.1"
20 | },
21 | "engines": {
22 | "node": ">=4.6",
23 | "npm": ">=2.15"
24 | },
25 | "babel": {
26 | "presets": ["es2015"]
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/test/portfolio.spec.js:
--------------------------------------------------------------------------------
1 | // Libraries
2 | const fs = require('fs');
3 | const jsdom = require('jsdom');
4 | const { assert } = require('chai');
5 |
6 | // HTML
7 | const srcHtml = fs.readFileSync('./src/index.html');
8 | const doc = jsdom.jsdom(srcHtml);
9 |
10 | // Tests
11 | describe('The webpage', () => {
12 |
13 | /**
14 | * HEADER
15 | */
16 | describe('header', () => {
17 | it('should exist @header', () => {
18 | const header = doc.querySelector('.header');
19 | assert.isOk(header, 'We need a `.header` element.');
20 | });
21 |
22 | it('should have a non-empty title @h1', () => {
23 | const h1 = doc.querySelector('.header h1');
24 | assert.isOk(h1, 'We need an `h1` element inside `.header`.');
25 | assert.isOk(h1.textContent, 'Our header\'s `h1` element cannot be empty.');
26 | });
27 |
28 | it('should have a non-empty description @h2', () => {
29 | const h2 = doc.querySelector('.header h2');
30 | assert.isOk(h2, 'We need an `h2` element inside `.header`.');
31 | assert.isOk(h2.textContent, 'Our header\'s `h2` element cannot be empty.');
32 | });
33 | });
34 |
35 |
36 | /**
37 | * TAGLINE
38 | */
39 | describe('tagline', () => {
40 | it('should exist @tagline', () => {
41 | const tagline = doc.querySelector('.tagline');
42 | assert.isOk(tagline, 'We need a `.tagline` element.');
43 | });
44 |
45 | it('should have a non-empty h3 tag @tagline-content', () => {
46 | const h3 = doc.querySelector('.tagline h3');
47 | assert.isOk(h3, 'We need an `h3` element inside `.tagline`.');
48 | assert.isOk(h3.textContent, 'Our tagline\'s `h3` element cannot be empty.');
49 | });
50 |
51 | it('should have a descriptive paragraph @tagline-content', () => {
52 | const p = doc.querySelector('.tagline p');
53 | assert.isOk(p, 'We need a `p` element inside `.tagline`.');
54 | assert.isOk(p.textContent, 'Our tagline\'s `p` element cannot be empty.');
55 | });
56 | });
57 |
58 |
59 | /**
60 | * SKILLS
61 | */
62 | describe('skills', () => {
63 | it('should exist @skills', () => {
64 | const skills = doc.querySelector('.skills');
65 | assert.isOk(skills, 'We need a `.skills` element.');
66 | });
67 |
68 | it('should have a non-empty h3 tag @skills-content', () => {
69 | const h3 = doc.querySelector('.skills h3');
70 | assert.isOk(h3, 'We need an `h3` element inside `.skills`.');
71 | assert.isOk(h3.textContent, 'Our skills\' `h3` element cannot be empty.');
72 | });
73 |
74 | it('should have a descriptive paragraph @skills-content', () => {
75 | const p = doc.querySelector('.skills p');
76 | assert.isOk(p, 'We need a `p` element inside `.skills`.');
77 | assert.isOk(p.textContent, 'Our skills\' `p` element cannot be empty.');
78 | });
79 |
80 | it('should have an unordered list of your skills @skills-list', () => {
81 | const ul = doc.querySelector('.skills ul');
82 | assert.isOk(ul, 'We need a `ul` element inside `.skills`.');
83 | });
84 |
85 | it('should have at least 3 skills @skills-list', () => {
86 | const skillItems = doc.querySelectorAll('.skills ul li');
87 | assert.isAtLeast(skillItems.length, 3, 'We need at least 3 `li` elements inside the skills\' `ul`.');
88 | });
89 |
90 | it('should have one skill that contains HTML @skills-list', () => {
91 | const skillItems = Array.from(doc.querySelectorAll('.skills ul li'));
92 | const htmlRegex = /html/i;
93 |
94 | const skillsWithHtml = skillItems
95 | .map(li => li.textContent)
96 | .filter(skill => htmlRegex.test(skill));
97 |
98 | assert.equal(skillsWithHtml.length, 1, 'HTML needs be part of one of your skills.');
99 | });
100 | });
101 |
102 |
103 | /**
104 | * CONTACT
105 | */
106 | describe('contact', () => {
107 | it('should exist @contact', () => {
108 | const contact = doc.querySelector('.contact');
109 | assert.isOk(contact, 'We need a `.contact` element.');
110 | });
111 |
112 | it('should have a non-empty h3 tag @contact-content', () => {
113 | const h3 = doc.querySelector('.contact h3');
114 | assert.isOk(h3, 'We need an `h3` element inside `.contact`.');
115 | assert.isOk(h3.textContent, 'Our contact\'s `h3` element cannot be empty.');
116 | });
117 |
118 | it('should have a descriptive paragraph @contact-content', () => {
119 | const p = doc.querySelector('.contact p');
120 | assert.isOk(p, 'We need a `p` element inside `.contact`.');
121 | assert.isOk(p.textContent, 'Our contact\'s `p` element cannot be empty.');
122 | });
123 |
124 | it('should have a link with an href within the paragraph @contact-link', () => {
125 | const a = doc.querySelector('.contact p a');
126 | assert.isOk(a, 'We need a `a` element our inside contact\'s `p` element.');
127 | assert.isOk(a.textContent, 'Our contact\'s `a` element cannot be empty.');
128 | assert.isOk(a.getAttribute('href'), 'Our contact\'s `a` element needs a non-empty `href` attribute.');
129 | });
130 | });
131 |
132 | });
133 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML Portfolio
2 |
3 | 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.
4 |
5 | ## What You'll Build
6 |
7 | The end result will be a portfolio that you can deploy publicly! Here's a sample of what this could look like:
8 |
9 | 
10 |
11 | ## What You'll Learn
12 |
13 | We'll dive into a number of basic HTML concepts, including:
14 |
15 | * Creating an HTML page
16 | * Using classes to organize your page and tie in styles
17 | * Using headings to denote importance
18 | * Adding text using paragraphs
19 | * Creating links so users can contact you
20 |
21 | ## What You'll Need
22 |
23 | 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.
24 |
25 | ## Live Demo
26 |
27 | 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!
28 |
29 | ## Setup
30 |
31 | 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.
32 |
33 | 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:
34 |
35 | ```
36 | cd HTMLPortfolioProject
37 | npm install
38 | npm start
39 | ```
40 |
41 | 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.
42 |
43 | ## Tasks
44 |
45 | Complete the following tasks to finish this project.
46 |
47 |
48 | ### Create the Page Header
49 |
50 | 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
51 |
52 | ### Header Text
53 |
54 | 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
55 |
56 | ### Job Title
57 |
58 | 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
59 |
60 | ### The Tagline Element
61 |
62 | 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
63 |
64 | ### A Little About You
65 |
66 | 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
67 |
68 | ### The Skills Element
69 |
70 | 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
71 |
72 | ### Skills Content
73 |
74 | 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
75 |
76 | ### List of Skills
77 |
78 | 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
79 |
80 | ### The Contact Element
81 |
82 | 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
83 |
84 | ### Contact Copy
85 |
86 | 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
87 |
88 | ### Contact Link
89 |
90 | Lastly, we just need a way for people to get in touch with us! In the paragraph you created, add an anchor tag (an `` element) pointing people to a place where they can get more information about you (ie. Twitter, LinkedIn, Github, etc).
91 |
92 |
93 | ## Next Steps
94 |
95 | 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.
96 |
97 | 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!
98 |
99 | ## Deploying
100 |
101 | 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:
102 |
103 | ```
104 | git subtree push --prefix src origin gh-pages
105 | ```
106 |
107 | 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.
108 |
--------------------------------------------------------------------------------