Interviewer had me undergo a web design test -- a landing page

Interviewer had me undergo a web design test -- a landing page
0

#1

First I apologize if this is innapropriate for this section, but i couldn’t find a place that would quite tailor to what I needed.

So, like the title says, i had a job interview where the objective was to make a landing page with html/css. I had 2 days.
And all i want to know is, if I failed pretty hard, because I haven’t got an answer, and I know the file’s been received. (and the person who i was talking with was quick with his replies, so i’m assuming i must’ve screwed up )
It’s very frustrating – failure is all part of the process but i’d like to know if there was something ‘terrible’ about it that I should’ve definitely avoided.

Here’s the specifics i had to fulfill.
— all text should be selectable texts and should be styled close to the design (but not necessarily pixel-perfect);
— responsive/mobile adaptation (blocks/columns orders are up to you);
— all images should be considered to be of minimal acceptable size (if you will not get it, just skip));
— hero section should be 100% of desktop window height;
— hero image should have some scrolling effect.

After a reply he threw this one:

– Also with pattern background and last section(scrollin effect): background could make things look nice if played around.

and here’s the site:
landing page example

and here’s what I did
https://st3ps.github.io/LandingPage/public/index.html
source: https://github.com/St3ps/LandingPage

I know what some of my shortcomings were.
It’s not very mobile responsive. It’s “ok-ish”.
some of the text was not close to the original design. Specifically the 2nd panel bit, where there’s words randomly thrown around. I just didn’t think it was that important, left it for last, time was running out and I just had it sent as it was.
the image backgrond files are kinda massive, but that’s exactly how they were handled to me in the .psd file.
And I think that’s it.

I used sass(not very well, but I did) and bootstrap, I should’ve asked if that was a problem, I guess. It might’ve made the only css file very messy, but you know I assumed he could’ve just as easily gone through the .scss files. In the end, i really have no specific idea what was the ‘red flag’.


#2

This is weird, I have never heard of these test for a interview; most of the time I see algorithm challenges being asked but I have never seen this. Honestly, if they aren’t going to hire you because of this then you deserve better. They gave you a limited time frame, basically threw a project on you and said do it. Don’t let them discourage you. I think this project should show how you do under pressure and on a limited time frame and if an employer can’t see how phenomenal this is despite the pressure and time frame, then you shouldn’t work for them. Most likely they’re going to make you do a ton of work and then rush you.


#4

@emmanuelledebarge

The test he is talking about is a normal test i often had (in fullstack, front/back end) but i am wondering why he gets so much time for it.
The longest time i had for an interview test, was a half day (4 hours) for a junior web developer job. They said i should code a simple webpage with a blog, a contact form, rate function for the blog, an archive (with MySQL), a preview on the landing page with the last 5 topics from the blog, 3 pages (home, blog, contact form) and a newsfeed. The layout was on my own to create.

The test for an interview depends on the job you want to have.
It makes no sense to give a front end developer who is specialized in layout and logo design or ux design etc. an algorithm test. If he passed it, they still not know whether he is able to design a webpage based on a template or not. Or if he know something about responsive design or frameworks.

Think about the job you want and the skills they want, then you can imagine which test you get (if you get one).

A recommendation. Because St3ps wrote

Panic is not necessary.
There are some tests which sets you under pressure with time and demands on your skills.
With those tests they want to know how you react under stress and how your result would be under stress. Do you make the work quick and bad with many mistakes just to finish your work in time? Or do you make it slow but the work you did is great?
Knowledge is not all for a job, never forget. The approach to the work says a lot about you. In real projects the time is often too short (time is money).
And you can’t say to a customer …hey i thought the function you want is not so important and i had not more time for this task. So, live with it, bye bye. Then the customer will say bye bye to you forever and your good reputation is gone with the wind.

Especially for beginners it is really important to show what you can, as good as you can!
The interviewers know that you are a beginner and not be so fast with your work. This is a thing of time and practice. So better make your work perfect (or near to) and show what you can do in the time you have.

And NEVER EVER!!! say that you thought something is not important. If something is not important for your boss or your customer they wouldn’t say it.

Sry for the very long text. I don’t want to get on someones nerves. These are just my two cents.
Good night.

Regards
Phajava


#5

