Treehouse: Web Design

October 14, 2018

1/26/2017就開始Treehouse的課程，其中Web Design系列課程我都沒有完成1/4，如今課程都已更新過，我這種跳躍式的專注力，每天胡思亂想要如何上進，卻也從未完成一件事。今天再次提起勁來，重新來過。給自己一個目標，今年底完成Web Design系列課程，有做到，再想別的事！

Course 1: Introduction to HTML and CSS

October 14, 2018

Getting Familiar with HTML and CSS
- 滑鼠效應：讓圖轉起來
- header .profile-image:hover {
  transform: scale(2) rotate(360deg);
  }
- Web Development: Front End Development & Back End Development
  - Blog:Frontend vs Backend https://blog.teamtreehouse.com/i-dont-speak-your-language-frontend-vs-backend
  - Front End: Design (Photoshop) + Development (HTML, CSS, JacaScript or jQuery)
  - Back End: 1. server 2. application 3. database (PHP, Ruby, Python)
  - WordPress is a good example of the frontend and backend working together.
HTML: The Structural Foundation of Web Pages and Applications
- HTML: head + body
- body: 1. header 2. main 3. footer
- Placeholder website: placeimg (https://placeimg.com/)
- image tag: src=”img_girl.jpg” alt=”Girl with a jacket” width=”500″ height=”600″>
- paragraph tag: has its default margin
- anchor tag = link tag: <a>
- href = Hypertext Reference
- href=”https://twitter.com/michellewu8888?lang=en” target=”blank”>Twitter
- list: ol (ordered list) & ul (unordered list)
- list item: li
Make It Beautiful With CSS
- CSS庫鑑：https://css-tricks.com/almanac/

Adding a New Web Page

Text Editor: https://atom.io/
Google basic web page: Anatomy of an HTML document

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Link Stylesheet: <link rel=”stylesheet” href=”resume.css”>

Course 2: HTML Basics

October 15, 2018

Getting Started with HTML
Structuring Your Content
Images, Text and Links
Going Further with HTML

想跟我一起當同學嗎？
點入左圖，報名去吧！