iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

從零打造網頁系統:非資訊人也能完成的全端專題實作 系列

這次我選擇的主題是「從零打造網頁系統:非資訊人也能完成的全端專題實作」。起緣於修習輔仁大學專題課程時,有實際參與網站開發,雖然本身非資訊專業出身,但過程中透過不斷地向老師、學長及AI工具提問,經拆解問題與修正,逐步完成前後端整合的專題網站。

系列文章預計以紀錄者的角度,記錄我在實作中的心得,範圍包括前端、後端、Docker及部署等技術。相關內容將以實例逐步開展,記錄我對各個實例的心得與學習成果,希望對同樣從非資訊背景踏入網頁開發的朋友,能有所助益。

參賽天數 22 天 | 共 22 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文 團隊ZeroToAI3 × 友AI輔能
DAY 1

Day 1: 前言

這次參加2025 iThome鐵人賽,選題為Modern Web。因為剛好在輔大的專題課程中,有參與網站開發,並且完成展示成果。由於本身並非資訊專業,在這個專題...

DAY 2

Day 2: 網頁程式設計的基本三要素

首先先從簡單的概念開始,一般我們提到網頁程式設計,由三個主要要素組成,分別為HTML、CSS、JavaScript,分別說明如下: HTML:以元件為單位,建...

DAY 3

Day 3: HTML的元件

在取得ChatGPT提供的程式碼後,為了快速了解,提供一點一開始要先掌握的HTML概念。 可以想像HTML為由各元件排列組合而成的結構,常見元件如<div...

DAY 4

Day 4: HTML元件的選取與控制

接下來要提到的是,選取與控制元件的方式,以及各個元件有各自獨特的功能語法。 選取與控制元件,涉及到後續要以CSS美化(渲染),或是以JavaScript寫入功...

DAY 5

Day 5: CSS的選擇器

在初步了解HTML語法後,接下來要開始針對元件進入美化(渲染),與之配合的程式語言,即為CSS。 大部分的CSS語法,都是跟視覺感官設計相關的操作,諸如著色、字...

DAY 6

Day 6: CSS的display參數(block, flex)

接下來就CSS語法,另外一個極其重要的功能就是排版,即針對元件相互間的排列與展示,進行控制,以讓網頁瀏覽者可以看到整齊且經過設計的視覺呈現。 元件的排版,所處理...

DAY 7

Day 7: CSS的display參數(grid)

display: grid(網格排版) 設定後,會使得所設定元件的「子元件」,可以在橫列與直行上排列(2D排列),藉由橫列或直行的設定,把畫面呈現如同切成一格一...

DAY 8

Day 8: CSS的一點小心得

在結束CSS之前,想針對CSS的學習心得做點分享,CSS學習的難點,我覺得不在於屬性參數的語法,因為以目前的學習資源(ChatGPT、W3schools),要快...

DAY 9

Day 9: JavaScript程式碼實例簡單介紹

在經過HTML、CSS的學習後,接下來要提到的JavaScript,對於增加網頁的互動功能性,扮演舉足輕重的角色。舉凡點擊按鈕後,會產生相對應的互動,諸如產生填...

DAY 10

Day 10: JavaScript的箭頭函式(arrow function)

箭頭函式是JavaScript的一種特別的函式寫法,用來簡化一般函式(function)。 //一般函式 function() { ... }; //箭頭函...