Home > Developer > Web Develop
Job Submission deadline: 04-24
Important NotesBaidu 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 PurposeUnderstand 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 descriptionRefer 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 considerationsOnly 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 ResourcesThe 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 overviewJob Submission deadline: 04-24
Important NotesBaidu 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 PurposeMake a reasonable HTML schema for the design style, including the following but not limited to:
Understand semantics and use HTML tags wisely to build pages
Master the basic CSS coding, including the following but not limited to:
Practice and master CSS colors, fonts, backgrounds, borders, box models, simple layouts and other styles of definition
Task descriptionBased 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 considerationsOnly 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 ResourcesGetting Started with MDN html
MDN CSS Getting Started tutorial
MU Lesson html+css Basic Tutorial Video
Task 3:3 Column Layout Course overviewJob Submission deadline: 04-24
Important NotesBaidu 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 objectivesMastering 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 descriptionUse 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 considerationsTry 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.
ResourcesMdn: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 notesBaidu 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 objectivesPractice Html/css Layout method
Learn more about CSS properties such as position
Task descriptionImplement 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 considerationsConsider 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.
ResourcesHTML 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 notesBaidu 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 PurposeMake 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 descriptionBased 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 considerationsOnly 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 ResourcesGetting 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 notesBaidu 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 PurposeLearn more about the settings for fonts, backgrounds, colors, and more in CSS
Further practice CSS Layout
Task descriptionRefer 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 considerationsOnly 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 ResourcesGetting Started with MDN html
MDN CSS Getting Started tutorial
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 PurposeThrough 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 descriptionDesign 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 considerationsOnly 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 ResourcesGetting Started with MDN html
MDN CSS Getting Started Tutorial task eight: Responsive Grid (rasterized) Layout Important noteBaidu 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 PurposeUsing 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 descriptionNeed 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 considerationsThe 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 ResourcesBootStrap 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 noteBaidu 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 PurposeDeepen the combat capability of HTML,CSS by implementing a more complex page
Reuse and optimization of practice code
Task descriptionDesign 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
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 ResourcesGetting Started with MDN html
MDN CSS Getting Started tutorial
Task 10: Flexbox Layout Exercises Important notesBaidu 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 PurposeLearn how flex is laid out and learn how to adjust the layout strategy based on the screen width.
Task descriptionThe 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 considerationsOnly 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
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
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 PurposeHTML 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 descriptionImplement a mobile-side web page that is consistent with the design (click to view)
Task considerationsThis 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 ResourcesBaidu 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 PurposeLearn what the new features of CSS 3 are, and choose some of them for a practical little exercise
Task descriptionSome examples of implementing the example diagram (click to view)
Task considerationsThis 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
The front-end Technical College of Baidu--Xiao Wei College (html+css Course Task)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
