Skip to content

J-eno/GrooveFrontendTest

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Welcome to the Groove FrontEnd test
-----------------------------------

This test is to assess your fundamental skills in HTML, CSS, and Javascript.
You do not need to be an expert in each of these areas, but some experience is required to accomplish the tasks ahead.

Each file will have a set instructions of a problem that needs to be solved.
Follow the instructions laid out to the best of your abilities as some of these instructions will build onto a functional requirement for the CSS or JavaScript portions.

Let's get started with the HTML portion.


HTML Instructions
-----------------
Open the `index.html` file in your preferred editor and with a browser to view your changes as you progress.

1. The `Main Header` section is missing some navigation. 
  + Include a nav element with an id of `nav-main`.
  + Inside the nav element should be an unordered list with 3 list items containing an empty link element and 1 list item containing a button.
  + One of the links should open a new tab.

2. For the sections tags within the main element
  + Add a `hero-container` class to the first section element
  + Add a `container` class to the remaining section elements

3. In both `Content Blocks` sections
  + Add alt text to each of the image elements.

4. In the `Content Blocks - Figure elements` section
  + Convert the appropriate divs tags to figure and figcaption tags.
  + Include a button element in each figcaption tag

5. In the `Content Blocks - Dynamically loaded` section
  + Add the data attribute `ajax-loaded` with a value of `6` to the div tag

6. In the `Quote` section
  + Create a blockquote element (with one of your favorite quotes)
  + Create a cite tag with the quote's author's name

7. The `Main Footer` section
  + Add a nav element with an id of `nav-footer` and containing 3 unordered list elements
  + The first unordered list should have a list item containing an image tag of the `logo.svg` from the `images` directory.
  + The second and third unordered lists should have 6 list item tags
  + The first list item of these unordered lists should contain a span tag with the class `menu-text` and some text.
  + The disclaimer paragraph is missing the copyright character. Replace the word "copyright" with the appropriate HTML entity.

Save your file and check your work.
You're now ready to move onto the CSS instructions.
Open the README.txt file within the `css` directory.

About

Frontend test for Groove internship

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published