website: update landing page and contents heading formatting

pull/150/head
Yangshun Tay 5 years ago
parent 378c54520c
commit 8c116e399c

@ -7,7 +7,7 @@ The point of interviews is for interviewers to extract signals from certain cand
When interviewers take down interview feedback, these are likely what is on their feedback sheet.
## Problem Solving
## Problem solving
#### Understanding the problem
@ -34,7 +34,7 @@ When interviewers take down interview feedback, these are likely what is on thei
- 👍 Did not require any major hints
- 👎 Needed plenty of hints
## Technical Competency
## Technical competency
#### Speed

@ -5,18 +5,18 @@ title: Interview Formats
Interviews are a multi-stage process and each stage can consist of vastly different formats.
## Various Formats
## Various formats
### Pop Quiz
### Pop quiz
Pop quizzes are meant to be a quick and dirty way of weeding out extremely weak (or even non-technical) candidates. They are structured questions and have clear-cut answers which makes them possible to be administered by recruiters/non-technical folks. It is not a very common interview format these days.
Examples:
- What is 4 & 5? Answer: 4
- What is 4 & 5 (in binary)? Answer: 4
- What is the time complexity of bubble sort? Answer: O(n^2)
### Take Home Assignment
### Take home assignment
There has been numerous debates on whether asking algorithm questions are a good way of assessing individual abilities as they aren't exactly the most relevant skills needed for a job. Take home assignment is a format designed to address the shortcomings of the algorithm interview by getting candidates to work on larger projects which allow them to demonstrate software design skills.
@ -27,9 +27,9 @@ Examples
- Build a flights listing app
- Build a snake game
### Phone Interview
### Phone interview
Phone interview are the most common format and every candidate will face this at least once while interviewing. You will be asked to speak with an interviewer either over a phone call or VoIP (Skype/Hangout). A question will be given to you and you will work on that question using an online collaborative editor (CoderPad/CodePen/Google Docs).
Phone interviews are the most common format and every candidate will face this at least once while interviewing. You will be asked to speak with an interviewer either over a phone call or VoIP (Skype/Hangout). A question will be given to you and you will work on that question using an online collaborative editor (CoderPad/CodePen/Google Docs).
You are usually not allowed to execute the code even if the editor supports execution. So don't rely on that for verifying the correctness of your solution. Formats would differ slightly depending on the roles you are applying to. Many companies like to use [CoderPad](https://coderpad.io/) for collaborative code editing. CoderPad supports running of the program, so it is possible that you will be asked to fix your code such that it can be run. For front end interviews, many companies like to use [CodePen](https://codepen.io/), and it will be worth your time to familiarize yourself with the user interfaces of such web-based coding environments.

@ -9,7 +9,7 @@ Most of the content covered here will be specific to the Bay Area. Landscape dif
## Career prospects as a Software Engineer
### High Demand
### High demand
Almost every domain leverages on technology, hence Software Engineers are needed in almost every industry. Demand for engineers is higher than supply, leading to generally high-paying jobs. Moreover, the demand is continuously growing.

