布萊恩的創業小窩

  前端工程師 網頁開發神器Emmet,別怕,這篇手把手帶你輕鬆入門!   目錄 快速產生標籤名稱 （Tag Name） 快速產生 className 與 id 父子兄弟階層、群組、上一層 父子元素一次輸入 兄弟階層一次輸入 將元素設為同一階層的群組 上一層 複製元素 編號 設定起始編號 顯示文字 自訂屬性值 身為一個 前端工程師 ，一定要裝一個「省時神器」 Emmet 外掛，可以大大節省前端工程師在編寫  HTML  及 CSS 的時間。省下的時間可以讓你去體驗人生各種美好的事物，如玩玩喵星人、上上健身房運動等等。 Emmet 支援的網頁編輯器如下圖： 安裝下載的方式因個網頁編輯器而異，且在網路上皆可以查到教學，故此省略。以下小編先介紹基本的使用方式： 快速產生標籤名稱 （Tag Name） 前端工程師 在寫網頁的第一步，就是在網頁編輯器中開出新的頁面，並產生標準的  HTML5  樣板。透過 Emmet，我們可以先在編輯器中輸入「!」或是「html:5」後，再按下 Ctrl+E 鍵即可。 假設我們要產生一個 p 元素，那麼我們只要直接輸入 p 後，再按下 Ctrl+E 鍵，就能自動產生起始元素及結束元素。如下所示： 只要是 HTML 所定義的元素，如 h1-h6、center、title 等等，都能使用上述方示，快速產生出相對應的語法如下 有些元素還會帶入跟該元素有關的屬性，例如：iframe、a 或是 img 等 快速產生 className 與 id 我們也可以在產生元素時，直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤，則輸入「h1.title」後按 Ctrl+E 若是要針對單一元素要加上多個 class name 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 Class Name 為「new...

  為何他會想轉職成為 前端工程師 ?讓我們一起來看看他的理由,說不定你也心有戚戚焉呢! 測試工程師察覺現況，決定學習網頁前端     林先生大學時就讀電子工程學系，現在是一名網頁 前端工程師 ，在公司負責網頁前端的切版及開發。 在轉職之前，林先生的工作是科技業的測試工程師，但當時公司所有的產線、設備基本上都在大陸，且公司也在管控出差的人員。林先生察覺到這樣下去，根本學不到實際的東西，因此埋下了轉職的念頭 當時因緣際會下接觸到達內教育的「 前端工程師 」課程，聽完說明後理解到：這是一份包含了從入門到進階應用、從前端到後端的一條龍式課程，非常的全面，於是就決定報名了。   非本科系的微痛學習歷程 畢竟不是本科系，從未接觸過網頁開發的林先生在學習過程中，感到壓力非常大。從基礎的網頁切版到學習 Javascript 框架，並獨自一人整合網頁前後端，完成專案。雖然過程中壓力非常大，且遇到非常多不會的問題，但是當把獨立完成的網頁呈現出來時，成就感不是言語能描述的。   前端工程師經驗滿一年 林先生轉職至今，已累積了超過一年的 前端工程師 經歷。他說：每天都會有新的技術需要學習、新的問題需要解決。「如何調整心態，並不斷精進能力，是當前需要解決的課題。但有著在達內這段學習的歷練，相信我很快便能夠克服。」     延伸閱讀： 人工智慧眼科輔助診斷軟體,幫你診斷視網膜病變!(下) 畫畫真的好難!就讓這人工智慧輔助繪圖能力來幫助你~ 靠AR來訓練軍中狗,效果如何?一起來了解這玩意! Python與R語言之戰鹿死誰手?盤點5個即將消失的程式語言! Google 在 Search Console 中啟用新的檢索統計報告 Google 12 月更新演算法！SEO今年排名最大洗牌 用說的就能寫程式！人工智慧替手傷工程師開發語音程式工具    

要是一個 前端工程師 也將後端的MySQL學起來~競爭力直接upup! 對於 前端工程師 來說，MySQL 是屬於後端工程師的技能。但是若 前端工程師 也略懂 MySQL 的話，無論是求職上會有莫大幫助。 因為在人力銀行網站搜尋 前端工程師 的職缺，會發現有些公司會把 MySQL 列為前端工程師的必備技能。通常 (非全部) 擁有 MySQL 技能的前端工程師獲得高薪的機會較大。多一項能力，調薪的籌碼就越大。 推薦閱讀： 前端工程師的學習路線圖整理 我們就直接切入基礎的 MySQL教學！本篇先來簡介一下資料庫 4 大基要語句，他們分別是定義資料庫的 DDL (Data Definition Language)、操作資料庫的 DML (Data Manipulation Language)、控制資料庫的 DQL (Data Control Language) 與查詢資料用的 DCL (Data Query Language)。簡介如下：   資料庫定義語言 - DDL (Data Definition Language) 定義資料庫的結構，常見語句有 CREATE、DROP、ALTER。 DROP 丟棄或刪除資料庫。寫法如下： 刪除一個「已經確定存在」的資料庫： DROP DATABASE 資料庫名稱; 範例： DROP DATABASE xz; 刪除一個「不確定是否存在」的資料庫： DROP DATABASE 資料庫名稱; 範例一. 在不確定名為「xz」的資料庫是否存在的狀況下，刪除 xz 資料庫： DROP DATABASE IF EXISTS xz; ▲ 在命令提示字元使用 MySQL 的 DROP DATABASE 語法 CREATE 創建資料庫或表格。寫法為： CREATE DATABASE 資料庫/表格名稱; 範例一、創建名為 "xz" 的資料庫： CREATE DATABASE xz; 範例二、創建名為「FrontEndElements (網頁元素)」的表格，表格有兩個欄目，分別為「element(元素)」、「usage(用途)」；又令「element」的內容限制為 10 個字元、「usage(用途)」則為 32 字元，代碼如下所示...

