Web 前端入门

By Harttle 课程任务:10 个 学习人数: 38

学习HTML、CSS、Bootstrap,从零开始!以 天码营博客 为例,创建完整的、响应式的、现代化的页面。

超级名师

导师来自北京大学计算机专业的老师和业界一流的工程师,帮助你快速成长

求职必备

导师们最大的烦恼就是每天各路公司求他们推荐程序员,帮帮他们吧,快到碗里来

实战导向

图文、代码与视频有机结合的实战课程内容,打造真实的项目,最佳实践一网打尽

专业工具

随时随地学习在线学习,记录完整的学习过程与轨迹,沉淀终生受益的代码和内容

准备工作

  • 《Web前端入门》一门天码营的公开课程,为期一周左右。

  • 我们提供了完整和详细的过程指导、完全可复现的参考代码、在线讨论板块、以及学习过程记录工具。

  • 在开始学习之前,强烈建议您选择合适的文本编辑器(或IDE),我们推荐使用 Sublime

简单的Web页面

  • HTML标签的学习
  • CSS选择器学习
  • 使用第三方CSS库

Bootstrap入门

  • 基础样式和页面组件学习
  • 响应式布局与小屏幕适配
  • Bootstrap栅格系统学习

项目实战

  • 页面设计:文章列表、文章展示、文章编辑
  • 组件设计:导航栏、边栏模块、页脚信息
  • 文件组织:静态文件处理、理解URL

David

北大教师,曾创办OSGi中文社区和软件开发协工具onboard

Ricky

天码营技术总监,全栈程序员, DevOps,超级工具控

Harttle

北大物理系出身的Linux极客,追求极致简单,武术发烧友

Cliff

传说中的快刀手,北大计算机应用与设计协会前理事长

Michael

Google工程师,北大信息科学技术学院本硕

Bob

Facebook工程师,北大信息科学技术学院本硕

Hash

北大数字艺术专业毕业,十年设计经历,极限运动爱好者

Li

任职于Twitter、Airbnb,德州扑克世界赌王大赛冠军

登录发表评论 登录 注册

Toder
Toder 于 4 个月前

css和图片文件不能用相对路径

在本地弄的html文件做出来的和在前端工具做出来的不一样https://www.tianmaying.com/snippet/4782/external-preview

phshiai
phshiai 于 4 个月前

在本地弄的html文件做出来的和在前端工具做出来的不一样https://www.tianmaying.com/snippet/4782/external-preview

用前端工具试试,可以分享链接出来:https://preview.tianmaying.com/

<div class="container user-list">

  <div class="text-user">

<div class="row user-list">

<div class="col-sm-6 user">

      <img class="img-circle" src="./bongbong.jpg" width="140" height="140">

      <h2>purus molestie</h2>

      <p>Turpis inceptos, neque vel dolor. Mauris laoreet. Purus et, orci in sollicitudin, acm quam, iaculis lacus.</p>

    <p><a class="btn btn-default" href="#">next &raquo;</a></p>

  </div>

  <div class="col-sm-6 text-user">

      <img class="img-circle" src="./bongbong.jpg" width="140" height="140">

      <h2>purus molestie</h2>

      <p>Turpis inceptos, neque vel dolor. Mauris laoreet. Purus et, orci in sollicitudin, acm quam, iaculis lacus.</p>

    <p><a class="btn btn-default" href="#">next &raquo;</a></p>

  </div>

  <div class="col-sm-4 user">text  txet</div>

  <div class="user">maybe nextday</div>

</div>

  • 代码如上  怎么会出现两个文字不在一行的情况?
  • QQ图片20161016122040.png

@phshiai

@Toder

Toder
Toder 于 4 个月前

用前端工具试试,可以分享链接出来:https://preview.tianmaying.com/

<div class="container user-list">

  <div class="text-user">

<div class="row user-list">

<div class="col-sm-6 user">

      <img class="img-circle" src="./bongbong.jpg" width="140" height="140">

      <h2>purus molestie</h2>

      <p>Turpis inceptos, neque vel dolor. Mauris laoreet. Purus et, orci in sollicitudin, acm quam, iaculis lacus.</p>

    <p><a class="btn btn-default" href="#">next &raquo;</a></p>

  </div>

  <div class="col-sm-6 text-user">

      <img class="img-circle" src="./bongbong.jpg" width="140" height="140">

      <h2>purus molestie</h2>

      <p>Turpis inceptos, neque vel dolor. Mauris laoreet. Purus et, orci in sollicitudin, acm quam, iaculis lacus.</p>

    <p><a class="btn btn-default" href="#">next &raquo;</a></p>

  </div>

  <div class="col-sm-4 user">text  txet</div>

  <div class="user">maybe nextday</div>

