INTERACTIVE DESIGN Final Project
GCD 60904 / INTERACTIVE DESIGN
Final Project
LIU CHENG RUI (0370930)
Instructions
I use HTML to build the shelves of web pages. HTML uses tags to define the structure of a web page, such as the header, body content, and footer. Using semantic tags (e.g. header, main, footer) not only makes your code more readable, but also helps with search engine optimization.
2. CSS Beautify the page:
Then I use CSS to beautify the page. This section includes background color, font size, layout, etc. CSS makes the page look neat and beautiful, but also ensures that the display will be consistent across devices.
3. JavaScript for dynamic effects:
To make the page interactive, I used JavaScript. Verify these dynamic effects through button click events and forms to make the web page more vivid and practical.
After the code is written, I preview the page in my browser to check whether the design is up to standard. Every time I find a problem, I will adjust according to the feedback to ensure that the page can be displayed normally in different environments and the user experience is good.
Code issues and challenges
HTML structure is not clear at the beginning of writing HTML, the page structure is messy, and then the implementation of the function is troublesome. I learned the semantic tags of HTML (header, main, footer, etc.) to make web pages more structured and maintenance-friendly. I also looked at online tutorials and documentation and slowly understood common layouts, such as the grid layout and the Flexbox layout.
CSS Style conflicts At the beginning of writing CSS, there are too many rules, styles over each other, page layout problems. I learned the priority rules of CSS and learned that class and id selector priorities are not the same. By checking style sources with developer tools, I was able to effectively locate problems, adjust CSS rules, and avoid style conflicts.
When a JavaScript function fails to add a click event to a button, the code does not execute as expected. I checked the code for spelling errors (such as document.getElementById), used console.log to debug, and quickly found the problem and fixed it in time.
Form verification When submitting a form, it was found that the data entered by the user was not verified, and incorrect data was submitted. I learned JavaScript form events (such as onSubmit), write conditional statements to check the user input format (such as mailbox format), and improve the reliability of the form and the user experience.
Web pages display differently on different devices, and mobile browsers are especially messy. To solve this problem, I learned the media query technique of CSS (@media) to set different styles for different screen sizes. I also did cross-browser testing to make sure the page was compatible with all major browsers.
Learned experience and skills
1.The importance of code planning before writing code, the first detailed planning and design, can help us better understand the functional requirements, to avoid getting lost when writing code. Reasonable structural design not only makes the code easier to read, but also reduces the time for subsequent debugging and modification.
2.Learn to debug with the browser's developer tools (such as Chrome DevTools) to find problems faster. Look at console output, check elements, debug network requests, and more to make debugging more efficient.
3.When you encounter a problem with learning resources, use a variety of learning resources (such as online tutorials, technical forums, and official documents) to quickly find solutions. Especially for unfamiliar technology stacks, these resources can save us a lot of learning time.
4.There are bound to be problems during development, so it's important to stay calm and patient. Every time you encounter a bug, take your time to troubleshoot the problem.
When I was doing web development, I learned that planning and patience are really important. At first, I thought I could get a web page just by being able to write code, but then I found that requirements analysis and planning ahead really helped. Every time I encountered a problem, I relied on debugging tools and patience to find the problem and solve it. Especially when learning CSS layout and JavaScript, I slowly found that the accumulation and practice of every small detail is the key to improving the level of development.
This experience has taught me that code is not just a tool for implementing functions, it is also a process for solving problems. In the process of development, rational use of resources, continuous learning and summing up experience have enabled me to make continuous progress and improve my problem-solving ability. In the future, I hope to write more concise code, learn more advanced technology, accumulate more experience, and further improve my development level.
Feedback:
I learned a lot of things while working on this website. In the beginning, I found it really difficult to design a website that is both simple and versatile, especially in the area of interaction and user experience. The problems I encountered made me understand more about what was going on behind the code, and the details. Through testing and improvement, I learned how important the details are to the user experience. Every time I see the website getting smoother and smoother, I feel a great sense of accomplishment. This project not only allowed me to practice my front-end skills, but also gave me a deeper understanding and enthusiasm for making websites.
Comments
Post a Comment