Home前端快速入门
前端快速入门

前端快速入门

@晨光

专栏作者:晨光, 双非师范大学毕业,5 年前端开发,目前在某大厂担任高级前端工程师,本专栏致力于帮助读者快速入门前端,让大家少走弯路。

小册分为 5 个主题:前端入门、前端进阶、前端实战、面试经验、职场经验,一年内最少输出 30 篇心得。

小册是永久买断制,原价 88 元,限时特惠,只需 10 元。

买过后,看置顶帖,拉你进专属 280+ 人 晨光·AI·前端群 (小圈子社群)~
订阅82
文章44
最后更新:2023-12-22 21:24
查看 【前端快速入门】 详情查看 【晨光】 主页
分享到微信打开

免费内容

2023-12-16 21:8

前端是什么,小白也能理解

嘿,大家好,我是晨光,一名有着5年工作经验的资深前端开发。经常有小伙伴问我,“前端是什么啊?”有时候我给他们发了自我介绍,里面有“前端程序员”这几个字,他们却一头雾水,觉得这个词太高大上了。所以今天,我打算通过生动的例子,来给小白朋友解释一下,“前端”到底是啥。1、生活中哪些场景与前端息息相关有关首先,让我们想象一下你打开电脑,浏览淘宝购物,或者刷微博、朋友圈的时候,看到的那些漂亮的网页和好玩的小程序。对,这就是前端的杰作!还有你在手机上下载的App,无论是社交、购物、还是学习类的应用,都离不开前端的精心设计和开发。比如,你登录一个网站,输入账号密码后,点击登录,页面瞬间就跳转了。这个过程中,就是前端在默默工作。再比如,你在淘宝上浏览商品,点开商品详情,页面内容瞬间切换,这也是前端的功劳。所以,无论你在做什么,只要涉及到界面的交互,那几乎都是前端在悄悄地助力。2、前端程序员具体是干什么的那前端程序员到底具体是做些什么呢?简单说,我们是网页和App的设计师兼搬运工。我们用的工具,比如HTML、CSS、JavaScript,就像是我们的画笔和斧头。HTML负责搭建网页的结构,CSS负责页面的样式美化,而JavaScript则是让页面变得生动起来,能够与用户进行交互。简而言之,前端就是把设计师的构思变成实际可见的页面,并且加入一些有趣的功能,使用户体验更加丰富。3、前端的应用场景有哪些前端的应用场景其实非常广泛。你打开浏览器,输入网址,就是在和前端打交道。每次在社交平台上发状态、看朋友圈,也是在和前端互动。就连在手机上用App购物、学习、玩游戏,也都是前端在默默奉献。比如,你在某购物App上浏览商品,页面的流畅度和美观程度,都离不开前端的精心设计。再比如,你在学习App上刷题,页面的交互和题目的显示,也是前端在为你提供良好的使用体验。4、如何快速入门前端如果你对前端感兴趣,想要快速入门,不妨看看我写的《前端快速入门》小册。在这本小册里,我用通俗易懂的语言,从零基础开始,手把手地教你如何使用HTML、CSS、JavaScript这三把神器,让你快速入门前端的世界。当你亲手做出一个简单的网页,或者给网页加上动态效果的时候,会有一种成就感油然而生哦!希望通过这番介绍,你们对“前端”有了更清晰的认识。无论是在网页上冲浪,还是使用各种App,都离不开前端的贡献。如果有什么问题,随时来问我吧,我会尽力解答,让你们对前端更感兴趣!哈哈,前端,其实就是让互联网世界更有趣的魔法师,听起来是不是很有趣呢,感兴趣就快来学习吧!

2023-5-10 9:27

【新人必读】小册合集

