如何开始前端编码挑战？ - 前端导师
我们都知道有一个名为Frontend Mentor 的网站，在那里我们可以获得一些很棒的真实世界前端挑战，以练习和提高我们的前端技能。
感谢 Frontend Mentor，我完成了大约十个挑战，真的学到了很多东西。
开始使用
- 前往前端导师网站。
- 使用 GitHub 登录。
- 前往挑战标签页。
- 打开挑战并下载初始文件（.zip 格式）
开始你的项目
- 打开你的项目文件夹。
- 创建一个新目录
frontend-[CHALLENGE NAME]
├── assets
│ ├── designs
│ └── images
├── css
│ └── styles.css
├── index.html
├── readme.md
├── scripts
│ └── scripts.js
├── style-guide.md
└── .gitignore
我使用上述项目结构。你会收到style-guide.md初始文件和图像文件。只需将它们复制到这里即可。
designs目录包含您的输出屏幕截图，如果您愿意，可以将它们包含在您的文件中readme.md。
HTML 起始模板
我在可视化代码编辑器中创建了一小段代码，它会在一个标签页中生成 Frontend Mentor 的入门模板。
这里是，
这是起始模板index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frontend Mentor | Challenge Name</title>
<meta
name="description"
content="This is a front-end coding challenge - Challenge Name"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Happy Coding -->
</body>
</html>
CSS样式
说到 CSS，我总是喜欢从零开始。
没有哪个网站是完全没有样式的。
浏览器有一个名为“用户代理样式表”的默认样式表，它会为标题和段落添加边距，并将字体属性应用于所有元素。
我通常会重置所有样式，从头开始。
这是我的styles.css
:root{
/* colors and fonts */
--font: "Montserrat", sans-serif;
--white: #ffffff;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
html, body{
height: 100%;
}
body{
width: 100%;
font-family: var(--font);
}
/* Other rule-sets */
好了，现在我们可以开始编写实际内容来设计页面了。
前端导师挑战赛对于那些想要提升前端技能的人来说将非常有帮助。
文章来源：https://dev.to/hariramjp777/how-to-start-front-end-coding-challenges-frontend-mentor-2aa9