Assignment 03: Final Project
.png)
Assignment Brief
Resume from the last assignment, now I have to really create the website using coding method, mainly html and CSS. Please refer back to my assignment 2 blog post to view the website design. But the last assignment only has 4 website pages' design as required. Now, we have to create 5 pages in total. So, I designed another page, which is a blog page for this business. It is rather simple.
.png)
From this website design, I start my journey on coding. I start with something looks simpler to code (in my opinion), which is the My Cart page. Since I need to start everything from scratch, I figure that starting with something smaller will help me develop the skills slowly and get more confident on coding it out. Our lecturer taught us Bootstrap before, so, I use bootstrap to make the website responsive. Besides that, I also use the @media in CSS to make the website responsive.
I start it with quite a rough path even though I already chose a simple page to code. From that moment, I know I am still not skillful enough to do coding. But as times goes by, I slowly picking up the skills bits by bits. In the My Cart page, I started it with developing a menu, I use both bootstrap and @media to make it responsive. At first, it did not fit to the width of the screen and the phone version looks horrible as the menu alone takes up half of the screen. But I learn to use @media in CSS, which helps me a lot, I successfully create menu that is responsive and looks neat. I do the same thing with the footer, but of course, the footer is much simpler than the menu. After creating these two, I already can copy and paste the code to the other 4 pages.
Menu's code （html & CSS）:
.png)
Then, I started to learn on how to create scrollable list of things for the My Cart page, I have watched a few tutorials online to create the function and also ask some questions on ChatGPT when I faced an error. The scrollable thing is not hard to create with the help of bootstrap, but it doesn't look like what I wanted, what I originally designed. So, I spend more time on perfecting it, making it looks similar with my layout. I spent a lot of time on this, as I was still learning and practicing, the final layout is still having some differences with my original design, but it does look a lot neater and nicer looking. Thus, I stop when I feel that it is good enough.
I then proceed to fill in the all the books information and total prices. After finishing the whole pages, I faced another problem, which is the responsiveness. The scrollable is not responsive. This takes me another day to solve it properly but still I weren't managed to solve it through. I only made parts of it responsive while some parts are missing. Still, I think I done my best and I really should start with another page as this My Cart page has taken me too much time. I spend a few days on it. I feel bad that I weren't managed to make it totally responsive, but I need to think about the time too.
My Cart Page Code:
I finish the book details page faster than the My Cart page; this gives me confidence. I then ready to take up the challenge and create the longest and probably the most complicated page in my design, which is the Homepage. The hero section contains a simple welcoming messages and hero image, below it is a carousel which updates the customers with latest new on the business, exp: discounts.
The page followed by 3 lists of books, recommendations, new arrivals and staff picks. These are all have the same coding from the previous book lists. So, it is also not that hard to create these. I face a small problem which is only one of the book lists is able to move only, the other 2 cannot function. I spend some time on finding the error and found out that, I need to recode the parts in the JavaScript for different booklist.
I then create the review section, this part looks very different from my original design, as I already spend too much time again on this page, I want to move to the next page first, and if I have time after finishing all, I will come back to finish these parts off. But obviously, I didn't have the time to fix it, but at least, I try to make it looks neat and nice on its own. I spend a lot of time again fixing the responsive issues on this page.
Homepage Code:
Next, I continue with the Contact page. It is quite easy on this one. It is mostly layout issues, and a single form. I finish it completely; it is responsive too. Then, I finish the assignment up with the final page, the blog page which I design recently. It is also quite easy, it is also mainly layout issues as the blog can't really be viewed and etc. I fix the responsive issues too and finally, I finish my coding.
Contact Page Code:
From this assignment, I know that my coding skills is still needed more practices. I have so much more to learn and through this project, I feel more confident on coding. Even though it is still a very underdeveloped website, but I do it within myself, I feel proud of it. I am so grateful for having our lecturer guiding us through this journey. And also, my friends, who have given me supports and help me to solve some difficulties in this project. I am very thankful. I did learn a lot in this semester, through this course, I am ready to embark on another journey in coding. I will spend more time in practicing my coding skills in semester break, and hopefully, I am going to do better in the next coding challenge.
.png)
.png)
Comments
Post a Comment