1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < title > Computational thinking</ title >
8+ < link rel ="stylesheet " href ="css/reflection.css ">
9+ </ head >
10+
11+ < body >
12+ < header >
13+ < div class ="header ">
14+ < div class ="title ">
15+ < h2 > Computational Thinking</ h2 >
16+ </ div >
17+ < nav class ="navli ">
18+ < ul >
19+ < li > < a href ="index.html "> Guide</ a > </ li >
20+ < li > < a href ="famous-people.html "> Celebrity</ a > </ li >
21+ < li > < a href ="Reflect-thinking.html "> Reflection</ a > </ li >
22+ </ ul >
23+ </ nav >
24+ </ div >
25+ </ header >
26+
27+
28+ < main >
29+ < section class ="section1 ">
30+ < div class ="bigbox1 ">
31+ < div class ="standard box1 ">
32+ < div class ="box1-1 ">
33+ < h1 > Reflection on Learning</ h1 >
34+ < br > < br >
35+ < p >
36+ Reflective writing is a type of writing with a personal nature. It expresses personal feelings, insights
37+ and lessons
38+ learned by thinking deeply and reviewing particular experiences or events.
39+ </ p >
40+ </ div >
41+ < div class ="box1-2 ">
42+ < img src ="images/reflection.png " alt ="" width =300px >
43+ </ div >
44+ </ div >
45+ </ div >
46+ </ section >
47+
48+ < section class ="section2 ">
49+ < div class ="bigbox2 ">
50+ < div class ="standard box2 clearfix ">
51+ < div class ="box2-1 ">
52+ < article >
53+ < h2 > Introduction</ h2 >
54+ < p >
55+ During the course of this module. Firstly I learned the methodology of computational thinking, then I
56+ learned basic
57+ JavaScript programming, and I also learned how to fulfill content and layout web pages using HTML and
58+ CSS. Through this
59+ knowledge, I completed a group assignment and an individual assignment.
60+ </ p >
61+ </ article >
62+ < article >
63+ < h2 > Learn from group task</ h2 >
64+ < p >
65+ For our group assignment, we were asked to work together to create a website. I had several meetings
66+ with my group
67+ members. < br > < br > < b style ="color:#797ef9 ; "> Firstly,</ b > we used the methodology of computational
68+ thinking to decompose a complex
69+ problem into
70+ multiple simple
71+ sub-problems, namely, to decompose the whole website into three parts: head, body, and footer. Each two
72+ people would
73+ complete one of the parts. < br > < br > < b style ="color:#797ef9 ; "> Secondly,</ b > we abstract the emphasis of
74+ the whole project, namely, lay out the
75+ page first, and
76+ then fill the text content. < br > < br > < b style ="color:#797ef9 ; "> Third</ b > is pattern recognition. In this
77+ project, there are many duplicated
78+ areas that can use
79+ the same layout. < br > < br > < b style ="color:#797ef9 ; "> Finally</ b > we used some basic algorithms to
80+ categorize the content of each box and then
81+ layout it on
82+ different boards.
83+ < br > < br > Throughout the process, we encountered a lot of difficulties, the most difficult part was the
84+ CSS
85+ layout, due to the
86+ lack of web layout experience, we studied some tutorials on YouTube and mimicked some GitHub projects,
87+ and finally
88+ learned and used Flexbox and float layout methods. During the classroom demonstration, our product was
89+ displayed
90+ successfully, but there was still a shortage, which was that when the page was zoomed in or zoomed out,
91+ the whole layout
92+ would be incorrectly organized.
93+ </ p >
94+ </ article >
95+ </ div >
96+ < div class ="box2-2 ">
97+ < article >
98+ < h2 > Learn from individual task</ h2 >
99+ < p >
100+ As I did more studying, I completed the individual task, which was the three web pages now shown. I
101+ still analyzed the
102+ project solution using a similar computational thinking methodology as in the group task. However,
103+ unlike the group
104+ task, I was required to create the head, body and footer of the web pages by myself and there was a more
105+ demanding
106+ requirement for the Text content in the HTML. Two of the difficult parts are as follows: < br > < br > < b
107+ style ="color:#797ef9 ; "> 1.CSS:</ b > I used
108+ flexbox and float
109+ for layout, and adjusted the distance between each box by using margin and padding, and finally
110+ decorated it with
111+ background image, text color and border color. < br > < br > < b style ="color:#797ef9 ; "> 2.HTML:</ b > text
112+ content.
113+ In the first part, I fully
114+ investigated the role of
115+ computational thinking, and I realized that this methodology is based on the power of computer chips.
116+ Whereas the
117+ traditional solution can only be calculated by the human brain, due to the lack of computing power,
118+ resulting in only a
119+ small number of iterations to solve the problem. And it can only solve problems with low complexity and
120+ cannot solve
121+ NP-hard problems. So computers allow us to use a brand new methodology of computational thinking. The
122+ second part
123+ introduced celebrity, I fully researched Tim Berners Lee and learned that the World Wide Web has changed
124+ the way of
125+ sharing and acquiring knowledge. The third part is the content of this page.
126+ </ p >
127+ </ article >
128+ < article >
129+ < h2 > Conclusion</ h2 >
130+ < p >
131+ After completing this module, I was impressed with the disadvantages and advantages of teamwork and
132+ individual tasks.
133+ Great teamwork reduces the workload significantly, but at the same time, the allocation of tasks also
134+ costs time and
135+ energy. Individual task requires more work, but it makes me learn more CSS, HTML knowledge and improves
136+ my self-learning
137+ ability. And after learning the computational thinking, I realized that this methodology can combine
138+ computers with
139+ different majors to solve the problems of different areas, which greatly improves the efficiency.
140+ </ p >
141+ </ article >
142+ </ div >
143+ </ div >
144+ </ div >
145+ </ section >
146+
147+ </ main >
148+
149+ </ div >
150+ </ div >
151+ </ div >
152+ </ footer >
153+ </ body >
154+
155+ </ html >
0 commit comments