The front-end Technical College of Baidu--Xiao Wei College (html+css Course Task)

Source: Internet
Author: User
Tags border color

Task 1:0 Basic HTML Coding Course Overview

Job Submission deadline: 04-24

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Understand the definition, concept, and history of HTML

Mastering the meaning and usage of common HTML tags

Ability to properly plan HTML document structures based on design drafts

Understand semantics and use HTML tags wisely to build pages

Task description

Refer to the example diagram (click to view) to complete an HTML page code writing (do not write CSS, do not need to focus on the style, only focus on the structure of the document)

Task considerations

Only need to complete the HTML code writing, do not need to write CSS

The example diagram is for reference only and does not need to be fully consistent, and the pictures and copy can be set by itself

Try more HTML tags as much as you can

Online learning Resources

The popular explanation of web-related nouns

Getting Started with MDN html

MU Lesson html+css Basic Tutorial Video

Task 2:0 basic HTML and CSS Coding (i) Course overview

Job Submission deadline: 04-24

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Make a reasonable HTML schema for the design style, including the following but not limited to:

    • Mastering the meaning and usage of common HTML tags
      Ability to properly plan HTML document structures based on design drafts

Understand semantics and use HTML tags wisely to build pages

Master the basic CSS coding, including the following but not limited to:

    • Understand the definition, concept, and development history of CSS
      Mastering the meaning and usage of CSS selectors

Practice and master CSS colors, fonts, backgrounds, borders, box models, simple layouts and other styles of definition

Task description

Based on the first task "0 basic HTML Encoding" code, refer to the example diagram (click to view), the code based on step one to add CSS style code to write

Task considerations

Only need to complete HTML,CSS code writing, do not need to write JavaScript

The example diagram is for reference only and does not need to be fully consistent, and the pictures and copy can be set by itself

Try as many different and more style settings as possible to practice various CSS properties

HTML and CSS code structure clear, specification

Online learning Resources

Getting Started with MDN html

MDN CSS Getting Started tutorial

MU Lesson html+css Basic Tutorial Video

Task 3:3 Column Layout Course overview

Job Submission deadline: 04-24

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission objectives

Mastering the concept of html/css layout

Mastering the concept of box model

Mastering the concept of position and float and its use in layout

Task description

Use HTML and CSS to follow the example diagram (click to view) for a three-column layout.

The left and right column widths are fixed, the middle column is filled with the width of the parent element, and the outermost box should be interpreted as a browser. The height of the background color for the #eee area depends on the highest height of the three child elements.

Task considerations

Try the effects of position and float and think about their similarities and differences and their application scenarios.

Pay attention to testing different situations, especially in extreme situations.

Picture and text content should be replaced by yourself, as much as possible to reflect the team's characteristics.

The effect of adjusting the width of the browser, fixed width, and adaptive width always fits your expectations.

Changes the content length of the middle column to ensure that the height of the parent element is always the highest height in the child element when the middle column is higher and the right column is higher.

The identifiers given in the other are implemented correctly.

Resources

Mdn:position: Learn the basics of CSS position properties

Mdn:float: Learn the basics of CSS float properties

Learn CSS positioning in Ten Steps: Familiarize yourself with the position properties with specific examples

Clear float (clearfix hack): Clear float is what, how to simply clear floating

Stackoverflow:which method of ' Clearfix ' is the best?: Clear Floating Black technology complete interpretation

Task four: Positioning and centering issues important notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission objectives

Practice Html/css Layout method

Learn more about CSS properties such as position

Task description

Implement the effect as an example diagram (click to open)

Gray elements are vertically centered horizontally, with two one-fourth circles in their upper-left and lower-right corners.

Task considerations

Consider a solution that is vertically centered horizontally in different situations (such as gray heights based on dynamic changes in content).

Try a combination of cases, the parent element and the child element take different position values respectively. Consider the true meaning of the various values of the position attribute, especially the absolute is relative to whom.

Pay attention to testing different situations, especially in extreme situations.

Adjusts the width of the browser, and the gray element is always centered horizontally.

Adjusts the browser height, and the gray element is always centered vertically.

Adjusts the browser height and width, and the yellow sector is always positioned accurately.

The logos given in the other are correctly implemented and one point is deducted from the wrong one.

Resources

HTML and CSS Advanced Guide two--positioning in detail: The Desert teacher to teach you, this time thoroughly understand the positioning problem

