平面设计 前端

2017 was a bumpy yet exciting year for me. I left my graphic designer job in March, and entered the maze of the coding world. Five months later, I finally got a job as a front-end developer at Tenten.co.

2017年对我来说是坎a而又令人兴奋的一年。 我三月份离开了图形设计师的工作，进入了编码世界的迷宫。 五个月后，我终于在Tenten.co上找到了前端开发人员的工作 。

Having been a full-time front-end developer for six months, I’d like to share my story of why and how I pivoted my life path. This is for those who might be as helpless but ambitious as I am.

作为一个全职前端开发人员已经六个月了，我想分享一下我为什么以及如何改变自己的人生道路的故事。 这是针对那些可能像我一样无助但雄心勃勃的人的。

To be clear, this post is not written from the perspective of a seasoned developer or designer who’s able to illustrate a clear road map to follow. Neither is it a crash course for learning front-end development. There are lots of great tutorials on this topic, and I will list some later in the article.

需要明确的是，本文并非从经验丰富的开发人员或设计师的角度撰写的，他们可以说明遵循的明确路线图。 这也不是学习前端开发的速成课程。 关于这个主题有很多很棒的教程，我将在本文的后面列出一些。

Remember, the perfect (universal) path for all individuals does not exist.

请记住，不存在所有个人的完美(通用)路径。

我的背景 (My Background)

I was a 24 year old graphic designer with no experience related to coding at all. In my school days, my exam scores of math, physics, chemistry and science were horribly low. These subjects scared me with dull and complex formulas, numbers, and errors. Things that interested me back then were always the beauty created by paint, music, or words. Naturally, I chose English as my major, and got fascinated by literature, culture, photography and design in college.

我是24岁的平面设计师，完全没有编码方面的经验。 在我上学的时候，我的数学，物理，化学和科学考试成绩都非常低。 这些主题使我感到愚蠢而复杂的公式，数字和错误。 那时令我感兴趣的事物总是由绘画，音乐或文字创造的美丽。 自然，我选择了英语作为我的专业，并且对大学的文学，文化，摄影和设计着迷。

How I learned how to design in college by myself and finally became a graphic designer after graduation is story for another day. The point is, throughout my entire life until last year, I’d dreamed of being a writer, photographer, film critic, singer and designer, but I never thought of being a developer under any circumstances.

我如何在大学里独自学习如何设计，并在毕业后最终成为平面设计师又是另一回事了。 关键是，直到去年，我一直梦想着成为一名作家，摄影师，电影评论家，歌手和设计师，但是我从来没有想过要成为一名开发人员。

为什么我要编码 (Why I Wanted to Code)

For me, graphic design serves the purpose of solving a problem with attractive visual forms supported by invisible systems or structures.

对我来说，图形设计的目的是解决由不可见系统或结构支持的有吸引力的视觉形式的问题。

As the world is facing so many critical issues, I believe that problem-solving design thinking can and should help deal with some of these issues. Of course I was only trying to layout something beautiful the first time I opened Photoshop. Yet, the more I learned about design, the more I craved to engage in critical issues with graphic design.

随着世界面临如此众多的关键问题，我相信解决问题的设计思维可以而且应该有助于解决其中的一些问题。 当然，我第一次打开Photoshop只是在尝试布局漂亮的东西。 但是，我对设计了解得越多，就越热衷于处理图形设计中的关键问题。

But, after many endeavors to achieve my ambition, I was deeply disappointed at the impact that graphic design could make in Taiwan (or maybe the whole world?).

但是，在为实现自己的雄心壮志而付出了许多努力之后，我对图形设计可能对台湾(或可能对整个世界？)产生的影响深感失望。

There’s no doubt that I’m still aware of the power and importance of great design. But most of the time, designers are only allowed to deal with the “client’s problem,” instead of tackling “real problems client have.” Designers spend most of the time guessing their client’s wishes with no profound data and analysis, but only intuition, experience, or common sense.

