用代碼寫(xiě)簡(jiǎn)歷：前端新人的第1個(gè)實(shí)戰(zhàn)項(xiàng)目，面試官當(dāng)場(chǎng)打開(kāi)瀏覽器

找工作時(shí)遞上一份自己寫(xiě)的網(wǎng)頁(yè)簡(jiǎn)歷，面試官會(huì)是什么反應(yīng)？

對(duì)很多剛畢業(yè)的開(kāi)發(fā)者來(lái)說(shuō)，簡(jiǎn)歷是敲門(mén)磚。但大多數(shù)人選擇下載模板，少數(shù)人直接用HTML和CSS手寫(xiě)一份——后者往往能在面試開(kāi)場(chǎng)就制造話題。

這不是炫技，而是一個(gè)合理的切入點(diǎn)：你已經(jīng)學(xué)了基礎(chǔ)標(biāo)簽和樣式，正好用真實(shí)需求來(lái)練手。

拆解思路：先分塊，再填充

蓋房子要先畫(huà)圖紙。把簡(jiǎn)歷頁(yè)面當(dāng)成一塊地皮，用容器（container）圈定范圍，再按1:3的比例切成左右兩欄——左邊放個(gè)人信息，右邊鋪經(jīng)歷詳情。

這種分法很樸素：左側(cè)窄欄固定展示頭像、聯(lián)系方式，右側(cè)寬欄留給動(dòng)態(tài)內(nèi)容，招聘方掃一眼就能抓住重點(diǎn)。

材料清單：7樣?xùn)|西

具體需要哪些"建材"？

1.Divisions（分區(qū)）：用div切分頁(yè)面，給每個(gè)區(qū)域起唯一名字，方便后續(xù)精準(zhǔn)加樣式

2.Headings（標(biāo)題）：h1到h6層級(jí)，把"教育背景""工作經(jīng)歷"這些模塊標(biāo)出來(lái)

3.Paragraph（段落）：自我描述、項(xiàng)目細(xì)節(jié)都用p標(biāo)簽包裹

4.Measurements（尺寸）：height、width、color這些屬性控制視覺(jué)呈現(xiàn)

5.Image（圖片）：頭像或作品截圖

6.Table（表格）：技能評(píng)分、時(shí)間線等行列數(shù)據(jù)

7.Display和Directions（布局與方向）：flex或grid決定元素怎么排，方向?qū)傩钥刂崎喿x流

另外會(huì)用到語(yǔ)義化標(biāo)簽——header放頁(yè)眉，nav留給導(dǎo)航（如果有作品集鏈接），footer塞版權(quán)和聯(lián)系方式。這些標(biāo)簽對(duì)瀏覽器和開(kāi)發(fā)者都自解釋?zhuān)纫欢褵o(wú)意義的div更專(zhuān)業(yè)。

核心代碼：容器怎么寫(xiě)

容器是地基。示例里的CSS長(zhǎng)這樣：

/*Class Selector*/

.container {

/* border: 1px solid red; */

height: 100vh; /* View Port Height */

width: 70vw; /* View Port Width */

margin: auto;

display: grid;

grid-template-columns: 1fr 2fr; /* 左右分欄 */

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

注釋掉的紅色邊框是調(diào)試用的，畫(huà)完分區(qū)就刪掉。100vh讓容器撐滿整個(gè)視口高度，70vw控制寬度避免在大屏上攤得太開(kāi)，margin: auto實(shí)現(xiàn)居中。grid布局用1fr和2fr的比例，正好對(duì)應(yīng)前面說(shuō)的1:3分割。

陰影那行是視覺(jué)加分項(xiàng)，讓簡(jiǎn)歷紙從背景里浮出來(lái)一點(diǎn)，像真實(shí)的A4紙放在桌面上。

為什么從這個(gè)項(xiàng)目開(kāi)始

網(wǎng)頁(yè)簡(jiǎn)歷有幾個(gè)隱性好處：

第一，成果立刻可見(jiàn)，改一行代碼刷新就能看到效果，正反饋很快。

第二，天然覆蓋HTML和CSS的核心知識(shí)點(diǎn)——盒模型、選擇器、布局系統(tǒng)、響應(yīng)式基礎(chǔ)。

第三，面試時(shí)有實(shí)物可講，從設(shè)計(jì)決策到技術(shù)難點(diǎn)都能展開(kāi)。

比起做假想的練習(xí)題，解決自己的真實(shí)需求更容易堅(jiān)持。而且這份簡(jiǎn)歷本身就可以放進(jìn)作品集。