For the first project of NMIX 6110, I decided to do a mini website about Puerto Rico. Since I am Puerto Rican, I wanted to share some information about a couple popular destinations on the island. The last time I visited the island was in 2016 with my family, and I took many photos to commemorate the trip. I wanted to use those photos throughout the website as visual aids for the text.
When I first started putting together the website, I got a little carried away with thinking about the design of the website instead the content. I went straight to fonts.google.com in search of good font combinations and also went to the site coolors.co to look through different color combinations to gain inspiration for the color palette for the site. Since I was trying to perfect the design of the site from the beginning, I would go back and forth with adding content to the html pages to style elements instead of just focusing on the content and then doing the style afterwards. Although this didn’t cause me major problems, it did add some time when creating the website. After viewing the “Web Design in 4 minutes” tutorial, I learned the steps I should be taking when designing a website. I implemented that while finishing my website and will continue to think about the steps in the following projects and websites I create.
As I was adding the style elements to my site, I would reference the freeCodeCamp lessons to refresh my memory on how to add style elements such as centering items and styling text. There were a few things that I wanted to add to my website that freeCodeCamp did not go over yet—like adding images next to each other and creating an image gallery. If I could not figure out how to do something or what I was trying was not working, I would use www.w3schools.com to help me figure out what I wanted to do. One issue I did have was when I tried placing the two images on my homepage, I could not center them even after trying multiple centering strategies. However, with the help of Mr. Weatherford I was able to figure out the issue I was having.
Creating this website has helped me genuinely understand how HTML and CSS works. While going through freeCodeCamp, I would complete the assignments but didn’t fully understand why some things were done the way they were. However, this project helped me learn and understand HTML and CSS at a deeper level. Some of the things I am proud of on the site include the little details like the shadow effect on the “Puerto Rico” text at the top of the site and the hover elements on the images on the home page. I am excited to learn more about web design throughout this class by learning more about Bootstrap, WordPress, and JavaScript.