毫无疑问，我仍然知道出色设计的力量和重要性。 但是在大多数情况下，只允许设计师处理“客户的问题”，而不是处理“客户的实际问题”。 设计师大部分时间都在没有深刻的数据和分析的情况下猜测客户的意愿，而只是凭直觉，经验或常识。

I got tired of this game two years into my graphic design career.

在我进入图形设计生涯的两年后，我对这个游戏感到厌倦。

That’s when I decided to take a serious look at the always trending front-end development topic on Medium.

从那时起，我决定认真研究Medium上始终流行的前端开发主题。

I found that being a developer with design skills allowed you to have way more control and authority over each case and client. Besides, working on web development or applications allows you to efficiently propagate information.

我发现，作为一名具有设计技能的开发人员，可以使您对每种情况和客户有更多的控制和权限。 此外，从事Web开发或应用程序可以使您有效地传播信息。

I left my graphic design job at the end of February. With no elaborate plan and limited saving in the bank, I started my journey of transforming into a front-end developer.

我于2月底离开了图形设计工作。 由于没有详尽的计划和银行的有限储蓄，我开始了转型为前端开发人员的旅程。

该怎么办 (What to Do)

Taking the first step is always hard. But if you recognize what the reason propelling you is, things get simpler. For example, if your purpose of becoming a developer is getting paid better ASAP, then you should learn the hot stuff in the market.

迈出第一步总是很难。 但是，如果您知道推动自己前进的原因是什么，事情就会变得简单。 例如，如果您成为开发人员的目的是尽快获得更高的报酬，那么您应该了解市场上的热门话题。

In my case, because I realized that my current goal was to earn the power to combine design with development skills, I focused on showcasing both abilities.

就我而言，因为我意识到我当前的目标是获得将设计与开发技能相结合的能力，所以我专注于展示这两种能力。

So, I set a goal, and made a list of required tasks with my shallow understanding of front-end development:

因此，我对前端开发有了较浅的了解，从而设定了目标，并列出了所需的任务：

1.目标 (1. Goal)

Get a front-end developer job

获得前端开发人员工作

2.如何实现目标 (2. How to achieve the goal)

Build my portfolio site for showcasing my ability

建立我的投资组合网站以展示我的能力

3.要做的任务 (3. Tasks to do)

• Learn HTML, CSS, jQuery/JavaScript学习HTML，CSS，jQuery / JavaScript
• Design portfolio site设计作品集网站
• Portfolio works preparation作品集准备

I assigned only these tasks for myself at first. But as I read more articles, tutorials, or job requirements, I put these skills on the list along the way:

首先，我只为自己分配了这些任务。 但是，当我文章，教程或工作要求时，就将这些技能一并列出：

• Sass萨斯
• Gulp古尔普
• CS50CS50
• Basic Unix基本Unix
• Basic Wordpress基本的WordPress
• Jekyll杰基尔
• Basic AWS knowledgeAWS基本知识
• Basic networking knowledge基本的网络知识

Note: To be sure, the exploding information on web bombed me with more things to learn. In the five months, I had once put Node.js, React.js, PHP and more on the list. The tasks above were the ones that I actually completed in the end.

注意：可以肯定的是，网络上爆炸性的信息使我学习了很多东西。 在这五个月中，我曾经将Node.js，React.js，PHP以及其他内容列入清单。 上面的任务是我最后实际完成的任务。

To follow the plan, I set a 48hr/week working goal for myself. It meant I had to work eight hours a day with only one day off in a week. Toggl helped me keep track of my performance.

为了遵守该计划，我为自己设定了48小时/周的工作目标。 这意味着我每天必须工作八小时，一周只休息一天。 Toggl帮助我跟踪了自己的表现。

Also, I took a long-term goal -> monthly goal -> weekly agenda -> daily agenda method to make my learning schedule, and Asana was my best assistant on managing these tasks.