The text looks pretty bad. I think you made an error in thinking the text aspect was not important. The main content of the page is text and images. So the text is one of the first things I’m going to notice when I visit a page like that. My thought is you really had no excuse to use placeholder text like “Sentence 1” when you were given 2 days and an example that you can just copy the text from. It just gives an overall impression that you don’t have a good foundation in basic CSS/HTML (even if it’s not true).

The background images don’t display properly. They appear cropped unlike in the example.

If this was just some practice project you were doing, I’d say it doesn’t look horrible and you just have to keep improving it. But for a job interview, you are probably competing with other people who could come up with something much closer to the requirements. I’d try to politely ask the interviewer for feedback on where they think you really messed up. They might not respond, but I don’t think it hurts to ask.


#6

Hello everyone,

Alright let’s start with the text!
I’d like to start with the emphasis where I clearly see in what I did wrong. The requested font was the Lato family. And I really did a mistake in not applying the direct Lato ‘family-members’, I assume this is what everyone means? Because otherwise it’s the same font “parent”.

As for the text content, i really didn’t think much of it, reasessing this I understand that perhaps the look and flow of the page comes diferent when different sentences are used, or i may have come off as lazy, which is worse, i was just trying to save time, i had an interview the next day and I had to prepare myself for that, I couldn’t do an all nighter(would miss the deadline regardless), I knew I would be wrecked in that interview.
(It still didn’t go well.)

As for all the other points, they are too many to address and i have very little to add but to say that I agree with what was said. All i can do is nod and work on my mistakes.

Overall, I think it all boils down to not paying attention to details.But my fear is getting lost in a detail and leaving everything else unnatended. And it does happen. So I don’t know what to do about this. It’s never enough or it’s too much.

Anyway, I’d like to say I appreciate all feedback that was given. I actually half-expected nothing to come of this post and i’m so glad to have been proven wrong, you guys were awesome.

This is why your help was very important. Again, thank you all.


#7

Can I ask, were you able to use Google? that seems like a lot of work to do from scratch for 4 hours. Also did the form have to work? E.g post to server.


#8

A lot of great info in this thread. Glad I read it.

@P1xt, I’m curious about one of your comments that I’m not sure I understand. You talked about border color in the 2nd section. Personally, I would have used a color picker to get the exact color, but if the OP went just by eye, I’m seeing pretty similar colors. My color picker says the two colors are: #B7A520 and #C2AF0D.

Were you implying that the OP should have used a color picker to get the exact color right or is the difference that obvious to your eyes just by looking? I can see a difference side by side, but that’s only when using the colors right next to each other in 200px solid divs. When I looked at the sample and the page the OP made on two different monitors, being fairly thin lines, I didn’t see a difference.


#9

@Jcolnz
I had google (i worked from home) but i only use it for syntax and this is normal for work. If you use google to search for contact forms or blogs or something, you never finish your work in time. It needs more time to optimize foreign code as you need writing your own.
And of course, i had a phone invterview after the work and we talked about my code and i could never do this without knowing what/why/how i coded. And addiitionally…the interview was in english as a foreign language for me (this was the hard part, not the coding part :smiley: )
But St3ps test was much harder, i think.

4 hours were enough time because i didn’t need to build a fantastic layout with responsive design, special fonts, more interactivity (except the blog and contact form) and so on.
This time i was afraid to code the blog because i thought, i need the most time for the DB but i didn’t need so much time.
But you must have in mind, that i had over 10 years (at the time of the test) experience with HTML, CSS and JS and round about 2 with MySQL and PHP (and this was the reason for my thought i could not finish the DB and PHP parts).

That is why i said, take your time. Everybody knows that beginners need more time. In this case it is more important for them to see (and hear) that you have a solid understanding of the basics.

By the way, don’t forget to comment your code! It is important for interviews if you talk about your code and projects. And it is a sign of a good knowledge of best coding practices.

PS: I did not get the job. They said they like my work and it is exactly what they are looking for. But only with my education, exam and a few websites as a background they thought i am not experienced enough. That is why i try to expand my portfolio with a wide range of skills and different challenges. I realized many websites were not the way to success for me. 10, 20, 30 years experience doesn’t matter


#12

That is a great response! The interviewer should have given it!


#13

I was definitely considering that!
I’d like to, after re-creating the landing page ofcourse, have it as something in my portfolio – and I did ask the company if I could use their material(the one in the test) should I want to do so – they gave me full permission, so that’s cool at least.

