前端项目结构构建_如何通过构建项目成为更好的前端开发人员（包括想法）

前端项目结构构建

If you want to fast-track your growth as a front-end developer, nothing beats doing real development projects.The truth is you can watch all the tutorials and courses in the world, but without application and practice, you won’t really learn skills that you need to work on real projects.Client projects don’t come with step-by-step instructions because otherwise, they wouldn't need you at all. You’ll have to think outside the box, find solutions, compromise, and hack your way to the finish line.The best way to learn these skills is to do some front-end developer projects and learn along the way. And the best part? You don’t even need a client to get started because you can do these projects by yourself.

如果您想快速成长为前端开发人员，那么做真正的开发项目无非是事实，您可以观看世界上所有的教程和课程，但是如果没有应用和实践，您将不会真正学习客户项目不需要附带分步说明，因为否则他们根本不需要您。 您必须跳出思路，找到解决方案，妥协并突破终点线。学习这些技能的最佳方法是做一些前端开发人员项目并逐步学习。 最好的部分是？ 您甚至不需要客户开始，因为您可以自己完成这些项目。

如何选择个人前端开发项目 (How to Choose a Personal Front-End Development Project)

记住您的技能水平 (
Keep your skill level in mind)

Don’t choose a project that’s too advanced for your skill level, especially if you’re the type to lose motivation when things get too hard.But don’t forget that since the goal here is to help you master front-end development, choose a project that reaches beyond your current skill level but is still doable.For example, if you’ve recently learned HTML and CSS, it’s time to level up by learning JavaScript.

不要选择对您的技能水平来说太高的项目，尤其是当您在事情变得过于艰难时会失去动力时。但是不要忘记，因为这里的目标是帮助您掌握前端开发，选择一个超出您当前技能水平但仍然可行的项目。例如，如果您最近学习过HTML和CSS，那么现在该学习JavaScript了。

解决个人问题或您关心的问题 (Solve a personal problem or a problem you care about)

You’re also more likely to enjoy and stick with a project if it solves your own problems or fulfills your own desires.Maybe you always lose track of time when you’re scrolling through your Facebook news feed, or you want a website where you can automatically generate engaging YouTube thumbnails.Think of a personal problem that you can solve with technology and start from there. The suggestions in this article are only meant to be a starting point. It will be much better if you alter it to add your unique twist.

如果项目能够解决您自己的问题或满足您自己的愿望，您也更可能喜欢并坚持一个项目。也许当您滚动浏览Facebook新闻提要时总会失去时间的踪迹，或者想要一个网站来可以自动生成引人入胜的YouTube缩略图。请考虑一下可以使用技术解决的个人问题，并从那里开始。 本文中的建议仅是一个起点。 如果您对其进行更改以添加独特的效果，那就更好了。

4个有趣的前端开发项目 (4 Fun Front-End Development Projects)

构建网站的克隆。 (Build a clone of a website.)

Skills to learn: HTML, CSS, JavaScript, and/or Bootstrap.Building a clone of a website is a great way to explore how it is constructed and learn the basics of page structure, colors, fonts, media, tables, and more. Go into as much detail as you can to replicate the original.Choose a website that you like and build a clone of it yourself. Don’t look at the source code as much as possible to get the most out of it.Cloning Google is actually one of Thinkful’s exercises for their coding workshop students. Thinkful is an educational company that offers technology courses including a web development bootcamp.

学习技能：HTML，CSS，JavaScript和/或Bootstrap。构建网站的克隆是探索网站的构建方式以及学习页面结构，颜色，字体，媒体，表格等基础知识的好方法。 尽可能多地复制原件。选择一个您喜欢的网站，然后自己构建一个副本。 不要尽可能多地查看源代码以充分利用源代码。克隆Google实际上是Thinkful针对其编码工作室学生的练习之一。 Thinkful是一家教育公司，提供包括网络开发训练营在内的技术课程。

You can also follow this exercise to help you clone the landing page of an app called Karma WiFi. It was created by Kyle Koski, one of Thinkful’s mentors, and uses HTML and CSS.What’s good about cloning a website is you can choose the level of complexity of the website. If you’re just starting out, a simple website that only needs HTML and CSS is a good place to start. If you’re more advanced, pick a website that requires JavaScript or React.

您也可以按照此练习来帮助您克隆名为Karma WiFi的应用程序的登录页面。 它由Thinkful的导师之一Kyle Koski创建，使用HTML和CSS。克隆网站的好处是您可以选择网站的复杂程度。 如果您只是刚入门，那么一个仅需要HTML和CSS的简单网站就是一个不错的起点。 如果您更高级，请选择一个需要JavaScript或React的网站。

创建一个JavaScript问答游戏。 (Create a JavaScript quiz game.)

Skill to learn: JavaScriptJavaScript is a programming language that allows you to make interactive webpages. It’s the language you use when creating responsive elements like menus, video players, animations, interactive maps, and even in-browser games.But before we proceed, it’s important to know why you would want to build a quiz.It’s more than fun and games. Quizzes are actually gaining popularity as content marketing tools. Ever seen these kinds of things?

