The purpose of this repo is to provide practice with the HTML/CSS portion of front-end/full-stack code challenges. What we will do is to look at elements of modern websites isolated from the whole layout/page (like buttons or cards), to think about code challenges from a visual and usability perspective, as well as to provide a fun challenge to solve.
Each section has a time limit, try to honor those times.
Planning for a code challenge is extremely important. This helps set you up for success.
- Open the folder for the challenge you would like to attempt.
- View the provided challenge readme and assets.
- Write down any questions you might have. (Very important!)
Use an online code editor site like CodePen to quickly get started without having to setup folders/files.
This is a time to ask yourself some questions about the process.
- How did it go?
- Did anything surprise or stump you?
- Anything you wish you knew before you got started?
- What assumptions did you make?
When completing a code challenge during the interview process, planning will go a long way.
Always spend time preparing before coding. Make an action plan, even if it is a simple list of todo's.
Always prepare a list of questions to send back to the hiring manager regarding the code challenge. You do not have to wait to get a response to those questions, because they might not answer them anyway. This demonstrates that you are considering unknowns and assumptions about the designs you were provided.
An example email response to code challenge:
I am really excited to get started coding the challenge you provided me! I have some questions that I would like clarification on, if possible.
You indicated that you would like this challenge coding responsively, is there a minimum size viewport you would like me to code to? 400px, 320px, etc?
The provided images files did not show a hover, an active, or a focus state on the buttons or links. Is there a preference to how those should be handled?
In addition to planning, attention to detail is very important in these challenges. Consider the following:
- Did you represent the design accurately?
- Do the line heights, font properties, and colors match exactly to the design?
- Did you consider accessilibity in your designs?
- Did you make any assumptions? If so, communicate those back to the hiring manager when you send in your final code challenge.