As for the interviewer, he did reply – he said something in the lines of, well, considering my experience, it was very good, but i was still not what they wanted as a developer, that the work done was something in the lines of “between a junior and a intern”.
And then, he sort of told me that they’re still reviewing the other tests and that they would get in touch with me, at least one more time.
All considering, the review was… decent, It’s not a total no…but the odds aren’t in my favor, so, just gunna keep on walking! :sunny:


#15

You’re right. It’s not a bad idea. Like you said, the very least I’ll get to learn more, and that’s always good.
On it.


#16

Great advice from @P1xt. It would show them that you’re passionate about learning, doing things right and have initiative. I can’t count how many times I’ve heard that passion trumps skills (if you’re near what they want but not quite).


#17

Alright so, I’ve finally remade the challenge closer to it’s original intention.

Here’s the new version:
https://st3ps.github.io/LandingPage/index.html

So, what’s new:
-It’s definitely more responsive. Not fully. It’s just very difficult to have a clean, dynamic, fully responsive layout, while making parallax, in just html/css with the content i was requested. Instead, it should work in most mobiles and tablets assuming full width and height of the device – it’ll break in ‘odd’ dimensions, mostly edge cases.
-The original layout is much more respected, all fonts and colors are the same as those in the .psd file, but you can’t get a direct correspondence between the font in a .psd file and a font in a browser, the shapes will always look diferent between the two – so with that said, every font is respected, sizes may vary due to scalability, but i’ve made it pretty aproximate. The colors were color picked, the sizes of each section respect the original layout.

-the semantic structure in both scss and the html is better.
-some nice html5 content on index :stuck_out_tongue:
-I know the quotes aren’t the same as the original image, but for some odd reason I can’t tell why my .png and my .psd files have different quotes on them…the ones you see in the new version, are the ones in my .psd file, they may not match the size completely because of scaling issues, but it’s pretty close. Their position may be a bit off, and well, that’s another problem. Those quotes are placed through :before and :after selectors, with absolute values on a blockquote and it just gets iffy, i’m not sure how i’m fixing it.

So with all that said, and considering it’s been 8 days – should I go let him know of my update?


#19

Thought it through and you’re right. Followed your advice and sent them an email. If the worst that can happen is nothing, than I might as well do it.

Thank you for your words P1xt, you were a real part in this.


#21

Well done on your refactoring, looks great to me!

I only just saw this thread so didn’t see your initial version. Keep us updated with the feedback you receive from the interviewer.


#22

Really clumsy of me. Should’ve kept an online copy.

I’ll be sure to let you all know of the outcome (or the lack thereof! :p), thank you.


#23

I didn’t get to see the initial version either, would’ve liked to see how you improved it because the second version looks very nice overall.

I have a couple of things to point out and they’re both with respect to your code:

  1. Always check your HTML against the W3C Validator (https://validator.w3.org/), because I noticed that you have a couple of errors in your HTML. You shouldn’t let slip any kind of errors that can be easily caught, especially if you’re serious about getting a job. (Obviously I don’t know if you use or test in Firefox, but its page source viewer highlights errors in red, making them easy to spot.)

  2. This is a subjective preferential thing, but consider limiting the length of your lines of HTML code. The old-style 80 character line length may be a bit too limiting for modern code, but IMO it’s worth at least limiting your lines to something like 90-100 characters. The reason I recommend doing this is to avoid horizontal scrolling both for yourself (at least if you run your code editor in a window) and for anyone (like an employer) who might want to view your source.


#24

I did as you said, checked my html with the w3c validator and yeah…there’s a good couple! They’re all fixed.
I’m using Brackets so i spend most of my time in Chrome(due to the live preview feature) for debugging, doesn’t Chrome have this feature? Regardless, I already have both Firefox and Chrome open all the time anyway, so, i guess i could just use it for parsing html lol

I think you’re right, Bracket wraps things automatically so you really don’t have to but i can’t say for other IDE’s … I’ll definitely work on it.

Thank you for pointing these out.


#25

So, to keep an update on the development of this … process, i’m just here to say there has been none. I am safely assuming I did not get the job.

Some form of contact would’ve been nice, i actually kinda liked them.
Regardless my expectations were managed and i’m taking the bitterwsweet but valuable 2nd prize home – experience :slight_smile:


#26

How many jobs have you applied to? Did you stop because of this one experience? Have you had another interview? Are you planning to continue?