【Web前端入门】从零开始做网站

【Web前端入门】从零开始做网站

李巍老师：IT私塾教研负责人、中国计算机与青年计算机学会会员、多所大学与上市教育集团教学顾问、设计的课程直接或间接培养数字人才过百万

Web前端如何从零开始打造自己的个人网站

web前端能做很多有意思的东西，比如建一个自己的网站，比如建一个小程序，这次来说说

前端的标配，如何从零开始打造自己的个人网站！

一、基本能力

前端入门3大基础：HTML、CSS、JS都需要熟练掌握，其中HTML是一个网站的框架，CSS

能够提供丰富的装饰，JS则能带来动态效果，除了这些，常用的框架，常用的后端语言也都

需要有所涉猎，打造个人网站时都会用到。

二、网站规划

1.网站主题

一般建议从自己感兴趣的事务出发，像是男生比较感兴趣的运动资讯，女生比较感兴趣的偶

像艺人，都是比较好的切入点，当然你也可以当作个人博客使用，分享自己的学习体会。

2.网站结构

打开一个网站，我们可以明显看到一个导航栏，网站的几个模块，有多少页面，不同页面之

间是如何连接的，前期有个比较明确的规划，后期才不容易出错。

3.内容安排

多媒体主要有文字、音频、视频、图片几大部分，你的网站主要侧重于哪个方面呢？此外你

的内容从哪里来？是原创还是搬运？

三、网页制作

1.前端

前端通常是人们看到的页面，不同的内容带来的网站设计风格也会很不同，是更侧重逻辑，

还是更偏向简约风？要不要考虑用户体验？

2.后端

后端虽然普通用户看不到，但是肩负着各种功能的实现，对技术的要求也比较高，需要用程

序整合前后端。

四、服务器域名

域名可以理解为网址，服务器空间用来存放网站的内容和程序文件，好的域名通常简单好记，

但是那个成本比较高，现在BAT都有服务器域名的代理，对于学生更划算。

五、发布维护

正式上线了才能体会到更多现实的问题，比如网络带宽太小，用户访问太慢，用户太多网页

崩溃，网页设计不合理等等，要爱惜自己的网站，不断改进不断完善用户体验才会更好。

六、另一个选择

以上的步骤都需要比较高的动手能力，如果是想要有个人博客，其实可以用一些建站软件，

通常都提供了丰富的模版，相对简单很多。看准自己的需求很重要！

完成所有课堂练习就可以做出自己的作品，并掌握数据库和了解开源项目。

这些课程涵盖了HTML、CSS和JavaScript等前端技术，以及与之相关的设计原则和最佳实践。前端课程的目标是培养学生在网页开发方面的技能，使他们能够创建美观的网页。

HTML：学习如何使用HTML标记语言创建网页结构和内容。

CSS：学习如何使用CSS样式表来设计和布局网页。

JavaScript：学习使用JavaScript编程语言为网页添加交互和动态效

适合人群：

01、希望从事前端开发工作的人

学习Web前端知识与技能并掌握项目经验对就业很有帮助

02、计算机编程学习者

学习Java或Python等后端开发中前端知识必不可少

03、数据分析从业者

希望能够爬取互联网上的内容，例如:电商数据、股票数据等

04、企业或个人

希望能够通过网站展示自身形象，例如:公司官网或个人博客

05、网络营销从业者

制作销售型单页，或进行SEO优化

课程目录：

第一阶段、HTML网站的骨架

01、准备好你的工具

HTML的入门门与工具选择

02、网站显示小图标

head常用标签、标题和段落标签

03、让网页图文并茂

文本和图像标签

04、做个课程表

列表和表格

05、做个问卷调查页面

表单标签

06、做个登录页面

body标签

07、网页连起来就是网站

超链接标签

第二阶段、CSS网站的美颜

08、美颜的思路与要点

CSS的基本使用方式

09、找到你要美颜的点

常用选择器、伪类选择器

10、多个位置同时选

复合选择器

11、给你点颜色看看

颜色、文本、字体属性

12、背景也是一种风格

背景属性

13、有立体感的阴影

边框属性、三大特性

14、独立还是在一起?

CSS布局_行内元素和块级元素，

15、保持距离很关键

CSS布局_内边距和外边距

16、网页就是大盒子套小盒子

CSS布局_盒子模型

17、想在哪里我说的算

CSS布局_定位

18、动来动去也好看

CSS布局浮动

19、不同场合不同妆容

Flex网页布局

20、找个专家来帮忙

Bootstrap入i ]

21、设计个自己的网站

产品设计和U|简介

22、猫猫狗狗的日常

项目_宠物之家(上)

23、我们的服务有多好

项目_宠物之家(下)

第三阶段、项目网站的部署

24、让网站有个家

网站基本知识、域名与服务器

25、本地操作试试看

安装虚拟机、Linux操作入门]

26、让世界看到我

网站上传与部署

27、让更多人看到我

网站运营与推广

28、我的博客

开源博客部署

29、我的论坛

开源论坛部署

30、我的电商网站

开源电商网站部署