基本設定

git init  //初始化git儲存庫​

git config --global user.name   //"設定的名字"
git config --global user.email   //"設定的Email"

git config --list  //檢視 Git 設定


學習

文化生活

以行動支持創作者！付費即可解鎖

軟體開發

睿哲楊的沙龍

檔案

專案

合併

git常用指令整理

這邊我們要先釐清grid跟flexbox的差別，flexbox是一條軸線("就是橫排跟直排")，而grid則是「行＋列同時控制」，將容器切割成格子，會將元素擺進指定的格子或者自動排列。

grid 程式碼如下:

display: grid  //啟用 Grid

grid-template-col

職場

音樂藝文

程式

控制

認識grid

我們現在常見的flex的語法有這些

display:flex //(注意：這裡如果沒設成flex，底下語法都無法使用喔!!!)

flex-wrap

flex-direction

flex-flow  //(可以同時設定flex-direction和flex-wrap)

justify-co

順序

加入

空間

認識CSS flex

首先我們先聊聊margin&padding的差異之前，我們先可以先聊聊元素的外框



HTML裡的一個元素外面都有所謂的外框，依次分為margin、border、padding。而他們各自述職的位置對應不同的外邊界(ex:margin "方向分為上、右、下、左")

我們先聊聊margin，所謂的

投資理財

邊界

margin&padding的差異

首先需要先購建構環境，那我們要先去安裝nvm。

至於nvm是什麼，nvm全名"Node Version Manager"，是一款專門用來管理node.js版本的工具，他可以協助你安裝、切換、管理不同版本的Node.js



安裝nvm:

接著開啟終端機，按照下列步驟做:

(也可直接搜尋pow

安裝

版本

管理

Intel

環境

開始建構環境

這次我們要來了解CSS 選擇棄權重 & 關係選擇器

CSS 選擇棄權重是指不同 CSS 選擇器之間，哪一條規則會優先生效 的「重要性分數」。

就是當多個CSS規則同時套用到同一個元素時，決定哪一個樣式｢比較強」。

像是CSS:

p { color: blue; }       
.text 

權重

紫色

棄權

分數

兄弟

孫子

了解CSS 選擇棄權重 & 關係選擇器

接下來，我們需要了解HTML tag&semantic tag及Block element and inline element的意思。



我們可以先說所有的semantic tag都是HTML tag，講白一點就是HTML tag是所有 HTML 裡的標籤統稱，semantic tag是有明確

標題

資訊

輸入

清單

文章

獨立

了解HTML tag&semantic tag及Block element and inline element

首先需要先購建構環境，那我們要先去安裝nvm。至於nvm是什麼，nvm全名"Node Version Manager"，是一款專門用來管理node.js版本的工具，他可以協助你安裝、切換、管理不同版本的Node.js 安裝nvm:網址:https://github.com/coreybutler/nvm-windows/releases，點選"nvm-setup.zip"進行安裝(需要解壓縮)。接著開啟終端機。(也可直接搜尋power shell，很重要因為接下來他會伴隨著我們每一個路程) 直接利用power shell執行命令:1.nvm version ----- 用來確認nvm是否確實安裝2.nvm list available ----- 查看nvm上有那些版本的Node.js可以進行安裝3.nvm install 22.21.1 ----- 安裝你想要的Node.js的版本，例如:目前我安裝的22.21.14.nvm use 22.21.1 ----- 如果有其他版本的Node.js，享用其他版本的，可以輸入5 .node -v​ -----用來查看Node.js是否正確被安裝 然後安裝Git，網址:https://git-scm.com/install/windows點選:<a href="https://github.com/git-for-windows/git/releases/download/v2.52.0.windows.1/Git-2.52.0-64-bit.exe">Git for Windows/x64 Setup</a>.下載完之後可以用git --version這個只來確認是否安裝成功。接著需要用指令設定使用者名稱與電子郵件:git config --global user.name "XXXX" git config --global user.email <a href="mailto:XXXXX@example.com">XXXXX@example.com</a> git config --list # 確認設定資訊(名稱跟電子郵件可以自己設定) 接著我們進行安裝VScode【Visual Studio Code】網址:https://code.visualstudio.com/，點選Download for Windows接著我們可以安裝一些插件協助處理作業<a href="https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant" target="_blank" rel="noopener noreferrer">Chinese (Traditional) Language Pack for Visual Studio Code</a>：把 VScode 變中文。<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" target="_blank" rel="noopener noreferrer">Code Runner</a>：一鍵執行程式碼。<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense" target="_blank" rel="noopener noreferrer">npm Intellisense</a>：自動完成 npm 套件引入。<a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" rel="noopener noreferrer">Code Spell Checker</a>：檢查拼字錯誤。<a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server" target="_blank" rel="noopener noreferrer">Live Preview</a>：實時預覽功能。<a href="https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces" target="_blank" rel="noopener noreferrer">Trailing Spaces</a>：捕捉並顯示程式碼中的空格。<a href="https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight" target="_blank" rel="noopener noreferrer">TODO Highlight</a>：讓註解變得鮮明易於辨識。<a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" target="_blank" rel="noopener noreferrer">Material Icon Theme</a>：為專案中的檔案加上鮮明的圖示。<a href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph" target="_blank" rel="noopener noreferrer">Git Graph</a>：可以在 VScode 中看到 git flow。<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" target="_blank" rel="noopener noreferrer">Auto Rename Tag</a>：可以快速幫助修改 HTML tag。<a href="https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight" target="_blank" rel="noopener noreferrer">Color Highlight</a>：在寫 CSS 的色碼時可以直接看到顏色。 接下來最後是Visual Studio 安裝網址:https://visualstudio.microsoft.com/zh-hant/downloads/點選<a href="https://visualstudio.microsoft.com/zh-hant/vs/community/" target="_blank" rel="noreferrer noopener">Community</a>下載下來之後，會有要下載工作負載的原件，就勾選下列:ASP.NET與網頁程式開發、Azure與AI開發、Python開發及node.js開發 完成以上操作就算基本完成環境設置。

程式日記(一)