Added specs for the portfolio

Author: adamfortuna

README.md

@@ -19,6 +19,22 @@ npm start
 
 Complete the following tasks to complete this project.
 
-### Convert the Header to semantic HTML.
+### Convert the Header
 
 The element with a class of "header" isn't using the most semantic HTML tag it could be using. Switch it to use an element that most accurately wraps the header content for a page.
+
+### Semantic Navigation
+
+Our `.nav` element in the header of the page isn't using the most semantic HTML tags it could be using. `ul` is the correct one for this list of navigation items, but we should wrap this element with a more semantic element to indicate it is a navigation. Go ahead and add this.
+
+### Create Sections
+
+Each of the main content areas of our portfolio could be switched from using `div` tags to something that more accurately describes them as sections of our page. Update the `.tagline`, `.skills` and `.contact` sections to use a more semantic HTML tag.
+
+### Main Content
+
+Our 3 main sections make up the focus of our page. Wrap these three sections (tagline, skills and contact) in an HTML element that gives it the correct focus.
+
+### 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.

src/index.html

@@ -13,6 +13,11 @@
   <div class="header">
     <h1>Sergio Cruz</h1>
     <h2>Application Developer</h2>
+
+    <ul class="nav">
+      <li><a href="index.html" class="active">Home</a></li>
+      <li><a href="about.html">About</a></li>
+    </ul>
   </div>
 
   <div class="tagline">

src/main.css

@@ -20,11 +20,22 @@ h1, h2, h3, h4 {
   margin: 10px 0 15px;
 }
 
+.nav, nav {
+  display: inline;
+  list-style: none;
+  margin: 1em 0;
+  padding: 0;
+}
+.nav li, nav li {
+  display: inline;
+  margin-right: 1em;
+}
+
 p, ul {
   margin: 10px 0;
 }
 
-ul li {
+.skills ul li {
   margin-left: 30px;;
 }
 
@@ -46,6 +57,10 @@ a:active {
   top: 1px;
 }
 
+a.active {
+  border-bottom: none;
+}
+
 .content-wrapper {
   line-height: 1.4;
   margin: 0 auto;

test/portfolio.spec.js

@@ -15,117 +15,84 @@ describe('The webpage', () => {
    */
   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.');
+      const header = doc.querySelector('header');
+      assert.isOk(header, 'We need a `header` element.');
     });
 
-    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.');
+    it('should not exist @header', () => {
+      const header = doc.querySelector('.header');
+      assert.isOk(!header, 'Make sure to remote the `.header` class -- we no longer need it.');
     });
   });
 
 
   /**
-   * TAGLINE
+   * NAV
    */
-  describe('tagline', () => {
-    it('should exist @tagline', () => {
-      const tagline = doc.querySelector('.tagline');
-      assert.isOk(tagline, 'We need a `.tagline` element.');
+  describe('nav', () => {
+    it('should exist @nav', () => {
+      const nav = doc.querySelector('header nav');
+      assert.isOk(nav, 'We need a `nav` element inside `header`.');
     });
 
-    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.');
+    it('should remove the existing class @nav', () => {
+      const nav = doc.querySelector('header .nav');
+      assert.isOk(!nav, 'We no longer need an element with a class of `.nav`. Go ahead and remove it.');
     });
   });
 
 
   /**
-   * SKILLS
+   * SECTION
    */
-  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.');
+  describe('section', () => {
+    it('should convert the tagline @section', () => {
+      const el = doc.querySelector('.tagline');
+      assert.isOk(el.length > 0, 'Looks like you removed the element with a class of `.tagline`. You will still need that, but will need to change it\'s element.');
+      assert.equal(el.tagName.toLowerCase(), 'section', 'Make sure to change the element with a class of `tagline` to a `section` element.');
     });
 
-    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 convert the skills @section', () => {
+      const el = doc.querySelector('.skills');
+      assert.isOk(el.length > 0, 'Looks like you removed the element with a class of `.skills`. You will still need that, but will need to change it\'s element.');
+      assert.equal(skillsWithHtml.tagName.toLowerCase(), 'section', 'Make sure to change the element with a class of `skills` to a `section` element.');
     });
 
-    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.');
+    it('should convert the contact @section', () => {
+      const el = doc.querySelector('.contact');
+      assert.isOk(el.length > 0, 'Looks like you removed the element with a class of `.contact`. You will still need that, but will need to change it\'s element.');
+      assert.equal(skillsWithHtml.tagName.toLowerCase(), 'section', 'Make sure to change the element with a class of `contact` to a `section` element.');
     });
   });
 
 
   /**
-   * CONTACT
+   * MAIN
    */
-  describe('contact', () => {
-    it('should exist @contact', () => {
-      const contact = doc.querySelector('.contact');
-      assert.isOk(contact, 'We need a `.contact` element.');
+  describe('main', () => {
+    it('should exist @main', () => {
+      const header = doc.querySelector('main');
+      assert.isOk(header, 'We need a `main` 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 not exist @main', () => {
+      const sections = doc.querySelector('main section');
+      assert.isOk(sections.length >= 3, 'Make sure to move all of the `section` elements into our new `main` element.');
     });
+  });
 
-    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.');
+  /**
+   * FOOTER
+   */
+  describe('footer', () => {
+    it('should exist @footer', () => {
+      const footer = doc.querySelector('footer');
+      assert.isOk(footer, 'We need a `footer` element.');
     });
 
-    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.');
+    it('should not exist @main', () => {
+      const footer = doc.querySelector('.footer');
+      assert.isOk(!footer, 'Remove the `footer` class. Since we\'re using semantic HTML, we no longer need that one.');
     });
   });