学习技能：JavaScriptJavaScript是一种编程语言，可让您制作交互式网页。 这是您在创建菜单，视频播放器，动画，交互式地图甚至浏览器内的游戏等自适应元素时使用的语言，但是在继续之前，重要的是要知道为什么要进行测验，这不仅有趣而且游戏。 实际上，测验作为内容营销工具正变得越来越流行。 见过这些东西吗？

Quizzes are terrific marketing tools because they are interactive. According to a poll by Content Marketing Institute, 81% of marketers agree that interactive content – which is any kind of content that requires the user to participate – grabs attention more effectively than static content.For this reason, quizzes are used for different marketing purposes. Trivial quizzes, like the one on the left, are used to boost traffic to a website. Some marketers also use quizzes to qualify leads, segment leads, and increase engagement.I’m explaining this because as a developer, your job is to not only make sure things look pretty, but also to create features that are user-friendly and will make your client’s website more effective in achieving its sales and marketing goals.To create a quiz, check out these tutorials on making JavaScript quizzes from WebDevTrick and SitePoint. Here’s what your JS quiz can look like:

小测验是互动式的，因此是极好的营销工具。 根据内容营销学会的一项民意测验，有81％的营销人员同意交互式内容(即要求用户参与的任何一种内容)比静态内容更有效地吸引注意力。因此，测验用于不同的营销目的。 像左侧的小测验一样，小测验用于增加网站的访问量。 一些营销人员还使用测验来限定销售线索，细分销售线索并增加参与度。我之所以这样解释是因为，作为开发人员，您的工作不仅是要确保外观漂亮，还要创建易于使用且易于使用的功能。使您的客户的网站更有效地实现其销售和营销目标。要创建测验，请查看以下有关从WebDevTrick和SitePoint进行JavaScript测验的教程。 这是您的JS测验的样子：

创建自己的移动QR阅读器。 (Create your own mobile QR reader.)

Skill to learn: JavaScriptBarcodes and QR codes have changed the way we do shopping. Customers can now scan a product with their smartphones and find out various information about it such as the price or where they can buy it.It also eliminates the need to type in long codes on a website like activation codes or model numbers, making their shopping experience easier and hassle-free.Contrary to what others think, you don’t need a native phone app to scan QR codes.

学习技巧：JavaScript条码和QR码已经改变了我们的购物方式。 客户现在可以使用智能手机扫描产品并查找有关其价格或购买地点等各种信息，也无需在网站上输入长码(例如激活码或型号)来购物与其他人的想法相反，您不需要本地电话应用程序即可扫描QR码。

Websites running on a smart device with a camera can do the trick.This guide shows you the step-by-step process of creating your own QR code reader.

在带有摄像头的智能设备上运行的网站可以达到目的。 本指南向您展示了创建自己的QR码阅读器的分步过程。

You will use HTML and JavaScript, but the most important part is using a JS library that can interpret the QR code. The good news is you won’t have to create it from scratch because there are plenty of great libraries out there for this exact purpose.

您将使用HTML和JavaScript，但是最重要的部分是使用可以解释QR码的JS库。 好消息是您不必从头开始创建它，因为有很多很棒的库可以用于此确切目的。

生成一个天气应用。 (Build a weather app.)

Skill to learn: Angular 8Angular is one of the three most popular front-end development frameworks alongside React and Vue.js. It’s commonly used to build form-based apps (where you have to sign up to create an account) but can also be used to build games and even apps with virtual reality elements.There’s a very detailed, step-by-step tutorial on Medium that teaches beginners how to create a beautiful weather app with Angular 8 (the latest version of Angular). The weather app looks like this:

学习技巧：Angular 8Angular是与React和Vue.js一起最受欢迎的三种前端开发框架之一。 它通常用于构建基于表单的应用程序(您必须在其中注册以创建帐户)，但也可以用于构建游戏甚至具有虚拟现实元素的应用程序。在Medium上有一个非常详细的分步教程教初学者如何使用Angular 8(Angular的最新版本)创建漂亮的天气应用。 天气应用程序如下所示：

This app features a clean, minimalist design with stunning illustrations and a simple interface. It also has a nifty light and dark mode feature that adds more flair to it.What’s great about this project is you’ll get a feel of what it’s like to build a usable, responsive app from scratch. You’ll learn everything from installing Node.js and Angular CLI to testing your code with LightHouse.And although the creator of the tutorial obviously inserted his own design preference, you can add your own styling and be as creative as you want. You can play around with the CSS styling and animations and even use your own logo, icons, and other design materials.Do this right and you’ll have an impressive weather app on your portfolio.You can access the tutorial here.While this tutorial is beginner-friendly, you still need a little Angular familiarity. If you want to learn Angular, the best place to start is on Angular.io.

这个程序的特点是干净，简约，精美的插图和简单的界面。 它还具有漂亮的亮暗模式功能，为它增添了更多风采。该项目的最大好处是，您可以从头了解构建可用的，响应式应用程序的感觉。 从安装Node.js和Angular CLI到使用LightHouse测试代码，您将学到所有内容。尽管本教程的创建者显然插入了自己的设计偏好，但是您可以添加自己的样式并根据需要发挥创意。 您可以使用CSS样式和动画，甚至使用自己的徽标，图标和其他设计材料。正确执行此操作，您的投资组合中将有一个令人印象深刻的天气应用程序。您可以在此处访问该教程。是初学者友好的，您仍然需要对Angular有一点了解。 如果您想学习Angular，最好的起点是Angular.io 。

