題主問的應該是類似企業官網的網站，而不是Web Application這種系統類網站吧。

接下來我分類回答。

企業官網

對于企業官網，通常的功能包括企業介紹，產品/服務介紹，聯系信息，成功案例等等。其中企業為了通過官網進行營銷，會在一定程度上讓官網和企業的CRM系統進行集成以便生成并進一步跟進潛在客戶信息。

目前業界使用比較廣泛的工具是WordPress。那么一般情況下在選取合適的模板后，可以進入WordPress的后臺進行修改配置等。不需要直接接觸數據庫或者代碼。當然有經驗的朋友能夠對MySql和PHP有了解更好，因為WordPress是基于MySql和PHP的。

WordPress有一個很好的地方在于，做出來的網站響應式的（responsive）。能夠根據訪問的設備進行顯示。根據電腦，平板，手機自動調整顯示。

并且WordPress有超多的模板可供選擇，非常方便。

接下來上圖，可以看一下WordPress的功能，圖片包括了模板和手機顯示效果。

應用系統類網站 （Application Website）

這類系統說是網站，其實是基于Web的應用系統。功能龐大，邏輯復雜，涵蓋面很廣。目前的SaaS系統多是這一類。

一般前端也比較復雜，使用復雜的JavaScript架構，早一點的如JQuery，現在更多的使用React, Angular, Vue等。

后端使用Java的比較多，能夠應對復雜的邏輯。根據實際情況，后端也有可能是分布式的。一般來說分為調度控制層(Controller), 業務應用層 (Business Application), 數據訪問層（Persistence)。

調度控制層(Controller)：進行訪問的控制，用戶識別，以及請求的分發等。業務應用層 (Business Application)：SaaS應用的整個業務邏輯核心層就在這里了，一般覆蓋面廣，邏輯也較為復雜。數據訪問持久層（Persistence)：跟數據庫打交道的這一層，通常業界也有成熟的框架，如Hibernate，Mybatis等。大型應用也會引入緩存機制來提高效率，如 Redis等。

希望上述能夠回答題主的問題。如有進一步問題，請留言/私信。

學HTML5肯定沒問題，但要看學到什么程度，題主可能是要學到能找工作，如果沒有一點基礎那是需要花相當大的精力。 具體學習方法在我之前的回答里也介紹過多次，主要就是：

找一個系列視頻認真跟學

找一本評分比較高的入門書籍

找一本評分比較高的實戰書籍

入門后熟練學習掌握幾個前端框架

如果非計算機專業，那建議再抽點時間學習一點HTML4基礎知識、JS入門知識，然后再學習HTML5。w3school是一個比較好的入門網站，可以多逛逛。

做前端設計、網頁設計的，素材永遠很重要。因為素材的美觀程度往往直接決定了網頁頁面的風格、整潔度、色調等等。

我大學時候，在一家非常小型的創業公司實習。公司人員只有幾個，所以在那時我基本上算是獨立開發了一個旅游酒店訂購平臺，前端設計、后端開發、公眾號開發等等都涉及，那段時間基本是我最全能的時候了。

所以當時我也收集了許多的前端素材，在這里一并分享給大家。

一、圖標類

每一個Web開發者，尤其是前端開發人員一定都會需要icon圖標來為項目增色。

Font Awesome Icons

Font Awesome提供可縮放的矢量圖標，可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

Icon Monster

特點：免費，高質量,。非常簡潔的icon圖標庫。

IconFinder

這是一個比較有設計感的Icon圖庫，并且已經打包分類好，缺點是只有部分是免費的。個人覺得里面免費的圖庫也已經夠用了。

附上圣誕特輯！

Iconfont-Alibaba

阿里巴巴UX部門推出的矢量圖標管理網站，也是國內首家推廣Webfont形式圖標的平臺。這個相信大家都用過！

二、圖片素材

無版權限制的圖片素材

PEXELS

Pexels可以說是圖片素材界的超級網紅了，說到圖片肯定哪里都有它，我自己都推薦好幾次了。可以免費下載各種各樣的分辨率，包括原圖尺寸。

網址：(https://www.pexels.com/)

例如搜索：圣誕節（Christamas）

PNGimg

這個主要用作素材，是不同種類的無背景素材圖片！直接可以免費用。注意它是全部都是無背景圖片，非常適合那些需要PNG透明底配圖的。

(http://pngimg.com/)

例如搜索：Birds

KaboomPics

KaboomPics是以生活化免費高質量圖片素材為主的圖片素材庫。里面的圖片都是攝影愛好者攝影后通過審核上傳的。并且可以應用于任何項目，沒有版權限制。

自媒體可以從中找封面圖，攝影愛好者也可以從中欣賞或著學習。

Unsplash

（https://unsplash.com/）

先這樣~希望這些資源對你有幫助，下次還會更新一些web開發的常用工具。

如果有幫助，歡迎關注我以示支持，也以防錯過下一波干貨！~