@ -9,7 +9,7 @@ You can rephrase the question like this:
> "Tell me about your journey into tech. How did you get interested in coding, and why was web development (or replace with other job-specific skills) a good fit for you? How is that applicable to our role or company goals?"
## The Elevator Pitch
## The elevator pitch
An "elevator pitch" originates from a journalist trying to pitch an idea to an editor. The only time to catch the editor was in the elevator and she had only around 30 seconds to do so. The key elements of elevator pitches include:
@ -59,7 +59,7 @@ Prepare a self introduction that follows the following outline (inspired by "Cra
### Example 1: Front End Engineer at Facebook
#### Self Introduction
#### Self introduction
> "Hi Im Yangshun and I graduated from National University of Singapore in 2015 with a degree in Computer Science. My interests are in Front End Engineering and I love to create beautiful performant products with delightful user experiences.
>
@ -78,7 +78,7 @@ Prepare a self introduction that follows the following outline (inspired by "Cra
### Example 2: Front End Engineer at Lyft
#### Self Introduction
#### Self introduction
> "Hi Im Yangshun and I graduated from National University of Singapore in 2015 with a degree in Computer Science. My interests are in Front End Engineering and I love to create beautiful performant products with delightful user experiences.
>

@ -35,7 +35,7 @@ module.exports = {
},
'questions-to-ask',
],
'Post Interview': ['negotiation', 'understanding-compensation'],
'Post Interview': ['understanding-compensation', 'negotiation'],
Algorithms: [
'algorithms/algorithms-introduction',
'algorithms/array',

@ -30,7 +30,7 @@ export default [
quote: (
<>
Most of us are familiar with having the prospect of having to grind tons
of Leetcode problems before the interview, but I really wanted a sense
of LeetCode problems before the interview, but I really wanted a sense
of direction, an outline of sorts to prepare efficiently; I wanted to
pick questions that covered all the important concepts one can be tested
on. The Tech Interview Handbook provides just that; the Algorithms

@ -43,13 +43,18 @@ function Home() {
</div>
</div>
</header>
<main>
<div className={styles.sectionDark}>
<div className="container padding-vert--md">
<div>
<div
className={classnames(
'margin-bottom--lg',
'padding-vert--lg',
styles.sectionPrimary,
)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<div className="margin-vert--lg text--center">
<h2 className={styles.sectionDarkTitle}>
<h2 className={styles.sectionPrimaryTitle}>
Job hunting? Sign up with Triplebyte to efficiently
interview with top tech companies and land your dream job!
💰
@ -68,11 +73,16 @@ function Home() {
</div>
</div>
</div>
<p className="padding-vert--xl">
<p className="container">
<p className="row">
<p className="col col--10 col--offset-1">
<h2 className="text--center margin-bottom--xl">
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
<div className="container">
<div className="row">
<div className="col col--10 col--offset-1">
<h2
className={classnames(
'text--center',
'margin-bottom--xl',
styles.sectionTitle,
)}>
Why Tech Interview Handbook?
</h2>
<div className="row margin-vert--lg">
@ -86,7 +96,7 @@ function Home() {
<div className="col">
<h3>Curated Practice Questions</h3>
<p>
No one has time to practice a few hundred Leetcode
No one has time to practice a few hundred LeetCode
questions. We tell you which are the best questions to
practice.
</p>
@ -94,11 +104,12 @@ function Home() {
<div className="col">
<h3>Interview Cheatsheet</h3>
<p>
Straight-to-the-point Do's and Don'ts during an interview
Straight-to-the-point Do's and Don'ts during an interview.
Knowing these, the battle is already half won.
</p>
</div>
</div>
<p className="row margin-vert--lg">
<div className="row margin-vert--lg">
<div className="col">
<h3>Practical Algorithm Tips</h3>
<p>
@ -113,27 +124,111 @@ function Home() {
and you can prepare your answers ahead of time.
</p>
</div>
<p className="col">
<div className="col">
<h3>Tested and Proven</h3>
<p>
Countless engineers have gotten their dream jobs with its
help.
</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className={classnames(
'margin-vert--lg',
'padding-vert--lg',
'text--center',
styles.sectionAlt,
)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<h2
className={classnames(
'margin-vert--lg',
styles.sectionTitle,
)}>
Enjoying Tech Interview Handbook so far?
</h2>
<p className={classnames(styles.sectionTagline)}>
Support this project by becoming a sponsor! Your logo/profile
picture will show up here with a link to your website.
</p>
</p>
</p>
</p>
</p>
<div className={styles.sectionAlt}>
<div className="container padding-vert--xl">
<div>
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/0/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/0/avatar.svg" />
</a>
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/3/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/3/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/4/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/4/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/5/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/5/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/6/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/6/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/7/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/7/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/8/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/8/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/9/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/9/avatar.svg" />
</a>
</div>
<div className="margin-vert--lg">
<a
className="button button--primary button--lg"
href="https://opencollective.com/tech-interview-handbook"
rel="noreferrer noopener"
target="_blank">
Become a sponsor!
</a>
</div>
</div>
</div>
</div>
</div>
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
<div className="container">
<div className="row">
<div className="col col--6 col--offset-3">
<div className="margin-vert--lg text--center">
<h2>Success Stories</h2>
</div>
<h2
className={classnames(
'margin-vert--lg',
'text--center',
styles.sectionTitle,
)}>
Success Stories
</h2>
{successStories.map(user => (
<div className="card margin-vert--lg" key={user.name}>
<div className="card__body">
<p className={styles.quote}>"{user.quote}"</p>
</div>
<div className="card__header">
<div className="avatar">
<img className="avatar__photo" src={user.thumbnail} />
@ -145,16 +240,13 @@ function Home() {
</div>
</div>
</div>
<div className="card__body">
<blockquote>"{user.quote}"</blockquote>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</main>
</div>
</Layout>
);
}

@ -21,18 +21,26 @@
justify-content: center;
}
.sectionTitle {
font-size: 2rem;
}
.sectionTagline {
font-size: 1.25rem;
}
.sectionAlt {
background-color: var(--ifm-color-emphasis-alpha-05);
background-color: var(--ifm-color-emphasis-100);
}
.sectionDark {
.sectionPrimary {
background-color: var(--ifm-color-primary);
}
.sectionDarkTitle {
.sectionPrimaryTitle {
color: var(--ifm-color-white);
}
.sectionDarkLink {
color: var(--ifm-color-black-alpha-80);
.quote {
font-size: 1.1rem;
}

Loading…
Cancel
Save