iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

從0開始的網頁生活!30天從網頁新手到網頁入門 系列

鐵人鍊成 共 30 篇文章 | 44 人訂閱 訂閱系列文
DAY 1

Day01-系列文介紹、規劃

前言 哈囉大家好我是 Andy,這是我第一次參加鐵人賽希望可以如期的每天都能發一篇文章出來 XD 上網可以說是當今人們必備技能,也讓越來越多人想從事與網頁相關的...

2018-10-16 ‧ 由 AndyChen 分享
DAY 2

Day02-網頁三兄弟:HTML、CSS、JavaScript

網頁架構 在正式進入網頁教學之前先來簡單介紹一下構成網頁三大元素:HTML、CSS、JavaScript 由上圖可以發現 HTML 負責的就是把網頁的結構生出...

2018-10-17 ‧ 由 AndyChen 分享
DAY 3

Day03-深入理解網頁架構:DOM

什麼是DOM DOM 全名為 Document Object Model 中文翻譯為 文件物件模型,看起來很抽象但其實就是把一份 HTML 文件內的各個標籤,包...

2018-10-18 ‧ 由 AndyChen 分享
DAY 4

Day04-CSS選擇器

前言 經過 Day02 的介紹相信大家對於 CSS 已經有了初步的瞭解,接下來筆者要介紹的內容可以說是 CSS 的精髓,學會 CSS Selectors 了才能...

2018-10-19 ‧ 由 AndyChen 分享
DAY 5

Day05-讓CSS不再難讀!SCSS

什麼是SCSS 在開始介紹 SCSS 之前先來介紹一下 SASS,在前一篇的 CSS 選擇器 中相信大家寫久之後會有一個感想,每次都要寫一大串的選擇器真的是非常...

2018-10-20 ‧ 由 AndyChen 分享
DAY 6

Day06-HTML開發利器!Emmet

前言 經過前兩天的介紹相信大家都對 HTML 已經有了差不多的概念了,但是當我們在寫 HTML 的時候難免大家都會有這種想法:難道我們每寫一份 HTML 文件就...

2018-10-21 ‧ 由 AndyChen 分享
DAY 7

Day07-網頁排版利器!Flexbox

前言 網頁最重要的就是排版,一般來說網頁是由一個一個的 區塊(block) 組合而成,要排得好看基本上都要給定寬高,但這種排法會讓每個區塊過於死板,即便不把寬高...

2018-10-22 ‧ 由 AndyChen 分享
DAY 8

Day08-更強大的網頁排版利器!Grid

前言 在昨天的 flexbox 介紹相信大家對於排版已經有了初步的了解,藉由 flexbox 讓網頁排版不再困難,然而前端世界變化萬千,比 flexbox 更厲...

2018-10-23 ‧ 由 AndyChen 分享
DAY 9

Day09-CSS定位系統!position

前言 一開始學習的網頁都是比較單純都是一行一行的排版,筆者前面的文章也都先以排版的樣式開始介紹,然而時間久了自然會想讓網頁變得更加複雜,例如會想做點堆疊或者是幫...

2018-10-24 ‧ 由 AndyChen 分享
DAY 10

Day10-html tag元素預設排版樣式

前言 前面幾篇文章終於把跟排版有關的樣式都說完了,今天這篇文章比較輕鬆一點來講一些 HTML tag 本身預設的排版樣式,讓工程師不用為了一些簡單的排版還要去寫...

2018-10-25 ‧ 由 AndyChen 分享