After I finished the 21 Days of Canva challenge, I spent the past 7 days doing the 7 Days, 7 Websites challenge. Yesterday I finished the 7 Days, 7 Websites challenge. During the past 7 days, I made one-page websites using the code I set up at the end of the Disney Codes Challenge with Node.js and Express.js.
These websites are based on project prompts in the 30 Days, 30 Sites challenge. Although I wasn't doing the Disney challenge, I made these projects Disney-themed. 7 Days, 7 Websites is a coding challenge created by Florin Pop.
The challenge was featured on freeCodeCamp's platform and social media networks on March 27. Participants build a project each day for 7 days using any programming languages and frameworks they want. The goal of this challenge was to help participants improve their coding skills and build the habit of coding more.
Today's post is an official recap of everything that happened during this challenge. This post reflects on what projects I made each day of the challenge. I share what I've learned while building these sites and how I am going to improve these sites in the future as I build more content for each of these websites.
==> Click here to learn more about the 7 Days, 7 Websites challenge!
Day 1: August 18, 2020
The first website I made in the challenge was a charitable organization website. The website is inspired by The Princess Diaries movies. Since this project just wanted a website built in a day, I decided to make my website a simple website to get a sense of how long it would take to build the website and do the styles.
Before I started to code the website, I decided not to make the website mobile responsive to spend more time on getting the website running with Node.js. So I deleted the mobile and tablet CSS files and removed the links to the style sheets from the header file. I spent a lot of time fixing issues with getting my style sheet working and getting the partials working.
First, I forgot the parentheses to wrap about the link for the partial files in the landing file. Then the styles weren't appearing on the site so I double-checked my style sheet and found out that the file was in another folder inside the style sheet folder. So these little issues took time troubleshooting and figuring out what was going on but were easy to solve.
I deleted the css folder my style sheet was in and added the parentheses. Today I only made a one-page website. My goal was to get at least one page done as well as get a sense of the pacing for this project.
In the future, I plan on adding more pages to this site and adding more functionality to the website such as working for or perhaps a login area. I might find a way to add other features to this site such as a way of displaying social media posts and tweets.
Day 2: August 19, 2020
Today I made the day 17 project in the 30 Days, 30 Sites challenge. This project was a clothing/fashion website. I used the Andalasia Fashions brand from Enchanted as inspiration for this site.
I took what I learned from making the charitable organization website yesterday and began applying it to this project. This made things so much easier as I was working on the project and reduced the amount of stress I was facing. The biggest struggle with this project was finding the right colors on the site.
In the movie, the brand uses lots of pastel colors. I tried recreating these colors on the site but these colors often clashed with the white background on the page. I found myself spending a lot of time playing with different colors just to get the text, links, and headline colors just right.
I found myself making as much of the text black as previous websites. The biggest issues with the code came from the Bootstrap classes. I was missing a container class in the search section.
This created a horizontal scroll bar at the bottom of the page. In the future, I might completely redo the site so I can make the login and create account links that work with functional pages.
Day 3: August 20, 2020
Today I made a cruise ship website. This website is the prompt for day 18 in the 30 Days, 30 Sites challenge. I decided to make my version of the Disney Cruise Line website and recreate some of the elements on the site.
The Disney Cruise Line website has a lot of content on its website. Before I started building my website, I took a look at the Disney Cruise Line site to see what content would be recreated, what changes I'd be making, and what wouldn't be used on the site. If I tried to recreate everything, I wouldn't have gotten the website done during the day.
In the end, my website is a much simpler version of the Disney Cruise Line website. A lot of that is due to Bootstrap. I was originally going to try finding a way to use a video in the background like the Disney Cruise Line website, but I decided to stick with the background image instead. I'm glad that I used a background image since I realized the text and button would be hard to read.
I played around with the opacity and colors but I wasn't satisfied with the way the text looked. I ended up just making a box class and giving it a white background over the background image so the text and button could be seen. Although the design, there was a lot of content to be added on the website with lots of sections.
Adding these sections to the HTML took a lot more time than I was expecting. Bootstrap did make things a lot easier by reducing the amount of styling I needed to get done, but I still spent a lot of time just getting all the content on my site. In the future, I wouldn't just add more functionality to the site. I would probably redo certain sections on the site so they matched the Disney Cruise Line site more.
Day 4: August 21, 2020
Today I made a candy website. In the 30 Days, 30 Sites challenge, the prompt for day 19 was to make candy or a new flavor website. The prompt seemed kind of vague so I decided to just make a candy website.
I used the Apollo chocolate bars from the TV show Once Upon a Time as inspiration for this site. The e-mail included a link to the Frito Lays website. I found myself looking at the site for inspiration on how I could make this site.
I cut back on a lot of the code I was using on this site. I picked some of the elements to recreate on the website but I cut back on a lot of the content I was going to put on the site. After spending lots of time getting all the code on the site, I decided to make things even simpler by reducing the number of sections on the page and only putting on the essential elements the site would need.
This resulted in a site that had significantly fewer elements than previous sites I've made in the challenge but it gave me more time for making other things on a site. In the future, I might add more elements and content to the page as I add more pages and functionality to the site. The biggest issue that I ran into was the footer on the site.
The list items weren't centered on the bottom of the page. The text was positioned closer towards the left side of the screen than the center. I tried playing around with the Bootstrap classes, but this didn't move the list of items further toward the center.
I ended up playing around with the padding of the ul and li tags to get the spacing just right. I originally was going to have a second bottom-nav section on the page, but I scrapped that section and just moved the li items into the bottom-nav section as part of the navigation.
Day 5: August 22, 2020
Today I made a blog landing page site. This was the prompt for day 20 in the 30 Days, 30 Sites challenge. I used Tiana's Palace from the movie The Princess and The Frog as the inspiration for this site.
My goal for this project was to create a simple blog landing page. In the past, I've tried making blog pages and they didn't turn out very well. So I wanted to use this project as a way to make a simple blog layout.
This way I can figure out how to get a basic layout I can use in future blog sites I'll be making. The link to the sample site in the 30 Days, 30 Sites email wasn't working. So I used the BritishPandaChick Codes and Shannon Mattern's blog page as inspiration for building this site.
This made it easier to decide what elements I needed and how I needed to structure this site. Bootstrap came in very handy for this project. The grid system helped me get the layout just right and everything set up on the page so it looked similar to my blog site.
I wasn't able to get as much as I wanted to do on this site in comparison to other sites in this challenge. In the future, I will need to redo the page a bit so a blogger can log in and write posts. I also want to replace the code for all the posts on the page and set up the functionality so posts will be published on the blog and show 5 posts at a time. There are some other changes I might make to this site such as deleting the banner section to keep the focus just on the blog posts and sidebar to adding more sections on the sidebar such as an e-mail sign-up to change backgrounds for different sections
Day 6: August 23, 2020
The next project I made was an e-mail newsletter template. This project was the prompt for day 21 in the 30 Days, 30 Sites challenge. I used the colors and fonts from the blog landing page website to make this project inspired by Tiana's Palace from The Princess and the Frog.
I had a hard time making this project since I wasn't sure how to approach the prompt for this challenge. The link to the sample site wasn't working so I found myself googling email newsletter templates to look at examples so I could figure out what to build for this site. I ended up modeling this project through the challenge email I received and some of the examples I saw in my Google search.
Since I wasn't sure how to tackle this project, my goal was to build a very basic e-mail newsletter template I could think of. This project was tougher than the other projects in this challenge since I wasn't sure what other functionality I could add to the site since there are not a lot of users who need to interact when they read a newsletter. In the future, I might try to add some more functionality with how I create a certain template that inserts a user's name into the e-mail or perhaps add some buttons users can click to do a specific action.
I will need to take a look at more newsletters to see how other creators include functionality on their sites to see what I could do to improve mine. This project differs from previous projects since I'm not using a similar format compared to my other projects. Normally I add a navbar with navigation links in the header and the footer has the copyright information.
Today's project didn't need that information so I was able to break out of my comfort zone and try something new with the code on this site. I added Bootstrap to this project, but I didn't use the classes too much. In the future, I will most likely remove Bootstrap from this site completely and just add more CSS to achieve the same effect some of the Bootstrap classes I did add were doing.
Day 7: August 24, 2020
It is the final day of the challenge. Today I made a project for day 22 of the 30 Days, 30 Sites challenge. This prompt was a weight loss product/program website.
I decided to make a weight loss program site inspired by the Disney movie Hercules. This project was so much easier to make than the last couple of projects in this challenge. The prompt included a link to Weight Watchers as an example site to reference.
Weight Watcher's website was a big influence on this project in how I set up layouts and what content I needed to put on the page. I decided to recreate some of the elements on this site but I cut back on a lot of the things on the site to keep with the simple theme for the site. My goal for this project wasn't just to create a simple site.
I wanted to use this project to step outside of my comfort zone. This meant switching up the look of this site a bit more so I wasn't just recreating the same websites I often use in the challenge. I played around with different Bootstrap classes and found ways to fix some of the site issues I was having on previous websites.
Two of these ways were the justify-content-end and justify-content-center classes. These classes got the position of the nav items just right on the page without using lots of CSS to create the same effect on the page. In the future, one of the big changes I want to make to the site is the background image.
The background image made issues with styles on the site. I spent a lot of time playing with headline colors in the banner section just so they could be visible against the background image. I plan on including more functionality on this site in the future. Besides getting the login and sign-up features to work, I want to find a way to get the location feature working and how to build a basic shop for this site.
Conclusion
That's a wrap for the 7 Days, 7 Websites challenge! Although the challenge is done, I plan on revisiting these projects in the future and working on ways to improve these sites as I make more additions to these pages. Are you doing the 7 Days, 7 Website challenge? Share your projects and progress in the comments below.
This post was originally published on August 25, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
Oldest comments (0)