用大白话说网页设计
网页设计补习究竟在做什么
新加坡的网页设计补习教授设计与构建网站所需的视觉与前端技能：设计原则、HTML与CSS、响应式布局，以及Figma、Adobe Creative Cloud与无代码搭建工具等。它与NP、NYP、RP、SP和TP的理工学院设计与计算文凭相辅相成，也支援成人运用SkillsFuture技能创前程培训补助、IMDA TeSA数码技能路径与WSQ对接的技能提升——对延伸O水准计算机7155作品集的中学生、爱好者，以及为新加坡市场建立作品集的转行人士都很有用。
- 01设计原则：布局、字体、配色
- 02HTML与CSS基础
- 03响应式与移动优先设计
- 04从Figma原型到实际构建
- 05无代码搭建工具（WordPress、Webflow）
- 06作品集网站项目
我们辅导的技能
我们新加坡辅导涵盖的网页设计技能
从一块空白的Figma画板到上线、响应式的网站
设计基础
让它看起来对
布局与网格；字体排印；配色与对比；视觉层次与UX基础
HTML与CSS
构建页面
HTML结构；CSS样式；Flexbox与grid；响应式断点
工具与项目
从原型到上线
Figma原型；无代码搭建工具（WordPress/Webflow）；无障碍基础；构建作品集网站
从入门到作品集水准
网页设计技能路径
从入门到作品集水准的能力阶段（以技能为本，非教育部程度）
- 1
基础
设计原则——布局、字体、配色、对比与视觉层次。
- 2
构建基础
HTML结构与CSS样式，包括用于实际页面布局的Flexbox与grid。
- 3
响应式与工具
移动优先断点、Figma原型，以及无代码搭建工具入门。
- 4
作品集项目
从原型到上线，设计并构建一个完整的响应式网站。
- 5
打磨与无障碍
无障碍基础、性能与呈现质量，供学校或雇主审阅。
在你决定之前
网页设计学员会先权衡的事
在这里，作品集胜过证书
在新加坡的网页市场，一个上线、响应式的作品集网站比课程证书更能说明问题。课程围绕交付一个真实项目而设计，让你能向学校、雇主或自由接案客户展示。
网页设计与网页开发不同
网页设计专注于外观、布局与前端HTML/CSS；网页开发则更深入编程与后端逻辑。在确定学习计划前，先弄清你想要的结果。
移动优先是默认做法
新加坡大部分网络流量来自手机。响应式、移动优先的布局从一开始就教授，而非事后补上。
无代码仍需设计基本功
WordPress或Webflow等工具能加快构建，却无法替代布局、字体与层次的判断。跳过设计基础会做出能用却显得业余的网站。
手写代码 vs 无代码
手写代码、无代码或混合——三种路线对比
为你的目标选择合适的方式
| 方式 | Best for | 掌控与深度 | 做出首个网站的速度 |
|---|---|---|---|
| 手写HTML/CSS | 作品集实力与前端职位 | 掌控与理解最强 | 较慢 |
| 无代码（WordPress/Webflow） | 快速上线、爱好者、小型企业 | 掌控较少、产出更快 | 较快 |
| 混合（Figma + 代码） | 精通从设计到构建的流程 | 设计与构建技能均衡 | 中等 |
我们辅导谁
新加坡网页设计补习适合谁
我们根据你的起点与目标匹配导师与计划
中学与初院学生
为学校、课外活动构建项目，或在升上理工学院或大学前及早培养作品集兴趣。
- 从零编程开始
- 让项目看起来专业
- 响应式布局基础
理工学院与工教院学生
为单元、实习与设计课程申请，强化设计或资讯科技作品集。
- 作品集水准的项目
- 从Figma到代码的流程
- 无障碍与标准
转行人士
迈向网页或设计工作的在职成人，需要在工作之余具备可入职、可作为作品集的技能。
- 在全职工作之余学习
- 快速建立可信的作品集
- 辨别哪些工具重要
小型企业主与爱好者
希望自行设计与维护网站、不完全依赖代理机构的人。
- 选择无代码还是代码
- 适合移动端的设计
- 自行维护网站
技艺内幕
一个网页实际上是如何设计与构建的
让网站显得用心的流程与背后决策。
我们辅导的移动优先构建法
大多数初学者先设计桌面版网站，再苦苦把它塞进手机里。我们反其道而行。由于新加坡大部分网络流量来自手机，我们从最窄的视窗开始，在那里每一个布局决定都不得不诚实，然后再为平板与桌面逐步增强。
- 1
先勾勒移动版布局
在打开任何代码之前，先为一台375像素宽的手机划出单栏堆叠——页头、主视觉、内容、行动号召。如果它在一栏里读起来顺畅，其余的都只是叠加。
- 2
用语义化HTML标记结构
用有意义的标签（header、nav、main、section、footer）写出页面结构，让内容在任何样式介入之前就先有顺序与含义。
- 3
先写基础样式，再加断点
先套用不含媒体查询的移动版样式，再层叠min-width断点，随着屏幕变大引入多栏布局、更大的字体与更多留白。
- 4
在适当的点把布局转为Flexbox或grid
只在有空间的断点上——通常是平板以上——才把堆叠的卡片列表切换成响应式网格，让手机视图保持干净。
- 5
在真实设备上测试，而非只在浏览器
透过本地网络在一台真实手机上打开网站。点击目标、字体大小与滚动行为会暴露桌面预览所掩盖的问题。
把主视觉卡片居中，按我们教的方法
The problem
一位初学者想把单个「主视觉」卡片在一个满高的区块内水平与垂直居中，并让卡片内的文字也堆叠居中。他试过margin: auto，结果卡片停在左上角。干净、现代的解法是什么？
Worked solution
- 1把这个区块设为flex容器并给它视窗高度：该区块加上display: flex与min-height: 100vh。
- 2用justify-content: center把卡片在主轴（水平）上居中。
- 3用align-items: center把它在交叉轴（垂直）上居中——这两行一起就能在两个方向上居中卡片，而单凭margin: auto无法做到垂直居中。
- 4在卡片内部，设置display: flex; flex-direction: column; align-items: center，把标题、文字与按钮堆叠并居中。
- 5加上text-align: center让卡片内的多行文字居中阅读，并给卡片一个max-width，使行长在宽屏上保持舒适。
Answer: 一个带有justify-content: center与align-items: center的flex父容器，加上一张column-flex卡片——五行代码，在任何屏幕尺寸下都站得住。
居中是初学者最常卡住的一件事。一旦你明白Flexbox掌控一条主轴与一条交叉轴，垂直居中就不再神秘，而是变成两行可预测的代码。
我们为学员配置的网页设计工具组合
我们刻意教授业界标准、大多免费的工具，让技能能直接迁移到新加坡的工作室、代理机构或自由接案任务——没有任何东西被锁在冷门平台之后。
Figma
新加坡大多数工作室与产品团队都在用的设计与原型工具。在写下一行代码之前，我们在这里构建原型、设计系统与组件库。
VS Code
我们手写HTML与CSS用的免费代码编辑器，配合实时预览扩展，让改动即时显示在浏览器中。
浏览器开发者工具
用来读盒模型、测试响应式断点与调试布局的内置检查器——这是最被初学者低估的一项技能。
Git与GitHub
版本控制以及你代码的公开主页。一个整洁的GitHub档案本身就是一份可信的新加坡作品集的一部分。
WordPress或Webflow
用于快速搭建客户网站的无代码与低代码工具，在设计基本功稳固后才引入，使产出仍显得用心。
Netlify或GitHub Pages
把你的作品集网站放上真实、可分享网址的免费托管——这是一堆文件与一个可以发给雇主的东西之间的差别。
评判作品
业余网站与专业网站的分水岭
新加坡作品集审阅者实际采用的标准。
我们如何随作品集网站的成熟为它评级
我们用理工学院导师、招聘经理或自由接案客户会用的相同维度来评估每个项目。这是学员攀登的阶梯。
| Criterion | 初学者 | 胜任 | 作品集水准 |
|---|---|---|---|
| 布局与层次 | 元素显得拥挤或随意摆放；没有明确的焦点。 | 间距一致、网格易读；视线知道从哪里开始。 | 层次与节奏经过用心安排；留白被当作设计选择，而非偶然。 |
| 字体排印 | 默认字体、大小不一、行太长读起来不舒服。 | 合理的字号体系与搭配；行长与行高都受控。 | 字体承载品牌；字号、字重与间距强化内容的结构。 |
| 响应式 | 在手机上破版或溢出；需要横向滚动。 | 在手机、平板与桌面间干净适配，无溢出。 | 智能重排——导航、图片与网格各自以经过考量的方式响应。 |
| 代码质量 | 内联样式、复制来的片段、毫无结构；改任何东西都很难。 | 语义化HTML、可复用的CSS类、合理的文件组织。 | 整洁、有注释、可维护，队友接手得了——还有一段整齐的Git历史。 |
| 无障碍 | 对比度低、缺少替代文字、链接与按钮没有标签。 | 足够的颜色对比、图片有替代文字、可用键盘导航。 | 全程符合WCAG基础；用屏幕阅读器与纯键盘测试过。 |
新加坡初学网页设计者在哪里失分
这些是我们在第一堂课就诊断出的反复出现的习惯——每一个都可预料，也可修正。
先做桌面版设计，再发现网站在手机上崩塌。
从一开始就以移动优先来设计与编码，再向外增强到更大的屏幕。
动辄用绝对定位来手动摆放每个元素。
把Flexbox与CSS grid学成默认的布局工具；定位留给真正的叠层使用。
把页面塞得满满当当，没有一点喘息空间。
把留白当作刻意的元素——一致的内边距与外边距能让网站瞬间显得专业。
凭个人喜好挑颜色与字体，毫无系统。
先定义一个小调色板与一套字号体系，再贯穿整个网站一致地应用。
忽视无障碍——对比度低、没有替代文字、点击目标太小。
边做边内建对比检查、替代文字与键盘导航；事后补救要难得多。
本地图景
网页设计在新加坡市场与升学路径中的位置
网页设计如何契合新加坡的学校、资助与就业市场
网页设计横跨新加坡的正规学习、政府支持的技能提升与自由接案——是选择学习计划时有用的背景。
O水准计算机7155
修读GCE O水准计算机（课程纲要7155）的中学生会建立Python与计算机基础；一个自建的响应式网站能强化整体作品集，并展现考试之外的实用前端能力。
理工学院设计文凭
前端与设计技能有助于申请NYP传播与动态设计文凭、淡马锡理工传播设计文凭、SP与NP设计文凭等课程——这些课程都会衡量申请者的作品集。
成人的SkillsFuture与WSQ
25岁及以上的新加坡人可获得500新元的SkillsFuture补助（中途转业学员更多），可用于获批的WSQ认证课程；私人一对一辅导与之搭配，可提供个性化指导。
IMDA TeSA数码路径
TechSkills Accelerator是IMDA与NTUC、WSG及SSG的三方计划，支援包括软件工程在内的科技再培训——对计划长期转入网页与产品工作的转行人士是有用的背景。
自由接案与小型企业需求
许多新加坡中小企业与小贩想要一个干净、适合移动端的网站或落地页；一份扎实的作品集能在全职工作之余或之前，打开稳定的自由接案与项目工作。
Why Eduprime
学员为何选择Eduprime学网页设计
真正的从业者指导与一门泛泛的网课之间的差别
在职网页从业者，而非照本宣科的导师
为新加坡客户设计并交付真实网站的导师——让你学到课程视频从不展示的决策与窍门。
项目先行，而非理论先行
你在学习的同时构建一个真实、响应式的作品集网站，让每个概念都落在你真正能展示的东西上。
贴合你目标的计划
学生作品集、爱好网站或转行——我们根据你的方向，把课程侧重于手写代码、无代码或混合。
看得见的进步
里程碑审阅与一份构建日志让你的作品集持续推进，而非困在教程的泥潭里停滞不前。
公平的报酬留住好导师
导师获得公平且准时的报酬，因此优秀的导师会陪你走完整个项目，而非频繁流失。
全岛、上门或线上
全岛面授或配合屏幕共享的实时线上——配合你的时间与节奏。
Lesson formats
和我们学网页设计的方式
选择契合你目标与时间表的形式
一对一上门补习
一位从业者导师上门，在你的电脑上提供完全个性化、动手实操的辅导。
- 完全个性化的节奏
- 在你自己的笔记本电脑与配置上操作
- 最适合专注构建作品集
- 直接审阅你的代码与设计
一对一线上
透过屏幕共享的实时一对一，代码与Figma实时审阅。
- 灵活安排时间，配合工作或学业
- 共享屏幕实时调试
- 免去通勤时间
- 同一批从业者导师
小组（2–4 人）
一个目标相近、分摊费用的小组，对彼此的构建相互点评。
- 每位学员成本更低
- 同伴设计点评
- 按目标分组
- 有结构的每周构建挑战
Fees
新加坡网页设计补习费用
透明的市场行情配套——免费咨询后确认
入门
试一位导师，找到你的起点
S$200–400
4 sessions · ~S$50–100 / session
- 免费目标与技能咨询
- 个性化学习路线图
- 设计基础与首个HTML/CSS构建
- 工具配置（Figma、VS Code、Git）
作品集进阶
持续每周辅导，迈向一个完成的网站
S$50–100 / hr
Monthly sessions · billed monthly
- 每周一对一或小组
- 构建日志与里程碑审阅
- 响应式、手写代码的作品集项目
- 托管并部署到上线网址
转行密集班
集中冲刺，做出一份可入职的作品集
S$70–130 / hr
Flexible sessions · by mentor seniority
- 多页响应式作品集
- 精通从Figma到代码的流程
- 无障碍与性能打磨
- 作品集呈现与代码审阅
若第一堂课后匹配不合适，可免费重新匹配导师。
所列数字是新加坡一对一网页设计辅导的典型市场行情，仅供参考；你的确切费率取决于你的程度、导师经验、形式与地点，并在免费咨询后确认。在适用情况下须加收消费税（GST）。私人补习并非可用SkillsFuture报销的课程。
Accountability
你看得见网页设计的进步
我们在课与课之间让学员与家长了解进度——靠的是势头，而非猜测
里程碑审阅
每个项目阶段——设计、构建、响应式、打磨——都对照一个清晰、双方认可的标准审阅。
构建日志
记录每堂课构建与学到的内容，让作品集的进度看得见。
技能清单
哪些网页设计技能——布局、Flexbox、响应式、无障碍——已经稳固，哪些还需加强。
作品集就绪度
如实评估项目距离学校申请或雇主审阅标准还有多远。
Our tutors
项目背后的网页设计导师
贴合你目标与学习风格的在职从业者
- 动手实操的商业网页设计与前端经验
- 精通HTML、CSS、响应式布局与Figma
- 具备指导初学者与转行人士的经验
- 熟悉新加坡的作品集与自由接案市场
- 通过Eduprime的筛选与实战构建评估
Mr Tan W.
9 年以上
理学士计算机科学（NUS）；9年以上前端与UI
手写HTML/CSS、响应式布局、转行作品集
“初学者以为网页设计是背CSS属性。其实是把页面看成一道布局题——一旦想通了，代码就简单了。”
Ms Chua L.
7 年
传播设计文凭（TP）；自由网页与品牌设计师
Figma、设计系统、字体排印与视觉层次
“一个能用却显得业余的网站仍然是失败的。我们先把设计判断做对，构建自然就会跟上。”
Mr Raj K.
6 年
设计文学士（NTU ADM）；WordPress与Webflow专家
无代码与混合构建、小型企业与爱好者网站
“无代码是一件电动工具，不是绕过审美的捷径。我教企业主交付一个他们真心引以为傲、乐于分享的网站。”
What families say
新加坡学员怎么评价我们的网页设计辅导
来自我们合作过的学员的代表性体验
我从零编程开始，本以为会超出我的能力。我的导师把一切都围绕一个真实项目来构建，最后我完成了一个响应式作品集网站，用在了理工学院的申请里。
Wei Jie L.
中四学生 · 碧山 · 一对一线上
作为一个在全职工作之余学习的转行人士，我需要的是结构，而非视频。每周的里程碑审阅让我没有停滞，从Figma到代码那部分终于让整个流程说得通了。
Mdm Farah binte A.
转行人士 · Tampines · 一对一上门
我的桌面版设计总是在手机上破版。导师反复操练的移动优先方法彻底解决了这个问题，我的项目分数明显提高了。
Mr Daniel Ong
理工学院学生 · 金文泰 · 小组
对什么是切实可行的很坦诚——不承诺六位数的工作，只有稳定的项目工作与清晰的反馈。我现在有一份小小的自由接案建站副业收入。
Ms Priya N.
在职成人，从爱好到自由接案 · 实龙岗 · 一对一线上
我想不靠代理机构自己做咖啡馆的网站。我们用Webflow做的，但导师还是让我先学布局与字体排印，所以它真的好看。
Mr Kenneth Yeo
小型企业主 · 加东 · 一对一上门
小组形式非常超值，同伴点评环节让我学到的不亚于导师。看别人如何解决同一个布局问题，很有启发。
Hui Min T.
初院学生 · 宏茂桥 · 小组
Student journeys
网页设计的学习历程
从空白页到上线作品集的代表性路径
一位完全零基础、想为理工学院设计申请准备作品集网站、却从未写过代码的初学者。
- 学习设计基础，并用HTML/CSS构建了第一个静态页面
- 以移动优先重建它，使其完全响应式
- 把完成的网站部署到上线网址，纳入申请
在申请中提交了一个打磨好的响应式作品集网站，并能自信地讲述它是如何构建的。
中四学生 · 约 4 个月
一位转行的在职成人，能跟着教程做，却无法独立从零构建任何东西。
- 用一个引导式的真实项目构建取代了抄教程
- 掌握了从Figma到代码的流程与一套可复用的CSS系统
- 加上无障碍与性能打磨，达到可入职的水准
完成了一个多页响应式作品集，并在求职之余开始接小型自由接案任务。
转行人士 · 约6个月
一位想自行维护网站、而非每次改动都付钱给代理机构的小型企业主。
- 在动用搭建工具之前，先涵盖布局、字体排印与层次
- 用一个无代码工具构建并上线网站
- 学会独立更新内容与新增页面
上线了一个干净、适合移动端的企业网站，如今无需外部帮助便能自行维护。
小型企业主 · 约3个月
如何开始
从首次联络到第一堂课
与Eduprime开始网页设计补习的流程
- 1
免费咨询
我们了解你的起点程度、目标（作品集、爱好、转行）以及每周可用的时间。
约 15 分钟 - 2
技能检测
快速回顾任何先前的编程或设计接触，以设定合适的起步阶段。
匹配前 - 3
导师匹配
我们匹配一位符合你目标、程度与时间的在职网页从业者——线上或面授。
1–3 天 - 4
引导式学习
透过小型构建练习，动手教授设计原则、HTML/CSS与响应式布局。
持续进行 - 5
构建作品集项目
你设计并构建一个完整的响应式网站，导师在每个里程碑给予审阅。
项目阶段 - 6
审阅与打磨
完善无障碍、性能与呈现，使网站可供向学校或雇主展示。
最后阶段
范围一览
Eduprime网页设计补习的涵盖范围
如实说明——实用技能与一个作品集项目，不保证就业
- 入门→作品集
- 支援的技能范围
- HTML / CSS / Figma
- 核心工具组合
- 1
- 构建的作品集网站
- 全岛
- 线上或面授
学员问题
新加坡学员常问的网页设计补习问题
关于工具、作品集与转行的直接解答