Today is officially the end of the second round of the Disney Codes Challenge. I finished the motivational speaker website I started during days 41-50. This website is for Megara from the Disney movie Hercules.
I'm using Bootstrap on this site, but my goal for this project is to get more practice with the CSS grid. Although I didn't start any new projects, I spent the last couple of days working on setting up code files for the websites I'll be making in the 7 Days, 7 Websites challenge. This included organizing code files, adding boilerplate code, and installing npm packages.
I'm celebrating the end of the Disney Codes Challenge by wrapping up the round two series here on DEV. This post is going to reflect on the final 7 days of the challenge and what I've learned as I was building projects.
Day 51: July 21, 2020
I finished all the styles for the tablet and style files. Before the session started, I played around with the background color of the bottom-nav and footer to see if I could get my original vision to work. It didn't.
I still have the visible line between the bottom-nav and footer sections. So I returned the styles to separate colors. The beginning of today's session was spent working on the spacing between the div tags in the programs section.
I didn't have much luck using the margin and padding properties. I found that changing one pixel for both of these properties caused the elements to move to another row. After spending several minutes playing around with properties, I decided to stop for the day and move on to the rest of the styles for the site.
I didn't add any CSS Grid to the site yet. After doing all the styling for the tablet and style files, I think the best way to use CSS Grid is the program section. As I do the final style changes, I'll play around with the CSS Grid properties in the programs section to see if I can get the elements spaced just right on the page.
I started some of the final style updates for the mobile.scss file at the end of the session. I already made a few changes to the site. Many of these changes were in the email section.
I changed the background color for the entire section and changed the color for the text tags. I'm not 100% satisfied with the width for the form in the header navigation so I will see if I can try to increase the width of the input tomorrow.
Day 52: July 22, 2020
The final style changes are done for the mobile.scss site. Most of today's session was spent getting the mobile.scss file is done. A lot of this time was spent trying to increase the width of the form in the header navigation section.
I didn't have any luck since any changes resulted in the input taking up the entire width and moving the search icon underneath it. After several tries, I decided to leave it the way it was and move on to the other styles for the site. The rest of the style changes for the mobile.scss wasn't as difficult as the form in the header section.
Many of these style changes were changing the padding and margin for various elements. I spent some time in the programs and bottom-nav sections playing around with the spacing between elements as well as removing properties I added before. I was able to get some of the style updates started on the tablet.scss file.
The header and email sections are done. Tomorrow I'm going to try using some of the CSS Grid properties in the programs section to see if that will help create some spacing between the different div tags. If it doesn't work, I will scrap CSS Grid and try to play with the Bootstrap classes some more.
Day 53: July 23, 2020
The styles for the medium screen size version of the site are done. Today I spent the entire session working on the styles in the tablet.scss file. Most of these changes were to the padding and margin of various elements.
I also made changes to the index.html. I added new class names for different elements and changed some of the Bootstrap class names. The new class names were added to the programs section so I could work with CSS grid.
Although the styles are finished on the tablet.scss, I'm still working on styles in this file to see if I can get CSS grid to work. Today I was able to add the grid-template-rows and grid-template-columns properties to the new groups class. Tomorrow I'm going to see if I can play around with some of the other CSS grid properties to see if I can get the spacing to work just right.
If it doesn't work, I have a backup plan in place. If I can't get CSS grid to work, I'm going to use Bootstrap to accomplish a similar effect. I will just give each of the group div tags a Bootstrap class name col-md-3 and play around with the padding. I tested this plan on the tablet.scss file and it worked.
Day 54: July 24, 2020
Today's session was a mix of coding and working my way through technical issues with my computer. When my text editor was cooperating with me, I spent the entire session working on CSS Grid and trying to get the properties to work on the tablet.scss file. I didn't have any luck getting the spacing right in the programs section.
After playing around with the properties and getting frustrated with the computer issues I decided to just go with my backup plan with the Bootstrap classes. I added the Bootstrap classes back in the index.html and removed the CSS grid properties from the tablet.scss file to create enough spacing between the different group elements. Once the Bootstrap was added back to the medium screen size version of the site, I started working on style updates for the style.scss file.
Today I was able to finish the header, quote, and email sections on the site. Tomorrow I'm going to wrap up the styles but I'd like to concentrate on fixing the programs section. On the large-screen version of the site, the groups need to be moved further towards the right a bit more.
Day 55: July 25, 2020
The motivational speaker website is officially done! I finished the style updates for the style.scss file. These changes were mostly adding or updating the padding properties to certain elements.
I fixed the issues with the programs section on the large-screen version of the site. I increased the left and right margins so the groups moved more toward the center of the page. Once the style.scss file was finished, I wasn't sure if I wanted to start a brand new project.
Since there are only a couple of days left in the challenge, I decided to use the last two days to get all the project code set up for the next coding challenge I am going to do. 7 Days, 7 Websites is the next challenge that is coming once the 21 Days of Canva challenge is over so I'm going to get the code files set up for as many projects as I can so I can start coding right away when the challenge starts. Today I was able to get some of the files added to the charitable organization website, the next prompt in the 30 Days, 30 Sites challenge.
I got some of the code files added. I decided I'm going to work with Node.js more in the 7 Days, 7 Websites challenge so tomorrow I'm going to add the package.json file and get the JS file ready to see if everything is working.
Day 56: July 26, 2020
Today's session was spent preparing project files for the next coding challenge. The final challenge I'll be doing is 7 Days, 7 Websites. The projects for this challenge will be concentrating on Node.js so I decided to spend my time getting the files ready so I can start coding when it comes time to start the challenge.
Today I was able to get two projects ready to go. The day-sixteen project took more time than I expected since I had to move code from the index.html to various code files I created during the session. I was able to start adding files for the day-eighteen project.
All the files are added to the site. Tomorrow I just need to create the package.json file, install the npm packages, and set up the npm packages in the app.js file. I'm going to see if I can get all the projects set up for the challenge tomorrow. If there is time left, I'll use that time to start adding code to the day-sixteen project.
Day 57: July 27, 2020
Today is the final day of round two. During this session, I finished setting up all the projects for the 7 Days, 7 Website challenge. I wasn't able to start coding the day-sixteen project as planned but at least all the code needed to get the websites organized and in the files so I can start all the projects right away when it is time for the challenge.
There weren't any issues getting the projects set up or installing packages. Although I added the boilerplate code to the site, I'll be making lots of changes to the code I added today and installing more packages. As I started getting each of the projects ready, I started thinking of themes for each of the sites. I'm not 100% sure what theme the charitable organization website will be yet but I know for some of the other 30 Days, 30 Sites prompts I have a couple of ideas in mind for those sites.
Conclusion
That's officially a wrap on the second round of the Disney Codes Challenge. Although the challenge is over, all the projects I've set up so far will be reappearing in the 7 Days, 7 Websites challenge. I will finish setting up the remaining projects tomorrow.
Are you doing the Disney Codes Challenge? Share your progress and projects in the comments below. Tomorrow I am starting the 21 Days Canva challenge.
21 Days Canva challenge is a challenge where I'll be creating a brand new Canva design each day. The first 10-day recap for the 21 Days of Canva Challenge will be coming soon.
This post was originally published on July 27, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
Top comments (0)