Centering in Css:a completeness guide: A complete discussion of the centering scheme in different situations, suggesting that you think about it and then look at the answer

Get HTML & CSS Tips in Your Inbox: Someone wrote a cheat tool to generate the center code, but look at the code do you understand why?

Task 5:0 basic HTML and CSS Coding (ii) Important notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Make a reasonable HTML schema for the design style, including the following but not limited to:

    • Mastering the meaning and usage of common HTML tags
      Ability to properly plan HTML document structures based on design drafts
      Understand semantics and use HTML tags wisely to build pages
      Master the basic CSS coding, including the following but not limited to:

    • Understand the definition, concept, and development history of CSS
      Mastering the meaning and usage of CSS selectors

Practice and master CSS colors, fonts, backgrounds, borders, box models, simple layouts and other styles of definition

Task description

Based on the first task "0 basic HTML Encoding" code, refer to the example diagram (click to view), the code based on step one to add CSS style code to write

The black area of the head and bottom is always 100% wide

The right part of the page is fixed width, and the left side remains in sync with the browser window changes adaptive changes

The content width of the left side of each module follows the overall width of the left synchronized adaptive change

10 images need to be fully displayed forever, so as the width narrows, from two lines to three lines or more, it is possible to widen with width and become a line

Task considerations

Only need to complete HTML,CSS code writing, do not need to write JavaScript

The example diagram is for reference only and does not need to be fully consistent, and the pictures and copy can be set by itself

Try as many different and more style settings as possible to practice various CSS properties

HTML and CSS code structure clear, specification

Online learning Resources

Getting Started with MDN html

MDN CSS Getting Started tutorial

MU Lesson html+css Basic Tutorial Video

Task six: Simulate newspaper typesetting with HTML and CSS important notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Learn more about the settings for fonts, backgrounds, colors, and more in CSS

Further practice CSS Layout

Task description

Refer to the PDS design (click to download), to achieve page development, the requirements of the implementation of the results and samples (click to view) basically consistent

Each font size, internal and external margins, etc. can be seen in the callout map (click to view)

Page width fixed (constant width)

Task considerations

Only need to complete HTML,CSS code writing, do not need to write JavaScript

The picture and copy can be set by oneself in the design draft.

Perfect for labeling in chrome

Students with ability to try cross-browser compatibility

The ability of students can be realized after the implementation of less, sass or stylus and so on to achieve again

Online learning Resources

Getting Started with MDN html
MDN CSS Getting Started tutorial

Task Seven: Implement the common Technical Product website page structure and style layout important instructions

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Through the implementation of a common technical product website, deepen the practical ability for HTML,CSS

Learn how to achieve a precise transition from design to page without labeling

Task description

Design artwork design by HTML and CSS psd file (click to download), effect such as (click to open)

The design draft is a certain width, this width is the minimum width of the page, that is, when the browser window width is smaller than the design width, allow horizontal scroll bar, page content width remains the same, but when the browser window width is larger than the design width, the width of the page content should be consistent with the browser window width, Specifically which parts of the topic do not specify, to see how people judge.

Task considerations

Only need to complete HTML,CSS code writing, do not need to write JavaScript

The picture and copy can be set by oneself in the design draft.

The perfect design for all fonts, layouts, internal and external margins, and more in chrome

Students with ability to try cross-browser compatibility

The ability of students can be realized after the implementation of less, sass or stylus and so on to achieve again

Online learning Resources

Getting Started with MDN html

MDN CSS Getting Started Tutorial task eight: Responsive Grid (rasterized) Layout Important note

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Using HTML and CSS to implement a BootStrap-like response 12-column grid layout, depending on the width of the screen, the number of columns in the element is different.

Task description

Need to implement as shown, adjust the browser width to view responsive effects, in which the red text is a description and does not need to be written in HTML.

Task considerations

The grid layout is designed to more effectively control the size of elements in a Web page. For example, the blog has a message board module, on the larger screen, we want it to occupy the width of the right 25%, on the phone and other relatively small screen, we want it to occupy 100% of the width, appear in the blog post. Grid layout is a way to achieve this demand, the advantage is that all the width is divided into fixed number of columns (commonly used 12 columns), thus more efficient control element width. And this functionality, we use HTML and CSS can be implemented.

