iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0

嗨我是稚鳥。這是一個for比菜鳥還菜的幼鳥前端指南。

  • 幼鳥品種說明:學過一種程式語言,但對前端沒啥概念
  • 這系列會講:一米米的HTML,一點點的CSS ,和JS,外加一點UIUX
    最後就會進入到REACT(目前還不知道會寫到多少)
  • 內容形式:實作+需要花點力氣理解的概念,夾雜一點我的理解
  • 目標:寫出一個食譜+電商的前端

廢話的時光總是特別的快,開始築巢囉GOGO~~


1.VSCode + Live Server

我們會用VSCode + Live Server,VSCode大家應該都聽過,Live Server則是VSCode的模組。用來建立即時更新的本機伺服器,協助我們前端開發。

Live Server安裝操作gif圖

安裝後,測試一下:隨便建個html,按左下方Go Live的按紐,點下,就可以到自己設計的前端。

莫非我瞎了 找不到go live

如果你和我一樣衰,遇到的鳥事可能有 → Go Live跟你玩躲貓貓。以下是我當時嘗試的兩個方法,

  1. 降低Live Server版本
  2. 在資料夾中,添加一個html放Live Server設定碼。 (我當時參考的) weixin博客

2.這幾個HTML TAG有差嗎? 怎麼樣亂用

<header>,<main>,<aside>,<footer>在樣式表現上與<div>沒有任何不同,他們都很素。但為甚麼要用呢?
兩個原因:1.人易讀   2.電腦易讀 優化SEO

<body>
	<header>header</header>
	<main>main,重點放前面是為了SEO</main>
	<aside id="left">left</aside>
	<aside id="right">right</aside>
	<footer>footer</footer>
</body>

HTML TAG

<article>和<section>啥關係?

<section>:章、節
<article> :文章,一種特殊的<section>,更強調獨立性
→ 他們不是從屬關係,可以相互巢狀


3.<div>間的空隙怎麼去掉 - Reset瀏覽器預設margin,padding

全域型的Reset
副作用:讓不需要清除預設的元素也被Reset,SEO差

*{
    margin:0; padding:0;
}

比較好的做法 → 列出你需要修改的,下面有兩個網站可以參考他們列的拉~~

body, h1, h2, h3,p, 
ul, ol, li, 
th, td, img{
	margin: 0px;padding: 0px;
}

好啦今天就這樣結束囉。每天一點廢話,開始~

分享一下,寫這篇地狀態,比較有畫面感 哈哈哈哈
時間:下午8/31(再版時間)
音樂: 這個人 廖俊濤 「時縫裡的情書」線上微光LIVE版(我比較愛這個版本) 7:34
飲料:熱可可
地點:我房間窗邊旁邊
狀態:關起窗戶,邊唱歌邊寫,超害怕被鄰居罵(之前被罵過)


參考資料


下一篇
DAY2 FLOAT佈局 - 搞懂他愛出軌的心
系列文
前端幼鳥三十天養成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言