Sarah DyeIt is the last day of the 100 Days of Code challenge. It also marks the last 10-day recap post for the 100 Days of Code series. Today's post is reflecting on the last 10 days of the 100 Days of Code challenge.
I describe my experiences making projects during these ten days and what projects I've been working on. During these 10 days, I made a game based on the Simon game. I finished the Star Wars movie trailer website for 30 Days, 30 sites.
I started working on two new projects for the 30 Days, 30 Sites challenge. The first is a celebrity fan page based on actor Tom Hiddleston. The other website was a children's toy website I made during the first round of 100 Days of Code. This website is based on the American Girl dolls.
Day 91: August 30, 2019
I finished the mobile style sheet. I did try using the freeCodeCamp grid for the mobile site, but I decided to just not to use it on the mobile style sheet since it would be easier for a user to scroll down the site to look at the images. Although I did most of the work with the CSS, I added more headlines and Bootstrap classes in the HTML so there would be less CSS to add.
The rest of the session was working on the tablet-style sheet. The biggest struggle was trying to find the right Bootstrap classes to use for the summary section. Right now I'm using col-12 but tomorrow I'd like to play around with Bootstrap classes to see if I can find a better one.
The last 30 minutes were spent updating some of the legacy freeCodeCamp projects. I rearranged some of the HTML & CSS files for different projects including updating links for jQuery and Bootstrap. The projects I did updates for today are the local weather project, Tic Tac Toe, and the Twitch TV API website.
I wasn't sure what project today so I focused on updating projects I've already done to see what projects I could tackle within the last few days of the challenge. Tomorrow I'm going to try building a Simon game, one of the freeCodeCamp projects I didn't start from the legacy collection.
Day 92: August 31, 2019
The first 30 minutes were spent setting up the Simon game code files. I managed to get the HTML done for the website. I was able to get a head start on some of the CSS.
So far I was able to add styles to the body of the game and start adding smaller details to different elements of the game such as the switches, the count, and the turn windows. Tomorrow I am going to wrap up the CSS so I can start working on the JS code. The last 30 minutes were spent working on the movie trailer website.
I got a lot accomplished today. All the styles are added to the tablet.css style sheet. I added a lot more Bootstrap classes to the index file.
Many of these additions were div tags with the row class so the elements in different sections would be inline on medium and large screens. Tomorrow I will be trying to fix the image gallery on the large screen website. There are a lot of white spaces between certain images so I want to see if I can reduce the white space gaps around the images.
I'll see if I can finish the movie trailer tomorrow. If I do, I'll start setting up another project from the 30 Days, 30 Sites challenge for the last few days of the challenge.
Day 93: September 1, 2019
The first 30 minutes were spent working on the Simon game. I managed to get the HTML and CSS completely ready to go so I can start with JavaScript tomorrow. I used the starter code Free Code Camp provided to double-check my code.
I updated some of the span tags in the middle circle of the game to div tags. This helped some of the CSS styles and made it so the elements weren't floating outside of the game. I'm not 100% happy with the text for the switches.
They don't seem aligned with the buttons. Once all the JS is done, I'll see if I can fix the text and make more CSS changes. Tomorrow I'll be starting to add JavaScript to the game.
The last 30 minutes were spent putting the finishing touches on the movie trailer website. I didn't work too much on the HTML except to rearrange the images for the image gallery. I fixed the issues I had with the white space around the images though.
It turns out I was using the wrong CSS selectors for some of the images and set too many grid-column-start for some of the images. Once the movie trailer website was finished, I began setting up the next 30 Days, 30 Sites project. I set up the code files and began working on the HTML.
So far I finished the footer and got a head start on the header section. Tomorrow I'd like to finish the header section and get started putting sections on the page. I'm not sure how to approach the design for this website yet so I'll need to start thinking of what colors and fonts to use.
Day 94: September 2, 2019
The first 30 minutes were spent getting the JavaScript started for the Simon game. Most of this time was spent getting all the variables written down as well as writing comments down as I moved through the code. The rest of the time was setting up the eventListeners for the game buttons.
I did create the play function and got a head start on the gameTurn function. After struggling with the ES6 notation for the JS Calculator, I'm trying to use this project to get more practice with ES6. The video I'm using to help me build the game has a lot of great tips for working with ES6.
That is making it much easier to understand what the notation means and how to best use it in my code. The last 30 minutes were spent working on the HTML for the celebrity fan page website. I finished the Header HTML and began adding the sections.
I wasn't sure what to put as the sections on the website so I looked at one of my favorite fan page websites for inspiration. So far I've added sections for the greeting, latest news, betrayal, and upcoming. Tomorrow I'll add the last section for Avengers and see if there are any more sections to add to the site. There is a lot of text on the website so I'll see if I can either add more pictures or video to the website so there isn't so much text on the page.
Day 95: September 3, 2019
The first 30 minutes were finishing up the functions I started yesterday. The rest of the session was spent adding new functions for the color buttons. Right now the game buttons do work on the game and will clear.
However, the game isn't completely done. Right now I'm working on the check function which will check to see if the player wins the game. So far I've got two if statements written for the function.
Tomorrow I'll finish the 3rd if statement and create more functions for winning the game and getting the colors to flash when the button is clicked. The last 30 minutes were spent redoing the HTML code for the celebrity fan page. After looking over the code, I decided to redo some of the sections of the site.
I updated the header navigation with more links. However most of the time was spent deleting tags I added yesterday, updating id names, and adding new tags to sections. I cut back a lot from what I had originally to make things as simple as I could be.
I finally decided on what fonts and colors to use for the site. I added the Google Fonts link and have the color palette saved to the top of my style sheet so I can start working on the CSS tomorrow. If I need to add or fix any HTML, I'll do it as I work on each style sheet.
Day 96: September 4, 2019
I finished the Simon game. I added the last two functions for the flashing colors and winning the game. I also finished the rest of the check function's if statements.
Once all the code was finished I did some testing to make sure everything on the game working correctly and was similar to what was in the YouTube video. The last thing I did was update the CSS code. I wasn't happy with the sounds I chose for the game so I just used the audio links in the starter code.
In the CSS, I fixed the middle circle buttons. I originally wanted to change the start button but the changes I did make caused the strict button to move underneath the power button so I decided to just keep it the way it is. With the remaining time I had left, I set up the Pomodoro clock project although I won't be making this project within the last few days of the challenge.
I'll think of a second project to do tomorrow. Today I started the CSS for the mobile version of the celebrity fan page. Although I spent time adding CSS styles, I did spend some time in the HTML file adding the social media icons to the website.
I decided to bring back the navbar I used for the product site so I set up a JS file for the code and added classes to use for the JavaScript. Once I added the JS code and the CSS styles, I did some checks to see how everything looked in the browser. It initially didn't work since I misspelled some of the properties and I was using text-align on the header h1 tag.
Once I made these changes, everything started to work just fine. The previewer was giving me more trouble again with the header. However, I fixed the issue by setting the width for the full-width class to 100%. I'll check the previewer again tomorrow before I start coding to see if the previewer shows any more problems.
Day 97: September 5, 2019
The first 30 minutes were spent setting up a brand-new project. Although this is a new project, most of the code is doing updates on the code I'm already using on the website. This made it easier to update the HTML than previous projects in the challenge.
Most of the updates were additions including links to new style sheets, font awesome icons, and new Bootstrap classes for the header navigation. I did get a head start on the mobile style sheet and getting the header working on the site. Right now I'm trying to find the best way to show the header navigation so one of the links isn't underneath the home link.
The last 30 minutes were spent battling the Dev Tools previewer and working on CSS for the celebrity fan page website. The previewer was still giving me trouble over what my site did look like on an iPhone. Eventually, it sorted itself out once I exited Chrome and opened the index file in my browser.
Once the previewer was back on track, I started working on the rest of the mobile styles. The border sections are still cutting off on the previewer so I'll see if I can fix this section tomorrow so it looks like it fits on the screen. I will add more CSS to the upcoming section and see if I can get the footer done as long as Dev Tools is willing to cooperate with me.
Day 98: September 6, 2019
I did a lot of organizing for the children's toy website. After rereading my code, I decided to update the classes and ids for the collection sections. I didn't use any of the old code I had written for these sections.
Instead, I added brand new code to the site so it uses less code. It does repeat in specific sections but I'm going to leave it the way it is, for now, to just get the CSS done. I updated the Bootstrap classes so the code would work on small screens.
I also shortened the header navigation and removed the shop link from the navigation. Tomorrow I'd like to finish the mobile style sheet with the directory and footer sections so I can start working on the styles for the medium screens. The last 30 minutes were spent working on the celebrity fan page style sheets.
Before I finished the mobile style sheet, I took a few minutes to look at everything in the previewer. The previewer was working fine for the children's toy website and luckily it was still working for the celebrity fan page. I made some small changes to the border of the current section and played around with some padding on other sections.
Then I finished the upcoming and footer sections. Once the mobile-style sheet was finished, I just copy-paste most of the code to the tablet-style sheet. I made some minor changes to the CSS to hide the navigation icon on larger screens. Tomorrow I'll be wrapping up the celebrity fan page site by doing all the large screen styles.
Day 99: September 7, 2019
The first 30 minutes were spent working on the last style sheet for the celebrity fan page. This style sheet is taking me longer than I was planning since I need to add extra styles so it will work on larger screens. I also played around with the height and padding for these sections to make sure they weren't too condensed on the page.
I managed to get the header, greeting, current, and stream sections done. The stream section took a lot of time trying to get the two columns for the half-width class just right. I originally set the half-width class for all the styles to have the same CSS properties, but this threw off the header navigation.
So I decided to set each individually to see what I liked for different sections. This is repeating a lot of the code, but I plan on going back someday and updating the code so it doesn't repeat the same properties for the same sections over and over again. Tomorrow I'd like to figure out a fix for the latest section.
Right now the columns are too close together but the padding causes the second half-width div to move underneath the first one. I think the answer might be in the padding for the half-width section. The last 30 minutes were spent working on the CSS for the children's toy website.
The CSS is almost done for the entire website. I did go into the HTML to add Bootstrap classes. I had to move the h2 headlines for the current and misc sections since they were in line with the rest of the text tags inside the row tag.
Once I moved the headlines, the rest of the text elements went underneath the headlines. It also solved the issue I was having with the headlines in these sections not being centered on the page. All that is left to do tomorrow is finish the footer section and the updates for this site will be done.
Day 100: September 8, 2019
The first 30 minutes were spent working on the celebrity fan page style sheets. I double-checked all the CSS styles for different screen sizes before I started working on the last style sheet. The rest of the time was spent adding the rest of the CSS.
I updated some of the section CSS but the biggest issue has been the footer. The footer is nowhere near the bottom of the page. I tried googling for possible solutions but they caused the footer to be near the header or in the middle of the page instead of being at the bottom.
The closest I've gotten is using a fixed footer with the position set to fixed but I'm going to keep trying and find something that will work better than using the position property. The last 30 minutes were spent working on the last style sheet for the children's website. I added more Bootstrap classes to the index file and added the remaining CSS styles.
The issues started to pop up when I started pushing the code to Github. I ran into a lot of error messages trying to get my code on Github so I spent the rest of the time reading articles on Stack Overflow and Google to see what I could find to fix the issues. I ultimately ended up creating a different branch on Github with the code from the branch causing all the problems to push the code to the master branch.
Then I deleted the branch I did all my code on. I'm going to have to double-check all my code to see if this impacted my Github issues.
Conclusion
That's a wrap on 100 Days of Code! Although the challenge is over, I'm going to finish the celebrity fan page tomorrow and double-check all my code for the children's toy website. Now that the challenge is over, I'm going to keep up the momentum I've been building throughout the challenge and keep building projects on my own.
I'll keep everyone posted on what I'm building on Twitter. Are you doing the 100 Days of Code challenge? Share your progress in the comments below.
This post was originally published on September 8, 2019 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