此外，我制定了长期目标->每月目标->每周议程->每日议程方法来安排学习计划，而Asana是我管理这些任务的最佳助手。

在哪里学习 (Where to Learn)

I tried to learn from many platforms, tutorials, or articles along the way. Here’s the list of the resources and my thoughts to each of them:

在此过程中，我尝试从许多平台，教程或文章中学习。 以下是资源列表以及我对每个资源的想法：

学习平台 (Learning Platforms)

Back then, I hated the tutorials that showed me lines of codes I didn’t have any idea what to do with. Some assumed that I knew every bit of it, or they told me to ignore it for now. Please, I genuinely didn’t understand even a line of the code on the screen, because I was a TOTAL BEGINNER.

那时，我讨厌那些向我展示不知道如何处理代码的教程。 有些人以为我了解它的全部内容，或者他们告诉我暂时忽略它。 拜托，由于我是TOTAL BEGINNER ，我什至根本不理解屏幕上的一行代码。

Those kinds of lectures pained me, and made me looked down on myself. Generally, there’s no perfect platform to learn everything. I tried to be as flexible as I could, jumping between each of them.

这些演讲使我很痛苦，使我看不起自己。 通常，没有完美的平台可以学习所有内容。 我试图尽可能地灵活，在他们每个人之间跳来跳去。

• Codecademy — Lots of people recommended it, but I was pretty frustrated by its tutorials back then. I always stuck in practice without any clues.

  密码学 - 很多人推荐它，但是当时我对它的教程感到非常沮丧。 我总是一无所获。

• Code School — I spent lots of time here, because the teachers explain the whys clearly. Recommended.

  码 学校 - 我在这里花了很多时间，因为老师清楚地解释了原因。 推荐的。

• Treehouse — The one with the most ads on Youtube! Treehouse has done a great job on marketing, which works (at least for me as a lost beginner back then). It covers so many topics, some of which were really useful for me. For example, it’s hard to find a decent tutorial of Wordpress for front-end developer students out there, but Treehouse has one.

  树屋 - 在YouTube上投放最多广告的广告！ Treehouse在市场营销方面做得非常出色，而且行之有效(至少对于我当时迷失的初学者而言)。 它涵盖了许多主题，其中一些对我真的很有用。 例如，很难为前端开发人员的学生找到像样的Wordpress教程，但是Treehouse有一个。

• freeCodeCamp — Huge love for freeCodeCamp! This community has a clear path for beginners to follow, and it knows when to take the training wheels away from student. I was once anxious about what to do next after learning basic HTML, CSS and JavaScript, but freeCodeCamp put small projects on the right spots in the learning track. The community also shares great posts on Medium and by emails. Highly recommended!

  freeCodeCamp —对freeCodeCamp的热爱！ 这个社区为初学者提供了一条清晰的道路，并且知道何时将训练轮带离学生。 在学习了基本HTML，CSS和JavaScript之后，我曾经担心下一步该做什么，但是freeCodeCamp将小型项目放在学习轨道的正确位置。 该社区还通过Medium和电子邮件分享了很棒的帖子。 强烈推荐！

YouTube频道 (Youtube Channel)

This is the best place to learn for free or for fun. Youtube videos are not only great for learning certain topics thoroughly from playlists, but are also handy for having a taste of some interesting knowledge.

这是免费或有趣的最佳学习场所。 Youtube视频不仅非常适合从播放列表中全面学习某些主题，而且还可以帮助您了解一些有趣的知识。

• The Coding Train — Hosted by NYU’s ITP professor Daniel Shiffman, who is the most vigorous teacher I’ve ever seen, the channel provides easy-to-follow videos.

  该频道由纽约大学ITP教授丹尼尔·谢夫曼(Daniel Shiffman)主持，他是我见过的最有活力的老师，该频道提供了易于观看的视频。