HTML5的電子書翻頁效果原來這麼多樣態,而且今天這篇文章還送你原始碼! 1. HTML5 書本翻頁動畫特效 首先，先來介紹手動翻書頁面特效的基本款～ 這款 HTML5 翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來進行快速翻頁。 ▶網頁上展示 ▶原始碼下載 2. HTML5 3D書本翻頁特效   利用 HTML5 和 CSS3 不但可以實現翻頁動畫，還可以以3D 的立體形式實現！下面這款書本翻頁特效，使用鼠標拖拽書本頁面即可翻動頁面，在翻頁的過程中，書本還可以呈現出3D立體的效果 - 包括書本中的圖片也是。 ▶網頁上展示 ▶原始碼下載 3. HTML5 /CSS3書本翻頁3D動畫 另一種簡潔版書本3D動畫特效，就是這種：當我們將鼠標滑過書本時，書本就會自動一頁頁翻過去，書本的3D效果不但非常鮮明、極簡，舒服。 ▶網頁上展示 ▶原始碼下載 4. 超逼真書本翻頁動畫(CSS3版) 這款 CSS3 動畫效果是模擬書本翻頁的動畫特效。當鼠標滑過書本右上角時，書本即可向前翻一頁，而且翻頁動畫非常逼真。由於 CSS3 的運用，我們並不需要使用複雜的圖片來製造逼真的書本效果，書本翻頁可以很簡單地完成。 ▶網頁上展示 ▶原始碼下載 5. 超逼真書本翻頁動畫(jQuery版) 這款 jQuery 書本翻頁 3D 動畫，功能更加強大，支援頁數不限，並且也有非常逼真美觀的視覺效果。書本的內容支持所有的 HTML 元素，彈性高、強大好用。 ▶網頁上展示 ▶原始碼下載 6. jQuery/CSS3書本翻頁動畫特效 這是一款基於 jQuery 和 CSS3 的書本翻頁動畫特效，外觀清新、而且還有指示便於操作呢！除了點擊滑鼠來翻頁之外，我們還可以直接點擊左右按鈕進行翻頁。 ▶網頁上展示 ▶原始碼下載 延伸閱讀文章： 用Python寫出自己的番茄鐘!人工智慧來增加我效率了~下 Python可是你不能不了解的傳奇!有多好用?看這篇就知道~ 24個對Python初學者的中肯建議,你敢不聽嗎? Python vs ...

在那些前端工程師必學的CSS裡,今天就來教你那個叫"浮動屬性"的小傢伙~ CSS 的 float (浮動) 屬性 CSS 的 float (浮動) 屬性，是 前端工程師 在做網頁排版時，必用的基本語法之一。使用 CSS float 浮動屬性，可將一個元素往左移或是往右移，並允許其他元素圍繞它（例如文繞圖、圖繞文等）。 何時使用？－float 浮動屬性的使用時機 使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。 如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法） See the Pen Float-example-1 by Tedutw ( @Tedutw ) on CodePen . 承上例，若在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法）： See the Pen Float-example-2 by Tedutw ( @Tedutw ) on CodePen . 這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況 承上例，若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right ;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）： See the Pen Float-example-3 by Tedutw ( @Tedutw ) on CodePen . 你知道 CSS 的浮動屬性總共有三個參數嗎？分別是：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的拉！如上方兩個例子所示。而 none 就是不使用浮動參數的意思。 下方是另一個文繞圖...

想成為前端工程師?今天讓我們一起來了解定位元素! 為了要設計出更複雜的網頁前端版面， 前端工程師 都必須知道 CSS 的所有「position 屬性」。 如下所示，它有一～大堆屬性值，這些屬性值不但不好理解，也不好記憶！而且稍一設定不好，就會讓許多 CSS 區塊若入走鐘、重疊等窘境。 別煩惱了！現在將會一個個介紹屬性，如下。也建議各位想當 前端工程師 的學員們把這頁加入網頁書籤中！以便日後方便查詢唷！ See the Pen CSS:Position 範例 by Tedutw ( @Tedu tw ) on CodePen .   CSS：Positioning Elements 定位元素 CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。 所有的元素都可用 top（上）、bottom（下）、left（左） 與 right（右） 屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。   靜態定位（position: fixed） 「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。 靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。 See the Pen position_static by Tedutw ( @Tedutw ) on CodePen .   固定定位（position:fixed） 固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。 不同於靜態定位，固定定位（posi...