via主页css代码,GitHub - 1000VIA/html-css-project

本文详细介绍了一个为期三周的HTML/CSS项目实践过程,包括从创建个人感兴趣的网页到运用响应式布局技巧改进网站,最后探讨如何使用框架优化页面表现。文章强调了实践中的关键步骤和技术要点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML/CSS Project

First step is to fork this repo into your own Github account - if you don't remember how, then refer back Lesson 0 contents.

For Week 1

Create a new webpage on a subject that you're interested in (maybe the same topic you used for your Codepen submission). The page should NOT use any framework like Bootstrap and it should include the following elements:

The .html page and a linked .css file applies a consistent color scheme to links and text on your page.

A page header with a title and description for the site.

An articles section with three articles, each including a title, summary and a link.

A page footer containing info about you or the site.

Proper use of the semantic HTML tags we discussed.

Research the :first-child pseudo-class and use it to style the first article so that it stands out from the others.

Use this website Lorem Ipsum to generate random blocks of contents to fill your website.

Commit often (with good meaningful commit messages), and Push to Github regularly.

Use the sketch below to guide you towards the layout and content you are trying to achieve. Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page.

a67aa025bf8ca464053b3a924d1be21a.png

For Week 2

Revisit the webpage you created in last week's homework assignment. Add a sidebar to your site and move the site description into it. This should appear below the articles on small screens, then switch to a two-column layout with the articles and sidebar sitting side-by-side. Add at least three more articles and then convert them to a grid, so that you show 3 articles per row in a box layout.

Research mobile-first, how would your HTML/CSS have been different if you followed a mobile-first approach?

5940c8af67270a1335f9958c2bd5912f.png

For Week 3

Explore how we name our classes and elements

Create a new Branch called bootstrap-site, and use a framework to implement the same site and compare

(Learn about Branching here - https://guides.github.com/introduction/flow/)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值