🎈 现在订阅送半年,再次订阅 / 续订送一年。(赠送活动快要结束了) 🎉

博客

《工作流》一开始你要准备的工具

工作流》里介绍了成为一名开始者,一开始你要知道的工具。之前我们已经介绍了《CLI》,现在你应该熟悉了在命令行界面下工具。现在你可以跟着《工作流》,去在电脑上准备一些工具。以后你还会遇到很多工具,不过要等到真正用到的时候再去准备与了解他们。先带上这些必备工具,就可以出发了,只有轻装上阵,你才可能走的更远。

焦虑

今年感觉一直处于焦虑状态,有时几乎让我无法工作。自我调节也管点用,打个电话给朋友,喝几杯,出去走走,也都有所缓解,但这种焦虑状态还是会反复出现。引发的原因主要就两个,家庭与工作,会觉得事事不顺。这是不是要给我个大任务啊,还是因为我情商低,在别人那里这根本都不叫事儿。

家庭需要参与,别等事情变得更糟。儿子就像中间人,得在各方面去调节家庭关系。我之前路数是捂朵不听,闭眼不见,觉得自己有更重要的事情要做,家庭琐事根本不需要在乎。直到这些琐事引起的 bug 让你觉得无法修复,不可逆。即使我已经意识到了问题,打了补丁。

工作方面,有时候觉得自己能做任何事,但又经常感到一点自卑。面对未来,有时候觉得充满希望,但又会有点恐惧。总会在各种状态的两极,无限循环。我没明白人类为何要保留焦虑这种情绪,暂时我没想到它会对我有什么帮助,焦虑的状态经常让我无法工作。或许它也只是为了让世界平衡的某个因素。

《CLI》开发者的第一本任务手册

CLI》是宁皓网的一本蓝皮儿书,因为它的封面是蓝色的 :)还没校对,忍不住先发给大家看看。大家可以 fork 到自己的 Github 仓库里,然后帮着改改错别字儿。不熟悉这个流程,可以参考 Atlassian 的 Git Workflow,我应该也再去写一本 Git 流程手册。

熟悉在命令行界面下工作,可以作为你成为一名开发者要做的第一个任务。在命令行界面下完成一些简单的日常工作,比如进入到某个目录的下面,查看目录里的东西,在目录里创建新的目录,文件,重命名文件或目录,移动文件的位置,编辑文件里的内容。

这些任务在图形界面下操作就是点点鼠标的事儿。在命令行界面下,你需要了解内容的路径,绝对路径与相对路径的区别,使用什么样的命令,要用到哪些参数,怎么获得帮助等等。

或许一开始你会觉得这一切毫无意义,不过我向你保证,越往后你会越觉得自己当初的想法是错的。既然已经决定要当一名开发者,不管您智商有多高,在学习的时候尽量把自己先当成小白。有个人为你提供了一个学习的路线,如果你觉得这人还算靠谱,那就跟着试一下。

在线阅读:《CLI

《 网站 》里使用的 SASS 样式

在《 网站 》系列课程里,设计开发的页面需要的样式用的是 SASS 的形式创建的。这是一种更灵活的创建 CSS 样式的方法,你可以少写很多东西也可以重复利用一些东西。一旦你了解了 SASS,应该不会再直接写 CSS 样式了。在课程里,我们会用到几个 SASS 的重要特性。

组织

用 SASS 创建样式,组织这些样式的方法也很多。你可以创建一个主要的 SASS 样式文件,然后把其它的样式文件包含进来,项目的自动化任务会为你编译好一个普通的 CSS 文件,这个文件你可以直接用在你的项目里。

组织的方法一般像这样,比如你创建了一个主要的 SASS 文件,名字是 main.scss,它里面的内容像这样:

@import "variables";
@import "mixins";
@import "base";
@import "navbar";

这个主样式文件里不包含具体的样式,它可以作为一个入口文件,在这里你可以把其它的样式文件导入进来,项目的自动化任务会把所有的样式编译生成一个普通的 CSS 文件(main.css)。

《 网站 》第五集:移动导航与动态显示的边栏

《 网站 》系列要做的页面都是响应式的,页面在很多不同尺寸的设备上都能很好地显示。用到的一项关键的 CSS 技术就是媒体查询:Media Query,后面我们还会介绍让 JavaScript 也可以根据设备的不同尺寸在页面上应用不同的脚本代码。

媒体查询

CSS 允许我们在样式表里设置一些样式应用的条件,你可以限制设备的类型(Screen,Print),或者视口(Viewport)的宽度范围。