• thenewboston— Covers almost any topics I can think of. The host, Bucky, has the power of making intimidating things sounds easy.

  thenewboston —涵盖了我能想到的几乎所有主题。 主持人Bucky具有使听起来吓人的声音变得容易的力量。

• Academind — Also provides all kinds of tutorials. Easy to follow. Recommended.

  Academind —还提供各种教程。 易于遵循。 推荐的。

• Fun Fun Function — The host Mattias Petter Johansson is a developer who had previously worked at Spotify and Blackberry. His channel is a nice place to learn JavaScript in an easy way.

  有趣的娱乐功能 -主持人Mattias Petter Johansson是一名开发人员，之前曾在Spotify和Blackberry工作。 他的频道是学习JavaScript的好地方。

• Linux Academy — I learned some basic knowledge of AWS here. Liked it!

  Linux学院 —我在这里学习了一些AWS的基本知识。 喜欢它！

• Computerphile — The videos here are all about computer stuff. Interesting to know, but I’ll probably never truly understand what they’re talking about.

  Computerphile —这里的视频都是关于计算机的东西。 有趣的是，但我可能永远不会真正理解他们在说什么。

• Eli the Computer Guy — I learned knowledge about networking or servers here.

  Eli，计算机专家 -我在这里了解了有关网络或服务器的知识。

• mycodeschool — My best friend while I took CS50. It explains computer science stuff clearly. Loved it.

  mycodeschool —我参加CS50时最好的朋友。 它清楚地解释了计算机科学的内容。 爱它。

阅读文章 (Articles to read)

Readings are a perfect medium for topics of life paths or inspiration for me. I was pumped by great articles when frustrated so many times in the five months. Here’re some of my best life guides:

对于我的人生道路或灵感来源，阅读是一种理想的媒介。 在五个月中无数次沮丧时，我被伟大的文章所吸引。 这是我一些最佳的生活指南：

• Why Learning to Code is So Damn Hard

  为什么学习编码是如此之难

• I learned to code, build a web app and launch it on Product Hun in 2 months

  我学会了编写代码，构建Web应用程序并在2个月内在Product Hun上启动它

• Why I studied full-time for 8 months for a Google interview

  为什么我全职学习了8个月以接受Google采访

• How to Go From Hobbyist to Professional Developer

  如何从业余爱好者变成专业开发人员

• Learn To Code in 2017, Get Hired, And Have Fun Along the Way

  在2017年学习编码，被雇用并在旅途中玩得开心

• The Ultimate Guide to Learning Full Stack Web Development in 6 months, for $30

  只需30美元，即可在6个月内学习全栈Web开发终极指南

其他有用的资源 (Other Useful Resources)

• JavaScript: Understanding the Weird Parts — Great Udemy course that clarify so many confusing parts of JavaScript for me. Highly recommended.

  JavaScript：理解怪异的部分 —很棒的Udemy课程，为我澄清了许多令人困惑JavaScript部分。 强烈推荐。

• CS50 at Harvard — I knew Computer Science knowledge was not a must-have knowledge for applying to junior front-end developer job, but I couldn’t resist the temptation to take this course because it looked so interesting! It was worth my precious time in retrospect.

  哈佛大学的CS50 －我知道计算机科学知识不是申请初级前端开发人员工作所必需的知识，但是我忍不住上这门课程的诱惑，因为它看起来是如此有趣！ 回想起来，这是我宝贵的时间。

• NYMY — Episode 1 — Pieter Levels — NYMY is a podcast show hosted by talented designer Tobias van Schneider. He interviewed the maker of NomadList Pieter Levels in this episode. I listened to Pieter’s story several times when I was down. This one hour show introduced me to the infinite possibilities of being a coder/designer.

  NYMY —第1集— Pieter Levels — NYMY是由才华横溢的设计师Tobias van Schneider主持的播客节目。 他在这一集中采访了NomadList Pieter Levels的制造商。 我沮丧的时候听了好几次皮特的故事。 这个一小时的节目向我介绍了成为编码器/设计师的无限可能。

