Here, I will get into how the concepts and techniques that we learnt in class helped us create our final website. I will also include a few concepts I wish we could've gone into more detail about.
- Basics: Learning the basics of coding before I came to sit for classes really helped me understand what was going on, and move faster through the course. Freecodecamp was a very helpful link in this respect. I think of it through this analogy: learning through freecodecamp taught me the basic spellings and grammar of coding so I could form complete sentences and paragraphs within class time, as well as in our final project.
- Borrowing: It was a relief to know that we did not have to code everything in our final website, and could borrow elements from other websites, codepen.io and getbootstrap.com. However, when coding my CIA project and the final website, I quickly learnt that just copying and pasting the borrowed code into VSCode was not enough. We had to look at the wireframes that we had decided on, and figure out how to tweak the borrowed code so that it fits it.
One example where we did this was in the side scroll of the home page of our final website. Initially, when we had first plugged the code for the side scroll into the website, it was looking very plain. We fixed this by adding animations to each div on the scroll via CSS so that it would create more interest in the viewer and they would also know that each div was clickable.
- Inspect Element: This helped a ton with troubleshooting both the CIA webpage and the final website. It made finding the mistakes in the code much faster as we simply had to right click on the elements that weren’t working and inspect them in order to find the mistake in the code, rather than try everything possible on the code at random. Another thing this helped with was margins and padding. In our about us page of the final project, we were having issues as we weren’t able to tell which margin belonged to which element. When we inspected the elements however, it was easy to tell thanks to the colour coding of the chrome inspect element option.
- Using Bootstrap wherever possible: Bootstrap really helped us cut down on the code that we had to use for our websites. One instance where I realised it was that at one point during the final project, we had borrowed some elements from a source that was not using bootstrap, and had just used pure CSS, HTML and JavaScript. The code for these elements was very long, so when the webpage did not work properly it took us a very long time to figure out what was happening and why, because we had to go through each line of the CSS and experiment with it in order to try and fix the problem. But when an element created through bootstrap broke, it was easier to fix as we either simply had less code to go through, or could add additional CSS to force it to fix itself because the computer read our CSS after the bootstrap CSS.
- The Folder System: After we had finished making the website, we had to link all the pages together. I had done this on my computer, using the file path that you can just copy paste from the file explorer navigation bar. Of course, when I sent the website folder with these links to my teammates, it didn’t work on their computers. The class on ‘root’ and where the root of the website lies helped me troubleshoot and figure out the problem – the root of my computer could not be the root of the website as the website has to be a package that works when anyone downloads it into their computer.
There are a few things I wish we had covered in more detail. Firstly, I think we could’ve made our website a lot more interesting by adding a functioning search engine to it. Talking about dynamic sites more in class might have helped us with this. I also wish we could’ve talked more about CMS sites and wordpress.org, and how to use them. Another small thing that I wish we had talked about is how to link files. While we did manage to solve our linking problems, I didn’t know that the way to link to a file in a parent folder was “../” and not simply writing the file path starting from the main directory. Maybe this is a failing of my common sense, but I do think that if we had covered it in class it would’ve saved me a lot of time panicking.