</div>

  • 代码如上  怎么会出现两个文字不在一行的情况?
  • QQ图片20161016122040.png

@phshiai

phshiai
phshiai 于 4 个月前

<div class="container user-list">

  <div class="text-user">

<div class="row user-list">

<div class="col-sm-6 user">

      <img class="img-circle" src="./bongbong.jpg" width="140" height="140">

      <h2>purus molestie</h2>

      <p>Turpis inceptos, neque vel dolor. Mauris laoreet. Purus et, orci in sollicitudin, acm quam, iaculis lacus.</p>

    <p><a class="btn btn-default" href="#">next &raquo;</a></p>

  </div>

  <div class="col-sm-6 text-user">

      <img class="img-circle" src="./bongbong.jpg" width="140" height="140">

      <h2>purus molestie</h2>

      <p>Turpis inceptos, neque vel dolor. Mauris laoreet. Purus et, orci in sollicitudin, acm quam, iaculis lacus.</p>

    <p><a class="btn btn-default" href="#">next &raquo;</a></p>

  </div>

  <div class="col-sm-4 user">text  txet</div>

  <div class="user">maybe nextday</div>

</div>

  • 代码如上  怎么会出现两个文字不在一行的情况?
  • QQ图片20161016122040.png
Toder
Toder 于 5 个月前

现在好了。

这个教程里面的图片好像很多都挂了?

@Jonathan

Jonathan
Jonathan 于 5 个月前

教程学完,对于bootstrap的用法有了基本了解。而且有关bootstrap的资料在网上比较零散,在这里终于可以比较系统地入门css和bootstrap了

谢谢天码营

Jonathan
Jonathan 于 5 个月前

这里的页脚部分位置处于页面中间。虽然google能找到解决方法,不过教程里面也可以考虑增加相应内容?

Jonathan
Jonathan 于 5 个月前

这个教程里面的图片好像很多都挂了?

Toder
Toder 于 6 个月前

http://preview.tianmaying.com/,可以在这里把代码保存下来,发出来看看

vrmango
vrmango 于 6 个月前

QQ截图20160812180703.png为什么我的信息栏是在顶部的???

Toder
Toder 于 6 个月前

@vrmango CDN用七牛或者又拍云存图片,自带压缩功能。

vrmango
vrmango 于 6 个月前

请问有相关教程吗,谢谢

图片压缩,或者用CDN

@vrmango

@Toder

Toder
Toder 于 6 个月前

图片压缩,或者用CDN

@vrmango

vrmango
vrmango 于 7 个月前

vrmango
vrmango 于 7 个月前

轮播的图片在网页中加载很慢怎么解决

375889550
375889550 于 7 个月前

列表(liul)中的li 应该改成 ol吧

David
David 于 1 年前

@xwssole 不需要报名,免费就可以学习啊

xwssole
xwssole 于 1 年前

报名连接在哪里? @David 

David
David 于 2 年前

赞哪!thumbsup

4991569
4991569 于 2 年前

哎呀,学完了 真是不好意思呢~

Aimee
Aimee 于 2 年前

第三课~

林高雄
林高雄 于 2 年前

话说..同学们都学到第几课了?

鸭德
鸭德 于 2 年前

嗯嗯,今天学完第三课了.

김정은
김정은 于 2 年前

都说是入门啦,当然是比较简单的内容了 .

鸭德
鸭德 于 2 年前

下学期要学网页了,想提前学习一下,本来以为会有点难度,看完第一课后发现好简单呀,讲的深入浅出, 让人信心倍增,打了鸡血一样,老师辛苦了~!明天继续加油学习第二课.

阿钰
阿钰 于 2 年前

学过HTML5和css 这个bootstrap还没听过额

大白
大白 于 2 年前

无序列表顾名思义,无序列表就是列表结构中的列表项没有先后顺序的列表形式。 有序列表顾名思义,有序列表就是列表结构中的列表项有先后顺序的列表形式,从上到下可以有各种不同的序列编号

怪哉
怪哉 于 2 年前

li, ul有序列表和无序列表有什么区别 ?

咨询老师