如何找到工作 (How to Get a Job)

After about 4 months of non-stop coding and designing, I finally knew a little about the front end. I had also completed almost 80% of my portfolio site. At the same time, my remaining savings were only enough for me to live on for another couple of months.

经过大约4个月的不间断编码和设计，我终于对前端有所了解。 我还完成了我投资组合网站的近80％。 同时，我剩下的积蓄仅够我继续生活几个月。

It was time to look for a new job.

是时候寻找新工作了。

Unfortunately, I had barely any choices at all. Not many companies wanted a man with no relative development experience/background, and even fewer appreciated the value of my graphic design abilities. It was also sad to have fewer than five job opportunities that were possibly a fit for me. On the bright side, the situation forced me to focus on these precious chances.

不幸的是，我几乎没有任何选择。 没有多少公司想要一个没有相关开发经验/背景的人，甚至更少的公司赞赏我的图形设计能力的价值。 也有人痛心地有可能是一个适合我少于五个工作机会。 从好的方面来看，形势迫使我将精力集中在这些难得的机会上。

I had been watching the design agency Tenten for at least three years. It is the one and only agency that’s able to harness design, digital development, and innovation at the same time in Taiwan. I’ve had them on my “please hire me” list for a long time, and I believed Tenten was the only company here that would be sold on my multi-disciplinary skills as well.

我已经看过Tenten设计公司至少三年了。 它是台湾地区唯一能够同时利用设计，数字开发和创新的公司。 我已经将他们列入我的“请雇用我”名单很长时间了，我相信Tenten是唯一一家将以我的多学科技能出售的公司。

In the last two months of my journey, I learned as much as I could about Tenten’s junior front-end developer position. Meanwhile, I completed my personal site. When the time was ripe, I applied for the position. As backup plans, I sent my resume and portfolio to other five companies as well. And I waited.

在旅程的最后两个月，我对Tenten初级的前端开发人员的职位了解了很多。 同时，我完成了我的个人网站。 时间成熟了，我申请了这个职位。 作为备份计划，我也将简历和投资组合也寄给了其他五家公司。 我等了。

And finally…

最后...

回想起来 (In Retrospect)

Looking back, I still wouldn’t say that transforming myself from a designer to a developer was easy, but it wasn’t as hard as I thought it would be, either. The hardest part of the process was never understanding or writing the code, but having the powerful motivation that drives you forward.

回顾过去，我仍然不会说将自己从设计师转变为开发人员很容易，但也没有我想的那么难。 该过程中最困难的部分是从不理解或编写代码，而是具有促使您前进的强大动力。

Congratulations if you’ve found this motivation. If you haven’t, give it more try before you quit. If you never try, you’ll never know.

恭喜您找到了这种动力。 如果还没有，请在退出前尝试一下。 如果你不去尝试，你永远不会知道。

The most important lesson I learned along the way was to start doing something ASAP. I know it’s terrifying to take the first step of actually building something, but it’s the only way to truly learn something. Remember, you have nothing to lose anyway.

我在此过程中学到的最重要的一课是尽快开始做某事。 我知道迈出第一步，真正构建东西真是令人恐惧，但这是真正学习一些东西的唯一途径。 请记住，无论如何您都不会丢失。

The days and hardships after formally becoming a developer are another story.

正式成为开发人员后的日子和艰辛是另一个故事。

I’m so glad to have been a front-end developer at Tenten for 6 months now. The journey of learning never ends!

我很高兴能成为Tenten的前端开发人员六个月了。 学习的旅程永无止境！

---

---

中文版連結 (Chinese Version) / Read more of my work on vinceshao.com

中文版连结 (中文版)/在vinceshao.com上阅读我的更多作品

翻译自: https://www.freecodecamp.org/news/graphic-designer-to-front-end-developer-7be7bfd6a46c/

平面设计 前端