我的第一個 Web 開發專案：學習 HTML 和 CSS
發佈於2024-08-24
瀏覽：826
介紹
開始我的第一個網頁開發專案是我作為電腦科學學生的旅程中令人興奮的一步。我選擇建立一個簡單的多頁面網站來獲得 HTML 和 CSS 的實務經驗。這篇部落格文章將引導您完成這個項目，從 HTML 和 CSS 基礎知識到我遇到的挑戰和我學到的教訓。
項目概況
該專案涉及創建一個具有多種功能的多頁面網站：
- 「關於我」頁
- HTML 與 CSS 簡介
- HTML 表格頁
- 多媒體頁面
- 表單類型頁面
HTML 與 CSS：基礎知識
首先，我使用 HTML 設計了網站的結構。我使用
建一張桌子
網頁設計的基本元素之一是表格。我學習如何使用
| 標籤來顯示行和列中的資料。我使用 CSS 設計了表格的樣式，以提高可讀性和簡報效果。
整合多媒體整合影像、音訊和視訊等多媒體元素是此專案的關鍵部分。我學習如何使用
建立表格表單對於網站上的使用者互動至關重要。我建立了一個頁面來展示不同的 HTML 表單元素，例如文字欄位、密碼和電子郵件輸入。 CSS 用於設計表單的樣式，使其實用且美觀。
挑戰與解決方案主要挑戰之一是在所有頁面上保持一致的風格。我透過使用應用統一樣式的通用 CSS 檔案 (styles.css) 解決了這個問題。另一個問題是正確定位元素，我透過嘗試各種 CSS 屬性（例如邊距、填充和浮動）解決了這個問題。 經驗教訓這個專案為 HTML 和 CSS 提供了堅實的基礎。我學習如何建立網頁、有效應用樣式以及保持一致的設計。將內容 (HTML) 與樣式 (CSS) 分開是一個關鍵要點，強調了 Web 開發中組織和清晰度的重要性。 結論建立這個網站是一次寶貴的學習經歷，它向我介紹了網頁開發的基礎知識。它增強了我對 HTML 和 CSS 的理解，並激勵我繼續探索更高級的主題。 對於那些著手類似專案的人，我鼓勵您接受學習過程並嘗試不同的技術。從此類專案中獲得的技能對於成為熟練的 Web 開發人員至關重要。 GitHub 儲存庫：https://github.com/rizalion/Webpage-using-CSS-and-HTML 與我聯繫如果您覺得這個專案有趣或有任何疑問，請隨時聯絡： LinkedIn：https://www.linkedin.com/in/rizalion |
版本聲明
本文轉載於：https://dev.to/rizalion/my-first-web-development-project-learning-html-and-css-2a9k?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
如何使用Depimal.parse（）中的指數表示法中的數字？在嘗試使用Decimal.parse（“ 1.2345e-02”中的指數符號表示法表示的字符串時，您可能會遇到錯誤。這是因為默認解析方法無法識別指數符號。 成功解析這樣的字符串，您需要明確指定它代表浮點數。您可以使用numbersTyles.Float樣式進行此操作，如下所示：[&& && && ...程式設計 發佈於2025-04-12 -
如何將來自三個MySQL表的數據組合到新表中？mysql：從三個表和列的新表創建新表 答案：為了實現這一目標，您可以利用一個3-way Join。 選擇p。 *，d.content作為年齡 來自人為p的人 加入d.person_id = p.id上的d的詳細信息 加入T.Id = d.detail_id的分類法 其中t.taxonomy ...程式設計 發佈於2025-04-12
-
如何正確使用與PDO參數的查詢一樣？在pdo 中使用類似QUERIES在PDO中的Queries時，您可能會遇到類似疑問中描述的問題：此查詢也可能不會返回結果，即使$ var1和$ var2包含有效的搜索詞。錯誤在於不正確包含％符號。 通過將變量包含在$ params數組中的％符號中，您確保將％字符正確替換到查詢中。沒有此修改，PD...程式設計 發佈於2025-04-12
-
您如何在Laravel Blade模板中定義變量？在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時，它可能並不總是最優雅的解決方案。 幸運的是，Blade通過@php Directive提供了更優雅的方法： $ old_section =...程式設計 發佈於2025-04-12
-
找到最大計數時，如何解決mySQL中的“組函數\”錯誤的“無效使用”？如何在mySQL中使用mySql 檢索最大計數，您可能會遇到一個問題，您可能會在嘗試使用以下命令：理解錯誤正確找到由名稱列分組的值的最大計數，請使用以下修改後的查詢： 計數（*）為c 來自EMP1 按名稱組 c desc訂購 限制1 查詢說明 select語句提取名稱列和每個名稱...程式設計 發佈於2025-04-12
-
如何將多種用戶類型（學生，老師和管理員）重定向到Firebase應用中的各自活動？Red: How to Redirect Multiple User Types to Respective ActivitiesUnderstanding the ProblemIn a Firebase-based voting app with three distinct user type...程式設計 發佈於2025-04-12
-
如何通過單擊鼠標單擊的div中編程選擇所有文本？在鼠標上選擇div文本單擊帶有文本內容，用戶如何使用單個鼠標單擊單擊div中的整個文本？這允許用戶輕鬆拖放所選的文本或直接複製它。 在單個鼠標上單擊的div元素中選擇文本，您可以使用以下Javascript函數： function selecttext（canduterid）{ if（d...程式設計 發佈於2025-04-12
-
為什麼儘管有效代碼，為什麼在PHP中捕獲輸入？在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是，輸出...程式設計 發佈於2025-04-12
-
如何克服PHP的功能重新定義限制？克服PHP的函數重新定義限制 但是，PHP工具腰帶中有一個隱藏的寶石：runkit擴展。它使您能夠靈活地重新定義函數。 runkit_function_renction_rename（） runkit_function_redefine（） //重新定義'this'以返回“新和...程式設計 發佈於2025-04-12
-
如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤？Unveiling the Mystery: Content Security Policy Directive ErrorsEncountering the enigmatic error "Refused to load the script..." when deployi...程式設計 發佈於2025-04-12
-
哪種在JavaScript中聲明多個變量的方法更可維護？在JavaScript中聲明多個變量：探索兩個方法在JavaScript中，開發人員經常遇到需要聲明多個變量的需要。對此的兩種常見方法是：在單獨的行上聲明每個變量： 當涉及性能時，這兩種方法本質上都是等效的。但是，可維護性可能會有所不同。 第一個方法被認為更易於維護。每個聲明都是其自己的語句，使...程式設計 發佈於2025-04-12
-
如何使用替換指令在GO MOD中解析模塊路徑差異？在使用GO MOD時，在GO MOD 中克服模塊路徑差異時，可能會遇到衝突，其中3個Party Package將另一個PAXPANCE帶有導入式套件之間的另一個軟件包，並在導入式套件之間導入另一個軟件包。如迴聲消息所證明的那樣： go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...程式設計 發佈於2025-04-12
-
如何修復\“常規錯誤：2006 MySQL Server在插入數據時已經消失\”？How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...程式設計 發佈於2025-04-12
-
eval（）vs. ast.literal_eval（）：對於用戶輸入，哪個Python函數更安全？稱量（）和ast.literal_eval（）中的Python Security 在使用用戶輸入時，必須優先確保安全性。強大的Python功能Eval（）通常是作為潛在解決方案而出現的，但擔心其潛在風險。 This article delves into the differences betwee...程式設計 發佈於2025-04-12
-
如何從PHP中的數組中提取隨機元素？從陣列中的隨機選擇，可以輕鬆從數組中獲取隨機項目。考慮以下數組：; 從此數組中檢索一個隨機項目，利用array_rand（ array_rand（）函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵，我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。程式設計 發佈於2025-04-12
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