In the case of the BootStrap grid system, the DOM element class name is col-md-4, where Col is the abbreviation for column, and MD is the abbreviation for medium, which is suitable for scenes with a screen width greater than 768px; 4 is the meaning of four columns. Therefore, col-md-4 means that the element occupies four columns when the screen width is greater than 768px.

Online learning Resources

BootStrap Official website: If you don't use it, at least know what it does.

Bootstrap Grid Examples: Change the browser width to see the performance of different class name elements and understand the role of the grid system. Then, look at the corresponding CSS through the "review element" and think about how this system is implemented

BootStrap grid system with offset

Creating Your Own CSS Grid System: You can first think about how to achieve, without the idea of looking at other people's practices

Task nine: Using HTML/CSS to implement a complex page important note

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Deepen the combat capability of HTML,CSS by implementing a more complex page

Reuse and optimization of practice code

Task description

Design artwork design by HTML and CSS psd file (click to download), effect such as (click to open)
The entire page content is fixed, but the blue navigation and browser width of the head remain the same

Task considerations

Only need to complete HTML,CSS code writing, do not need to write JavaScript

tab only needs to implement the style, the ability of the students can try to achieve without using JavaScript, the implementation of the TAB switch

All drop-down menus (select) are required to be implemented according to the design style, the dropdown style is customized, the drop-down selection is not required, but the style is implemented

The perfect design in chrome, except for the text of the picture, font, color, layout, internal and external margins and other styles

Students with ability to try cross-browser compatibility

The ability of students can be realized after the implementation of less, sass or stylus and so on to achieve again

Online learning Resources

Getting Started with MDN html

MDN CSS Getting Started tutorial

Task 10: Flexbox Layout Exercises Important notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Learn how flex is laid out and learn how to adjust the layout strategy based on the screen width.

Task description

The effect you need to implement is as shown in (click to open) to adjust the browser width to see the responsive effect, and the red text is a description and does not need to be written in HTML.

Task considerations

Only need to complete HTML,CSS code writing, do not need to write JavaScript
When the screen width is less than 640px, adjust the properties of the Flexbox to move the fourth element to the front, rather than changing the border color and height of the first element.
Think about the similarities and differences between Flexbox layout and grid layout, and what scenarios are appropriate for each. You can search for other people's conclusions, but keep a speculative attitude and not accept others ' opinions directly.
HTML and CSS code structure clear, specification

Online learning Resources

Flexbox Explanation: Understanding the meaning of the Flexbox attribute
Plot CSS3 Flexbox Properties: After reading these two articles, the understanding of Flexbox is enough, more practice, understanding will be more profound
flexbox--Quick Layout Artifact
Using CSS Flex Boxes
MDN Flex Properties

Task 11: Mobile Web Page Layout Practice Important notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

HTML and CSS practices for mobile development

Mastering the methods and differences of mobile web development in page architecture and layout

Learn how to debug a mobile Web development page

Task description

Implement a mobile-side web page that is consistent with the design (click to view)

Task considerations

This task involves only HTML and CSS

Implemented pages and designs are basically consistent across iOS safari,,android browsers

HTML and CSS code structure clear, specification

Try the flex layout in CSS 3 where it fits

The ability of students can be realized after the implementation of less, sass or stylus and so on to achieve again

Online learning Resources
    • MDN: Mobile Web Development
    • MDN: Controlling layouts in mobile browsers using viewport META tags
    • What is the difference between mobile front-end development and WEB front-end development?
    • Alloyteam Mobile Development Specification Overview
    • 20 key points to note for mobile/mobile front-end development
    • W3cplus Responsive Technical Resources
    • Talking about mobile Web development
    • Alloyteam Mars
    • Getting Started with mobile web development
    • Mobile Development Resource Collection
    • The Mobile WEB Handbook
    • MobileWeb Adaptation Summary
    • Mobile front end has to understand the HTML5 head header tag
Task 12: Learn the new features of CSS 3 important notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

Learn what the new features of CSS 3 are, and choose some of them for a practical little exercise

Task description

Some examples of implementing the example diagram (click to view)

Task considerations

This task involves only HTML and CSS
HTML and CSS code structure clear, specification
Try as many other new features of CSS 3 as possible in addition to the 3 small tasks in the task

Online learning Resources
    • "Graphic CSS3"
    • W3school CSS3 Tutorials
    • MDN CSS 3

The front-end Technical College of Baidu--Xiao Wei College (html+css Course Task)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.