比如你想单独为小尺寸的移动设备上去应用一些样式,这条媒体查询的条件用文字描述应该像这样:在小于等于 767 像素的 Screen 类型的设备上。如果用 CSS 的媒体查询表示出来,应该像这样:

《 网站 》系列里用的工具:Git 版本控制

网站 》系列的一开始, 我们就用 git 去下载了我提前准备好的一个初始项目。后来我一边制作课程,一边修改这个项目。这些修改我都用 git 保存下来,每次修改你都会看到一条日志,你可以使用 git 查看我对项目的每次修改到底都改了哪些地方。我把这些修改推送到了项目的远程仓库里,你可以执行 git 命令把我对项目做的修改拉取到存储在你本地电脑上的项目里面。

直接在 Chrome 浏览器上编辑 SASS 样式

你用 sass 的形式写的样式,需要编译成普通的 css 样式,浏览器才能看懂。你可能创建了几个 sass 文件,但最终编译好的 css 文件确只有一个,如果你在编译 sass 的时候生成了 sourcemap,浏览器就能明白界面上的元素应用的样式到底来自哪一个 sass 文件。

《 网站 》第四集:导航栏

导航栏上的标志

在《 网站 》系列课程隐藏了大量的技巧,它又提供了一个清晰的路线,让你清楚的知道做成一个页面都需要哪些东西,哪里不太理解你可以再找相关的课程去补。第四集,会去把之前设计好的导航栏,用 html,css,javascript 的形式表示出来。

拿到一个界面的设计,作为 Web 设计师,你得了解这个界面应该会用到什么类型的标签(html)去组织这个界面里的内容,你需要设计这些标签之间的关系,谁是谁的爸爸,谁跟谁是兄弟。我们需要使用 css 去给这些元素应用样式,在为页面上特定的元素应用样式的时候,你要写好样式的选择器,定位到页面上的特定的元素,在上面应用你需要的样式。

这一集你会看到怎么样把一个界面组件用代码的形式表示出来,用 html 组织内容,用 css 去添加样式,用 javascript 为界面添加交互功能。几乎都是实践,每个视频你都可以跟着动手练习,节奏适中。如果之前你没有了解过 Web 技术,这一集将是一个非常好的入门课。

《 网站 》第三集:导航的设计

设计:导航 - 移动端

在《 网站 》这个系列里面,我们会一起设计与制作一些页面上常用的界面元素,导航是页面上必备的元素之一。主导航的功能就是展示网站的内容结构, 它是用户访问网站不同区域的一个入口。这一集会先使用设计工具,设计导航在桌面设备与移动设备上的样子。课程后半部分介绍了使用 sass 创建的样式。

导航栏在桌面尺寸的设备上会显示在页面的顶部,导航栏上一般会有标志,菜单,还有一些工具,比如搜索或登录。我们设计的导航栏有两个状态,一个是正常状态,还有一个是搜索状态,就是点击导航栏上的搜索图标以后,会把导航栏上的标志与菜单隐藏起来,显示一个搜索框。

导航栏在小尺寸移动设备上有不同的样式,导航栏上的菜单会被隐藏起来,导航栏左边会显示一个菜单图标(汉堡包),点击这个菜单图标会在页面左侧显示一个边栏,边栏上的内容就是导航栏上的菜单。在下一集,我们会介绍使用代码的形式表示这个导航栏的方法。

《 网站 》 第二集:页面的雏形 - 线框图

商业网站

线框图(Wireframe)就是抽象化以后的具体的页面。页面的线框图一般没有具体的设计元素,都是用一些图形来表示页面上即将要出现的元素。制作页面的线框图,一般是在确定了想法之后,在具体设计之前。用最简单的东西把你的网站或应用的界面表示出来,主要就是把页面的布局,或者框架先定下来。然后再去设计具体的元素。

《 网站 》第二集,我们用 Sketch 设计工具,为即将要设计与制作的网站首页先做了一张线框图,让你对页面的结构有个大概的印象。在做线框图的时候,你应该已经先确定了想法,就是要做的页面的功能是什么。比如一张产品介绍页面,它的主要功能就是介绍产品本身,你的设计要配合页面的功能来完成目的。

我们要先做一张网站的首页,假设网站属于一家生产汽车的公司。首页是最常用的登陆页(Landing Page), 你的用户很可能是通过首页认识你的。首页也就经常是用户对你的第一印象。我们可以通过一些常见的元素来传达一些信息,我是谁,我能为你做什么,我提供了什么样的产品与服务,我的用户如何使用我们的产品,我需要你做些什么,比如下载试用版的应用,报名参加体验活动。



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

8328
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点