设计和编写自己的投资组合网站。 (Design and code your own portfolio website.)

In a typical project, you’ll most likely be working alongside a web designer who calls the shots on how the website will look.Although design and development are arguably two different fields, getting a grasp on web design will not only add another skillset to your arsenal, but it will also equip you should you decide to go solo as a freelancer and work on projects from design to deployment.Designing and coding your own portfolio website will give you the freedom to showcase your artistic and technical side simultaneously.The first step is to think of your message or branding. What are your core services, who do you want to serve, and why should they choose you? (Read more about branding here.)Second is to create a mock design that will detail the layout, colors, and typography. Also, think of a theme. Is it minimalist or loud and funky? Is it monochrome or will it use bold colors? Then make a list of the pages you’ll need. This often includes a contact page, a few blog posts, an about me page, and a terms and conditions page.Third, code it! Use modern CSS to layout the site, add some animations, add some high-quality images, etc. The sky is the limit here – you can do whatever you want with your portfolio website because it’s yours – go for it!

在一个典型的项目中，您很可能会与一名网页设计师合作，为网站的外观做主。虽然设计和开发可以说是两个不同的领域，但掌握网页设计不仅会增加另一个技能您的军械库，但如果您决定以自由职业者的身份单身从事从设计到部署的项目，这也将使您感到满意。设计和编写自己的作品集网站将使您可以自由地同时展示您的艺术和技术方面。步骤是考虑您的信息或品牌 。 您的核心服务是什么，您想为谁服务，为什么他们要选择您？ ( 在此处阅读有关品牌的更多信息。)其次是创建一个模拟设计 ，该设计将详细说明布局，颜色和版式。 另外，考虑一个主题。 是极简主义还是大声时髦？ 它是单色的还是会使用大胆的颜色？ 然后列出您需要的页面。 它通常包括一个联系页面，一些博客文章，一个关于我页面以及一个条款和条件页面。第三， 编写代码 ！ 使用现代CSS来布局网站，添加一些动画，添加一些高质量的图像等。这里是无限的空间-您可以对自己的投资组合网站做任何想做的事，因为它是您的-努力吧！

在哪里可以进行前端开发？ (Where can I practice front-end development?)

Although the best way to practice front-end development is through building real apps ad websites yourself, it’s still great to have a go-to place to get tips, access tutorials, and get support when you get stuck or need an opinion on something.These are great places to get help as you’re practicing front-end development:

尽管实践前端开发的最佳方法是自己构建真正的应用程序广告网站，但是当您陷入困境或需要对某事发表意见时，拥有一个去获得技巧，访问教程和获得支持的地方仍然很棒。在您进行前端开发时，这些都是获得帮助的好地方：

1. freeCodeCamp.org – This is a website filled with free tutorials on web development theory, languages, and best practices. There’s also a great community here that can help out with your questions.

   freeCodeCamp.org –这是一个网站，其中包含有关Web开发理论，语言和最佳实践的免费教程。 这里还有一个很棒的社区，可以帮助您解决问题。

2. Modern HTML & CSS From the Beginning – This is a Udemy course by Brad Traversy. It’s packed with useful info and can really teach you everything you need to get started with these languages.

   从一开始的现代HTML和CSS –这是Brad Traversy的Udemy课程。 它包含有用的信息，可以真正教会您使用这些语言入门所需的一切。

3. Frontendmentor.io – You can find bite-sized free and premium “challenges” here that you can do in your spare time to develop your skillset. The difficulty of the challenges ranges from “junior” to “advanced”. Here are examples of the challenges you’ll find here:

   Frontendmentor.io –您可以在这里找到一口大小的免费和高级“挑战”，您可以在业余时间用来提高技能。 挑战的难度从“初级”到“高级”。 以下是您将在此处找到的挑战的示例：

There are more resources that I’d love to share with you, but to keep this from being too long, you can check out this link to see my full list of recommended courses.

我想与您分享更多资源，但是为了避免时间过长，您可以查看此链接以查看我推荐课程的完整列表。

Those are 5 fun front-end development projects you can try today. Again, these are meant as starting points. It’s ultimately up to you to customize it to add a little bit of your personal touch :)

这些是您今天可以尝试的5个有趣的前端开发项目。 同样，这些是起点。 最终由您来定制它以增加一点个人风格:)

Remember, it's all about practice. You NEED to build things to improve your skillset.

记住，这都是关于练习的。 您需要构建一些东西来提高自己的技能。

Happy coding!Thanks for reading and cheers for now,KyleFollow me on Twitter for more tips.

祝您编程愉快！感谢您的阅读和欢呼，Kyle 在Twitter上关注我，以获取更多提示。

翻译自: https://www.freecodecamp.org/news/become-a-better-developer-by-building-projects/

前端项目结构构建