40181252 Top Gun - Critical Reflection

Critical Reflection
This critical reflection is going to be about 1. how well or wrong things went, 2. new things I have learned or improved, 3. how I would do certain parts differently, 4. what difficulties I had and how I overcame it, 5. Any external scripts, 6. Technologies used.
Approach and project plan
Firstly, I looked at the requirements I have set up in the planning stage and these are aims of the web site, colours, fonts, layout of elements.
With my existing knowledge I tried to build the web site, and when I stuck I used the Internet to find for the answers. So, I learned as I went through the stages of the project. The webpages’ scalability have been tested multiple times during the implementation.
New things I have learned or improved.
I have already known a bit about Twitter Bootstrap, but this time I think I managed to get a deeper knowledge, as I have been exploring the depths of the responsiveness of the web site. In other words, I have full control over a web site which was developed by using Bootstrap 3 framework. Furthermore, I even managed to customize the scalability of the web site by using media queries in CSS. I also found something useful during my research that goes beyond the Bootstrap’s ‘xs’ tag. It is a stylesheet which has been created in order to display the web site in smaller screen sizes.
Changing the colour of the placeholder is another new thing. Luckily I managed to find a source on the Internet that showed me how to do this. This placeholder appears on boxes where users types texts. It shows what user needs to enter into the small boxes to improve accessibility.
Bootstrap carousel slideshow enabled me to use a full width sized gallery, which looks great on different platforms.
I have tried experimenting to use a toggle button that changes to show or hide and it displays or hides a particular paragraph. I have tried to look at on different web sites, for example, W3C, but I did not manage to find the information what I need. Luckily, I found this web site that has a great script to do the thing what I wanted.
Difficulties I have face with and how I overcame them.
Initially, I had tried to implement the responsibility of the web site by using my own media queries. However, changing the top menu bar into ‘hamburger’ menu was hindrance, and when I reduced the size of the browser window the responsibility was not as smooth as a Bootstrap’s one. I still insisted using my own media queries but I had to realize that I will run out of time, so I used Bootstrap 3 and my own media queries.
Some functions I was not able to do by my own are the show and hide of a paragraph, changing the colour of the placeholder text. I overcame them by using external scripts.
Things I have changed in order to improve the web site.
Instead of using rounded rectangles I used normal shaped rectangles. This is the new trend.
I added a button which takes users back to the top of the page when they scroll down. It is easier to navigate between the webpages as the navigation bar can be found on the top of the pages. In order to make the look of the web site modern, I used CSS transitions on body content buttons. Some links needed to be made as buttons, because the links on the mock-up were not readable.
How did your development progress, what would you do differently?
In my opinion the development progress was fairly good. I finished the web site before the target deadline and I also had time to use new features to improve the web site’s look and overall performance.
I should have spent more time on research on the latest trend. I had some initial research on trends but I feel like I should have done a bit more.
Building the website’s responsiveness by scratch would have been another beneficial point. Although, as I mentioned I could not afford to waste more time on that. Later on, I also found out how to make a ‘hamburger menu’ by scratch, but in order to use I should have re-structured the whole header of the web site and make changes accordingly in the CSS.
=== Any errors?! ===
I had a few errors when I was building the web site.
a. Div tags, I had find out why some elements did not properly. Most times I found that some div tags were not closed at all.
How I fixed it? - I put a ‘</div>’ at the end of the div.
b. Some rows in my html did not have the same width sizes. It should have been the same. After using inspect element on my browser I realized that the bootstrap had a margin: -15px for some odd reason.
How I fixed it? - I changed the row class to margin: 0;

Main Menu

See Also

Main Menu