asheu321 / frontend_skills_test

Frontend Developer Skills Assestment Test This test is for any frontend developer that wants to work with PixelStorm Web Development team. It will test your basic understanding of:

• HTML & Bootstrap templates
• Scss
• git set up and usage
• Build tools
• Understanding of requests from management

Please fork this repo to begin.

After you complete a step, it is required that you commit your code. This means, when you’ve done a change, please make a commit. When you have completed the test push the code to your forked repo.

Upon completion, make a pull request. We should see a at least 12 commits in your fork.

This exercise should take you between 1-2 hour to complete. This test is part of your interview process. The questions are written in a way that the client will communicate problems to us.

Please limit yourself to 2 hours maximum for this exercise.

Step 1

fork this repo.

https://github.com/pixelstorm/frontend_skills_test.git

Step 2

Get this repository working on your local environment to start fixing issues

Step 3

There is an issue with the rendering of the website. Please fix the issue so that it renders the CSS properly. Minified css is preferred.

Step 4

The header area of the website that has a background image is too short. We need to make it bigger and higher. Please make it higher. We think it should be at least 400px high.

Step 5

The content area of the website on desktop and tablet layouts is too wide. If goes all the way across the screen making it very hard to read. Please decrease the content column width to 8 columns wide on desktop and centre the column.

Please make it 10 columns on tablet layout and centre the content.

Step 6

Make all headings and body copy use fluid text resize. https://www.smashingmagazine.com/2016/05/fluid-typography/

Step 7

The footer area has some social links in the footer. Please make these inline.

Step 8

In the footer area where there are the social links, Twitter, Facebook and Github, please remove Github and add in two more social network icons of your choice and make the icons display inline next to each other.

Step 9

The hover effects on this website are boring. Please add a transition in the hover states. Add a fadin color effect on hover (from grey to green).

Step 10

Let’s add some cool fonts to the website. Please choose a Google font of your choice for all the headings of the site.

Step 11

Change the default hover colour across the website to the same colour #402c71.

Step 12

Grab the pixelstorm svg logo and add it to the the template that you are working on in the logo area where it currently says “PXS Web Development” in plain text. Make sure it acts as a home button when clicked.

Step 13

Change the header image on the home page to something of your choice.

Step 14

Make sure that the header image stretches to fix the containing div. The client wants to see all of the image.

Step 15

Add a parallax effect to the header image

Additional Step if Required: WordPress Developer Please contact us before continuing at this point.

If you’re wanting to be a WordPress Developer with us, at this point you will need to convert the theme into a working WordPress blog with the wp posts feeding onto the homepage. Record a screenshare of it and talk us through how you converted the html site into a wordpress site.

Ensure to use an accompanying child theme,
Send us a link to the video, provide wp-admin username: pxswebdev and password: pxswebdev123 commit the wordpress site with database export included.

We estimate it will take 1-2 hours. Commit logs are also required as you build the theme/template to see how you progress through the build.

Please limit yourself to 2 hours maximum for this exercise.

We are limiting the payment for this part of the test to 2 hours.