假如你是前端小白,学习小册前,请先阅读下面这篇哦~前端是什么?小白也能理解这篇文章包含三部分:专栏内容合集汇总、合伙人计划、晨光·AI·前端 知识星球(社群)入口。一、专栏合集下方蓝字是超链接,点击即可跳转到对应文章。1、前端入门前端-入门|如何学前端?前端-入门|代码编辑器1.1 HTML前端-入门|HTML前端-入门|HTML Demo前端-入门|HTML中常用标签及其常用属性前端-入门|HTML5 的常见特性1.2 CSS前端-入门|CSS前端-入门|CSS Demo前端-入门|CSS 基础介绍前端-入门|CSS 基础属性前端-入门|CSS 盒子模型/浮动/定位前端-入门|CSS层叠规则前端-入门|CSS 中 的 BFC 和 IFC 机制前端-入门|CSS3 的 响应式布局前端-入门|CSS3 的其他特性1.3 JS前端-入门|专栏 7 JavaScript前端-入门|专栏 8 JS 基础前端-入门|专栏 9 JS Demo前端-入门|专栏 10 JS Demo优化前端-入门|JavaScript 的基本语法前端-入门|JavaScript 数据类型转换前端-入门|JavaScript中的函数前端-入门|JavaScript 中的闭包2、前端进阶前端-进阶|专栏 11 前端进阶前端-进阶|专栏 12 ES6 基础前端-进阶|专栏 13 ES6 进阶-Promise前端-进阶|专栏 14 ES6 进阶- async、事件循环机制前端-进阶|专栏 15 ES6 进阶- class前端-进阶|专栏 16 ES6 进阶- Module前端-进阶|专栏 17 编程风格前端-进阶|专栏 18 NodeJS前端-进阶|专栏 19 VueJS - 介绍前端-进阶|专栏 20 VueJS - 使用前端-进阶|专栏 21 VueJS - vue-router前端-进阶|专栏 22 VueJS - vue demo前端-进阶|专栏 23 ReactJS - 介绍前端-进阶|专栏 24 ReactJS - 使用前端-进阶|专栏 25 ReactJS - Demo前端-进阶|专栏 26 ReactJS - ReactRouter3、前端实战前端-实战|专栏 1 实战介绍4、面试经验面试经验-害怕面试?5、职场经验职场经验-职场亲身经历分享二、合伙人计划ChatGPT 赚点小钱专栏 12 分销实操,带你赚顿饭钱。手册已开启合伙人计划,佣金为最高比例 60 %,具体玩法看文章:合伙人计划! 前端快速入门三、晨光·AI·前端 知识星球(社群)入口免费拉你进 晨光·AI·前端 知识星球,知识星球是小圈子社群,在这个社群内,更方便大家交流前端学习心得,已有 270+ 人。扫码即可加入,进来后记得看下【新人必读】~,本小册没有微信群,希望大家能够根据小册实操起来,精力聚焦到学习上。建议大家收藏这篇文章,后续晨光还有 10 篇内容更新,晨光都会陆续汇总进来。计划是每周更新 1-3 篇内容。

2023-5-10 9:1

前端-入门|专栏 6 代码编辑器

前端-入门|专栏 6 代码编辑器写代码,总要有一个好用的代码编辑器。一个好的编辑器,能够提升你的码代码的效率。晨光常用的编辑器是 VS Code。这款软件,可自定义主题,dark or light mode,还有丰富的编辑器插件,能够支持多种语言,并且比较轻量。如果你想看看别的编辑器,也可让 gpt 帮你推荐。下面是它的回答:VS Code 通常去它官网下载就好,具体的网址,https://code.visualstudio.com/ 大家可以自行下载选择你适配你电脑版本的安装包,安装完成后,找到下图的图标,然后双击打开。这个软件有很多常用的快捷键,掌握这些快捷键,写代码能够事半功倍。比如我们要新建文件,Ctrl + N,然后把代码粘贴过来,再 Ctrl + S,选择保存到你的电脑目录后,在你的文件夹中,找到文件,双击就能在浏览器中打开,看到效果。但是这样查看文件有些麻烦,我们可以安装一些常用的插件,推荐先安装这个 open in browser这样在编辑器内右键,选择 open in Default browser ,就可以在浏览器打开我们刚刚编辑的 html 文件,不过文件需要先要保存哦~