Lainbo

Lainbo's Blog

If you’re nothing without the suit, then you shouldn't have it.
github
email
follow

Frontend Developer Resume Tutorial + Template📜

Resume File Tips#

The resume file should be in PDF format, not a Word document or image.

The resume file name should follow the format: job position_name_phone number, for example: Web Frontend Developer_Zhang San_13212345678.pdf.

I recommend a free platform for generating resumes that can help you quickly fill in the information below and create a resume: Developer's Inn - Resume


Personal Information#

Name / Age / Phone / Email (try not to use QQ email, just in case) / Personal website, GitHub address / Work experience (x years) / Job position / Expected salary: (it's best to write negotiable, as it's better to secure an interview opportunity first; if they think you're good after the interview, they might offer a high salary)

For example:

Zhang San#

13212345678 | zhangsan@163.com | Beijing

https://github.com/your-own/(or your personal website)

x years of work experience | Web Frontend Developer | Salary negotiable

Skills List#

There are two ways to write this:

  1. Pure Frontend Writing, suitable for those who only know frontend-related skills.

    • Highlight your strengths, write about 5-10 points that you can discuss, such as "proficient in using ES6 syntax, able to use and read the source code of xxx, have xxx achievements."
    • Do not write statements like "can use axios to send requests," as axios can only send requests and nothing else; it's like saying "I can boil water with a kettle," which is essentially useless information. Avoid writing such statements.

    For example:

    1. Proficient in Vue2, Vue3, and the entire React ecosystem, with a personal understanding of their source code.
    2. Familiar with various component libraries corresponding to the tech stack, understanding their APIs and some discrepancies between performance and expectations.
    3. Solid foundational skills in JS, CSS, etc., with deep accumulation, fully aware of various API features, and able to apply best practices effortlessly.
    4. Proficient in using Chat GPT, Claude, and GitHub Copilot for development and optimization, mastering various elements of writing prompts, and skilled at guiding AI to produce high-quality code.
    5. Proficient in using visualization solutions like Echarts and AntV.
    6. Proficient in ES6 (es2015 - es2022).
    7. Proficient in TypeScript, familiar with type programming.
    8. Proficient in various algorithms / familiar with some business-applicable algorithms, able to perform performance optimizations where appropriate.
    9. Proficient in atomic CSS frameworks/engines like Windi CSS, Tailwind CSS, and UnoCSS.
    10. Proficient in frontend engineering, having achieved xxx results through engineering practices.
    11. Familiar with preprocessors like Less and Scss (if you only know basic functions like nesting CSS and writing variables, it's best to write "familiar").
  2. Comprehensive Writing, suitable for those with a certain level of comprehensive ability, not limited to frontend skills.

    • Do not break down skills too finely; the basic principle is still to highlight strengths and avoid useless information.

    For example:

    1. Full Stack Development Ability: Mastering the full stack development process, able to proficiently use NestJS and Go for backend development. Capable of designing efficient database architectures and executing optimizations for MySQL and Redis.
    2. Vue: Familiar with the Vue2 and 3 ecosystems and related tools, plugins, and dependencies; deeply understand Vue's source code and its operational mechanisms. Skilled at using various methods to enhance the performance and user experience of business applications.
    3. React: Familiar with the React ecosystem and related tools, plugins, and dependencies; deeply understand internal mechanisms, able to efficiently solve complex frontend problems and optimize performance.
    4. Build Tools: Skilled in using modern build tools like Webpack, Vite, and Rspack for modular development. Proficient in using excellent frontend engineering tools to enhance developer experience; able to use features like module federation to create flexible and efficient micro-frontend architectures, effectively reducing system complexity and improving project maintainability and scalability.
    5. UI Design and Aesthetic Ability: Possessing a certain level of UI design ability, able to design aesthetically pleasing and practical user interfaces; adept at combining cognitive bias knowledge with UI interfaces to create user-friendly product logic and interfaces.
    6. Operations and Automation Deployment Skills: Familiar with the configuration and optimization of Linux, OpenResty, and Docker. Skilled at using sh and Python scripts to enhance operational efficiency and system stability, with capabilities in automated deployment and system maintenance.
    7. AI Technology: Proficient in using AI technologies (like ChatGPT's GPT-4, Claude), having systematically studied generative AI courses from the "father of Google Brain," skilled at guiding AI to provide high-quality answers in most fields.
    8. Learning Ability: Enjoy reading documentation and source code of open-source projects, understanding their concepts. Possessing an international perspective and quality information sources, with various capabilities to solve network issues; able to quickly adapt to emerging solutions that benefit the business.
    9. Code Quality and Standards: Emphasizing code quality and standards, prioritizing readability and performance in code style, able to quickly integrate into the team's rhythm.
    10. Multi-Platform Development Experience: Familiar with cross-platform development for web, mobile (mini-programs, public accounts), and desktop applications (electron, tauri).

Remember the above two methods.

When writing, follow the order of "proficient - skilled - familiar." What you write must withstand questioning; do not write randomly.

Project Experience#

Just write about 3 representative projects; do not write too many unnutritious projects.

Title: Project Name - Role (Frontend Developer) — Time (Project Start - Project End/Present)

For example:

xxx Mall - Frontend Developer — March 1, 2021 - July 20, 2021

Project Description: Use the STAR principle, which stands for Situation, Task, Action, and Result. Correspondingly, 【S】what is the background of this project, which can be an introduction to the project or the problems and difficulties encountered, 【T】what work needs to be done, what responsibilities you held, 【A】what methods were used to solve these problems, and 【R】what measurable results were achieved.

For example:

Project Description: The project time was very tight, needing to achieve xxx results under xxx circumstances (this is S), I was responsible for xxx (development/coordinating/…), needing to ensure users xxxxx during this time (this is T), I conducted xxx research, chose to use xxx development method, and did xxx (clever operations/some impressive techniques) in the project (this is A), ultimately completing the project before xxx, with a bug count of xxxx (this is R).

Project Responsibilities:

Do not write:

  • Avoid writing "useless information"; this is not derogatory but similar to the feeling of listening to a long-winded speech where it seems like something was written, but it feels like nothing was conveyed.
  • Incorrect Examples:
    1. I was responsible for developing the navigation bar.
    2. I collaborated with the backend to develop the xxx page.
    3. I accurately restored the design draft.

💡 Explanation: The above errors lie in: If you can't accomplish these tasks, then you won't be able to complete the work, because similar demands will certainly arise in the future; if you can complete them, others can too, so you lack competitiveness. The resume should highlight your competitiveness.


Do write:

  • Because of you, the project achieved a certain effect; it's an achievement, not just what you did (I made a navigation bar, homepage, etc.; the interviewer doesn't care about what you did in your last job; they only care about what you can bring to the company).
  • Correct Examples:
    1. Completed the encapsulation of over ten basic components and more than 20 common functions, making functionality more aligned with business needs.
    2. Optimized packaging speed, improving packaging speed by 384% (63s -> 13s).
    3. Conducted performance optimization, increasing first-screen display speed by 1233% (4s -> 0.3s).

💡 Explanation: Remember one thing, write specific numbers!!! This reflects your value, and specific numbers serve as evidence. Besides fulfilling requirements, what else can you achieve that others cannot? Writing these down gives you competitiveness. These achievements do not necessarily have to be from your own work; as long as you can recall optimization points from projects you've learned about or seen, articulate the principles or sequences, and replicate the optimizations/features in other projects to achieve expected results, then you can include them in your resume. Most importantly, write about achievements, not just tasks completed.

Work Experience#

List them out, and indicate if it's an outsourcing company!!! Some companies conduct background checks, and if they find that the company paying your social security is not the one you listed, it may negatively affect their impression of you. Some companies are sensitive to frequent job changes within a short period, so avoid writing too many.

For example:

  • aaa Company (Outsourcing) - Frontend Developer — March 2021 - Present
  • bbb Company - Frontend Developer — March 2020 - December 2020

Personal Description#

Highlight your strengths! ! ! Avoid writing things like "especially hardworking," as this is no different from saying "especially able to eat." Write something practical.

For example:

  1. Strong information acquisition ability, with a strong capacity for obtaining information.
  2. Strong problem-solving skills, responsible for work (a brief example to support this).
  3. Passionate about reading frontend books (if you have actually read them). Each point should not exceed half a line, and provide examples to support them; avoid empty statements.
  4. Possessing design aesthetics or a keen sense of product intuition, resulting in excellent product experiences and meticulous work.

Education Experience#

If your academic qualifications are impressive, you can place them near the top, even in the personal information section.

Conversely, you can place them at the end; if the HR sees your qualifications and initially doesn't want you, but is compelled to read your resume and finds it decent, they might be less concerned about your qualifications, thus giving you an interview opportunity.

For example:

Claden University - Chinese Language and Literature, Bachelor's

Claden University - Software Engineering, Master's

End of resume section.


Postscript: How to Write a Resume#

  1. Three main principles of a resume: clarity, brevity, necessity, leaving a good impression on the interviewer.
  2. Technical ability matching: meet the requirements of the employer, ensuring technical proficiency.
  3. Highlight project strengths: within 10 seconds, the interviewer should notice the highlights and be motivated to ask further questions.

Three Main Principles of a Resume#

  1. Clarity: The resume should be easy to understand, with simple formatting, such as clear information on school and graduation dates, years of work experience, relevant industry experience, job positions, etc.
  2. Brevity: In work reports or job interviews, "highlighting key points" is a very important skill, helping the interviewer quickly grasp the main points you want to convey. Very important parts can be appropriately bolded, and the resume should not exceed 2 pages. If you're unsure how to do this, I recommend reading "The Pyramid Principle," which is excellent.
  3. Necessity: The resume should only contain necessary information that maximizes time-saving and efficiency for both parties. Ensure that the content in the resume is of interest to the interviewer. Basic information like hometown is not important for interviews, so it doesn't need to be included. Some people include GitHub or blog links in their resumes; if the blog content is substantial, it can be included; if it only contains a few interview notes, it's better not to include such links, as it may lower your score. If you include a blog link, the interviewer will generally take a look, so prepare the blog content to avoid awkwardness during the interview. Some people list all similar projects in their project experience, such as A management backend, B management backend; in fact, these work contents are not very different, so writing one representative project is sufficient.

Technical Ability Matching#

This section highlights in-depth areas and core skills mastered, such as experience in performance optimization, monitoring, engineering, etc., mastery of Vue/React source code, understanding of network and browser principles, familiarity with data structures and algorithms, etc. Highlighting these aspects can guide the interviewer toward the battlefield you have pre-set; if the resume does not allow the interviewer to find highlights, it becomes an exam where they ask and you answer, losing the initiative. Interviewers do not enjoy asking rote questions; if they cannot find highlights in the resume, they can only resort to asking standard questions.

Highlight Project Strengths#

From certain points in the project, demonstrate your value that is worth writing in the resume.

  1. Optimization of large data volumes.
  2. Improvement in development efficiency.
  3. Enhancement of development quality.
  4. Performance optimization.
  5. User experience optimization.
  6. Complex & new scenarios.

Salary Negotiation Methods#

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.