[笔记] Alpha Camp 第二学期 启程

章节连结

Alpha Camp 是个新兴的线上线下整合的课程平台。第二阶段是为期8周的课程,主要带大家实作网页开发前后端的所需技术:HTML、CSS 和 JavaScript。
若对第一阶段有兴趣的,可以点这里
alpha camp logo


课程目的

打稳前后端开发的语言基础,并运用程式语言做出完整的网络元件。(摘录自其课程平台 Lighthouse)
1. 基础 JavaScript:了解 JavaScript 在网页上的延伸应用,如 DOM 操作、AJAX
2.实战运用 HTML、CSS 和 JavaScript ,将三者组合做出使用者对应的功能
3.实务技术上手:如响应式网页、版本控制、自动化测试等等。

开发工具整理

1. Visual Studio – 当前热门且开源的程式码编辑器,可借由安装套件来扩充功能,推荐套件可点此
2. Bootstrap – 免费且开源的前端开发框架,由 HTML、CSS 和 JavaScript 所写成。设计的目标是达成响应式网页和行动优先,所以开发者可以直接在其基础上进行开发,而不必重头开始繁琐的设定。
3. Font Awesome – 可以取得对应的图示按钮,不必从头设计起。
4. 色码表 – 可以快速得知六位数(#??????)的16进位颜色代码
5. Google Chrome & Google – 除错工具和搜寻关键字
6. 中英文假字生成器整理 – 快速产生所需的填充文字


第一周 Week 1

wireframe从线框稿(Wireframe)开始,规划 HTML 及 CSS ,最后能依照题目(设计师)的指示,进行切版并完成作品。规划完 Wireframe 后,先将对应的 HTML 内容写入,再规划 CSS 来调整位置、字型、边界…等等。

水平排版:float, clearfix, display:inline-block
垂直排版:display:table & display:table-cell
文字水平置中:text-align:center
文字垂直置中:常用的三种方法
图片垂直置中:vertical-align:middle
伪元素及鼠标互动动作


第二周 Week 2

带你熟悉 JavaScript 的基本运用,也就是 Function, 资料型态, 逻辑运算, 各种迭代器(iterator) 等的运用,算是替之后几周的课程做暖身。

第三周 Week 3

DOM 元素的运用,并带你一步步的了解网页的 JavaScript 互动。同时设置各种的事件(event),亲手打造出一个动态网页


第四周 Week 4

跟上潮流,因应手机世代来临,制作当前主流设计 RWD。从小萤幕宽度开始,逐步放大的大萤幕电脑,一体适用的网站。同时,初体验 Flexbox 和 Grid 排版方式,摆脱有时会恼火的 float。

第五周 Week 5

认识 JavaScript 的一些神奇地方,还有物件与函式。

第六周与第七周 Week 6 ~ Week 7

实际串接 API,刻出一个 Movie List 出来,可以看这里


第八周 Week 8

运用 Git & Github 来上传、管理、追踪你的作品。

Alpha Camp 相关文章

★全文分享★  [笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
[笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
运用 express 的框架来架设后端的 Node.js 服务器时,当遇上前端传来的表单资料为 multipart/form-data 格式时,那么 body-parser 套件是不支援的。这时可以运用 multer 套件来解决这个问题。使用范例1.首先先
★全文分享★  [笔记] 解决 Vue 专案的 localhost:8080/sockjs-node 的无效请求
[笔记] 解决 Vue 专案的 localhost:8080/sockjs-node 的无效请求
这篇是解决不时在测试 Vue 专案上时,常会在浏览器的 console 内看见的无效 GET 请求如:http://localhost:8080/sockjs-node/info?t=<一串乱数>,要如何处理。步骤1.若是处在开发阶段看到的话,会因为你所
★全文分享★  [笔记] Vue.js & Node.js 专案初始化笔记
[笔记] Vue.js & Node.js 专案初始化笔记
这篇主要是笔记下如何快速的在本机端生成一个 Vue.js 的专案,并结合 Bootstrap 和 Node.js 二者来产生一个前后端兼备但却彼此分离的网络应用程式。步骤Vue.js 框架下,其网址多半会带有 # 字样。这是
★全文分享★  [笔记] Alpha Camp 第四学期 期末回顾之三 – 专案发表后
[笔记] Alpha Camp 第四学期 期末回顾之三 –  专案发表后
毕业专案简报时,评审的手也没有闲著,从各个角度来测试专案是否能正常运作,进一步的防止有心人士偷改资料造成系统当机。Max、维元、楚玄、Sam…..等评审给予的回馈,在往后的成长道路上,
★全文分享★  [笔记] Alpha Camp 第四学期 期末回顾之二 – 毕业专案
[笔记] Alpha Camp 第四学期 期末回顾之二 – 毕业专案
这回的毕业专案,AlphaCamp指定了三个方向(电商、旅游规划和CRM系统),其余的就交给各个团队自己打磨。在这一个月的时间内完成ERD、决定使用者故事的开发的优先级、实际写 Code 和最后布署后的
★全文分享★  [笔记] Alpha Camp 第四学期 期末回顾之一 – 个人成长
[笔记] Alpha Camp 第四学期 期末回顾之一 – 个人成长
AlphaCamp 的第四学期内容算是非常扎实。随着接触的内容变多的情况下,在心态上也得有所转变,不再能一味的希望课程能教导或提供完整的范例给你。课程的内容应被当成是一个个的楔子,跟每个
★全文分享★  [笔记] Node.js 在 Windows 上的开发环境建置
[笔记] Node.js 在 Windows 上的开发环境建置
这篇文章记载下于 Windows 上建置开发 NodeJS 相关应用的环境过程和步骤。操作步骤//1. 安装 cmder,下载位置在右边:https://cmder.net///2. 安装 nvm,到右边的 Github 网站下载:https://github.com/coreybutler/nvm-win
★全文分享★  [笔记] Sequelize NodeJS 专案初始化笔记
[笔记] Sequelize NodeJS 专案初始化笔记
本篇记录下 AlphaCamp 第四学期的重头戏之一,与他人一同打造类 Twitter 专案的过程。同时,这也是记录如何从无到有打造一个专案的过程。一、专案规划提出规格(Spec)清单,内容包含以下:1.使用角
★全文分享★  [笔记] Heroku Sequelize 布署细节
[笔记] Heroku Sequelize 布署细节
本篇记录下如何将 SQL 关联式数据库布署到 Heroku 上的步骤与心得。操作步骤// 1. Heroku 指定的数据库是用 PostgreSQL,故先用 npm 安装相关套件npm i pg// 2. 调整 config/config.json 的设定 “production”: { “use_env
★全文分享★  [笔记] 运用 Heroku 布署的初始化步骤
[笔记] 运用 Heroku 布署的初始化步骤
这篇文章记录下如何将本机端的专案推拨到 Heroku 上的步骤。整体操作难度不高,但是要尽量让 git 和 heroku 的档案放在同一层。否则上传时,heroku 会抓不到 package.json 的档案。步骤1. 首先,先上 Hero
★全文分享★  运用 Node.js 建网站的初始化步骤
运用 Node.js 建网站的初始化步骤
AlphaCamp 的课程进入到第三学期后期,趁机整理一下如何运用 Node.js 来建立一个简单网站的步骤(包含前端画面、后端数据库、登入页面、串接API以及除错)。第一部分1.Wireframe画面的设计草稿,每个页
★全文分享★  [指南] AlphaCamp 第二学期与第三学期的差异
[指南] AlphaCamp 第二学期与第三学期的差异
AlphaCamp 课程的第二学期和第三学期,其课程难易度与设计上有着显著不同。趁著这篇写下第一手的体验心得。课程设计差别学期二浏览器的前后隐含了 HTML, CSS 和 JavaScript 的互动。不过,你并不会
★全文分享★  [笔记] Alpha Camp 第三学期 期末回顾 关于自学
[笔记] Alpha Camp 第三学期 期末回顾 关于自学
学写程式的过程旅途上,“自学”在不知不觉中就成为身体中记忆的一部分。毕竟写程式卡关的问题有百百种,有时只是单纯打错字、也有可能是一开始的逻辑设计就出了毛病。这时,运用搜寻“
★全文分享★  [笔记] Handlebars Register Helper 自定义 Helper 用法
[笔记] Handlebars Register Helper 自定义 Helper 用法
Handlebars 的模版,其判断式功能的延展性不佳,类似 {{#if 3>2}} 这类的用法都默认无法使用。RegisterHelper 就是用来解决这个问题。使用方法初始化//initialize handlebars (not express-handlebars)const Handlebars = r
★全文分享★  [笔记] Google Place API 串接 (Google Map 系列服务)
[笔记] Google Place API 串接 (Google Map 系列服务)
Alpha Camp 的第二学期课程,让大家试试水温串接 API。在心血来潮下,想说串接个 Google Map 的 API 来玩玩看。不过要做的准备工作还真不少,以下是试验不少次后所得到的心得。串接前的准备工作1. Goo
★全文分享★  [笔记] Alpha Camp 第三学期
[笔记] Alpha Camp 第三学期
Alpha Camp 是个新兴的线上线下整合的课程平台。第三阶段是为期8周的课程,主要将学习 Web 开发实务框架,使用 JavaScript + Node.js 打造一个兼具前、后端与数据库的网络应用程式。若对第一阶段有兴
★全文分享★  [笔记] Pagination 分页功能 实作 JavaScript
[笔记] Pagination 分页功能 实作 JavaScript
网页设计中常见的分页功能(Pagination)的实作笔记过程。逻辑上,可以拆解成以下两项:1.计算总共页数2.依照使用者点击的页数来决定显示多少项目实作步骤1.HTML部分<!–采用 Bootstrap 4.0 –><nav a
★全文分享★  [访谈记录] 自身兴趣和实作 在工作上找到归属感与成就
[访谈记录] 自身兴趣和实作 在工作上找到归属感与成就
AlphaCamp 第二学期的第三份访谈,幸运的请到一位自高中时期认识的神人朋友,来聊一下他的程式学习历程。相关访谈1.什么契机下开始接触程式?小学的时候有去资策会上过 RPG 制作大师的课程,使
★全文分享★  [笔记] Git 忽略 .DS_Store 等排除档案
[笔记] Git 忽略 .DS_Store 等排除档案
初学 Git 常会遇上的一个问题就是,Git 会自动追踪一些系统记录档案(如MAC上的 .DS_Store),所以一份排除清单就是必要的一份工作。排除方法1.在 git 专案下,新增 .gitignore 档案请利用终端机(Terminal)新
★全文分享★  [笔记] Git 更新分支、解除冲突方法一览
[笔记] Git 更新分支、解除冲突方法一览
从本机端同步到 GitHub 上头的专案,于每次上传 commit 时都会比对两边的资料。若有出现不一致的情形,就会挑出错误讯息。错误情境1.远端资料较新由于 Github 网站本身有提供修改的地方(可以线上
★全文分享★  [笔记] API 串接, Axios 和绑定DOM事件
[笔记] API 串接, Axios 和绑定DOM事件
在 Alpha Camp 的第二学期课程中,有提到写个网页来向远端服务器请求资料,故整理一下自己脑海中所学到的技巧与观念。重点提示运用 “Axios” 工具以 “GET” 方式请求资料<script src=”https://unpkg.com/axios/
★全文分享★  [笔记] textContent, event.target 和 innerHTML
[笔记] textContent, event.target 和 innerHTML
笔记一下在学习撰写 JavaScript DOM时,常会遇上的三大功能 innerHTML, textContent 与 event.target 的用法。重点整理innerHTML常搭配 HTML 的 Element Object 来执行,将一段 HTML Code 写入特定区块。// 以下例子取自 w3
★全文分享★  [笔记] Alpha Camp 第二学期 期末回顾
[笔记] Alpha Camp 第二学期 期末回顾
Alpha Camp 的第二学期课程,一晃眼间就两个月过去了。从现在回首来看,发现自己也默默的熟悉了一些网页互动的技巧,写程式也开始不让人那样心生恐惧。将情境转换成电脑可以理解的小步骤,并
★全文分享★  [访谈记录] 观察、效能和成就感
[访谈记录] 观察、效能和成就感
第二场访谈请到大学时期认识的 Mr Miao,现职于电子五哥之一的广达的旗下转投资公司担任后端工程师。借着这次的对话,让我得以一窥与内存、储存空间和效能奋战的工作日常。相关访谈1.工作
★全文分享★  [笔记] BootStrap Card + Grid System + Modal 弹出视窗
[笔记] BootStrap Card + Grid System + Modal 弹出视窗
运用 BootStrap 4.0 版本起有的 Card 样式,再加上 Grid System 排版。最困难的大概是“如何命名变量”和“从茫茫的API技术文件”中找到需要的资料。重点摘要Cards + Grid System 排版混用官方文件:1. https://
★全文分享★  [访谈记录] 反思 试着对未来的职涯跨出一步
[访谈记录] 反思 试着对未来的职涯跨出一步
访谈后的反思,是个让理想化为现实的具体步骤之一。在一边进修自己的技能之余,试着描绘未来工作的样貌可以让自己更加清楚是为何坚持在现在的航道上。相关访谈短期职涯目标截至目前,个
★全文分享★  [访谈记录] 坚持加上兴趣 在程式的世界中遨游
[访谈记录] 坚持加上兴趣 在程式的世界中遨游
YH 目前任职于某日商台湾分社旗下担任软件工程师,是我于高中时期于社团所结识的学长。幸亏有了 AlphaCamp 的职涯社群提出的大哉问,鼓励大家去访问目前已在相关产业工作耕耘的人们,而让我们
★全文分享★  [笔记] Alpha Camp 第一学期 暖身
[笔记] Alpha Camp 第一学期 暖身
Alpha Camp 是个新兴的线上线下整合的课程平台。和其他的网络平台课程如 Udemy, Hahow 相比,在这个 Camp 学习程式设计的最大差别在于:真人助教的一对一客制化回应,学生也可以观看其他同学的作品


按赞加入粉丝团

延伸阅读