前期准备：
你需要一台电脑，电脑上要有一个做前端的编译器（做前端的编译器有很多，如：Dreamweaver、Hbuilder、Sublime、VS Code等，大家可以根据个人喜好自行选择，我用的是Hbuilder X）
基础知识：
1. 什么叫前端：前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（本段来源百度百科）
2. 前端的核心技术：HTML，CSS，JavaScript/ajax；这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手
3. 为什么要学习前端：前端说简单点，你在玩手机，浏览网页的过程中，你见到的所有内容都是有公司的UI+前端做出来的，真的程序员做的后台的内容，你是看不到的，所以前端的作用及其重要，在大众审美日益提高的今天，你需要冲击到你用户的视觉体验，才会有用户选择你们的产品和内容，所以前端在现在的软件制作与开发过程中，发挥着日益重要的作用，而在后台开发的过程中，你需要读懂前端程序员给你留的接口和框架的搭建，然后在进行前端与数据之间的交互，所以对于任何做编程的人来说，前端可以说是其的一根必备技能
4. 三种技术之间的关系：HTML（超文本标记语言）是搭建整个网页的框架实现简单的功能，CSS（层叠样式表）进行网页的排版和样式设置，JavaScript（脚本语言）是网页中一些动态的内容和效果的实现，CSS和JavaScript共同决定了一个网页是否美观大气
一个网页的制作过程：
首先先分析这个网页的页面分为几个部分，哪一部分大概需要在分为几个部分，然后在用html进行网页层次的搭建，同时通过css完成页面的美化，最后在适当的地方添加动态js效果来结束整个过程
一个完整的前端项目的创建：
（以Hbuilder X为例，其他编译器同理）
选择“文件 --> 新建 --> 项目”然后弹出如下窗口：
首先选择普通项目，然后在第一个空行中输入你的项目名（最好不要有中文，我的叫new_test）,在第二个空行中选择你项目的存放路径，单击右侧“浏览”字样，可以选择你需要存放的路径，在选择模板中，选择“基本HTML项目”即可创建一个基本的前端项目，然后单击创建，在Hbuilder的左侧会出现一个你创建的项目，像这样：
所有的文件夹顾名思义，也不用过多解释，css文件夹用于存放css的样式文件，js文件用于存放网页的动态js代码，img文件夹用语存放制作网页用的图片素材，最后在根目录下还有一个叫做index.html的文件，你写html代码就在这个html文件中进行，这就是一个完整的前端项目中所包含的全部内容，具体详细的前端页面的写法，我们在下篇文章给大家进行详细介绍
转载：https://blog.csdn.net/weixin_42401333/article/details/102234610