Sarah DyeI'm at the halfway point of this round of the Disney Codes Challenge. I just finished with day 30 of the challenge so it is time for another update of everything that has happened during the past 10 days of this round of Disney Codes Challenge. In these past 10 days, I finished the Mickey Mouse Club website I wrote about in my last post.
Right now I am working on a brand project. The newest website is a beverage website for the 30 Days, 30 Sites challenge. This website is inspired by the holiday movie The Santa Clause.
At the time of this post, I am working on the mobile styles for the beverage website. This project isn't using Bootstrap and will be instead of my way of getting more practice using Flexbox.
Day 21: June 21, 2020
I finished all the HTML for the club page. I added the remaining images to the club section. I also added some headlines and buttons for each of the row items.
Once the clubs section was finished, I created an e-mail section with a form. I also went back to the opening section underneath the email and added more text tags. I wrapped everything in a div with the row class so everything would be inline.
I did try adding an announcements section to the page. However, I decided to scrap the section after seeing how everything looked in my browser since it was just repeating the same format from the news section. Tomorrow I will start the styling for the site.
Before I begin the mobile styles, I am going to run some test styles to see if everything is working in Sass. In the past, this has caused me trouble so I want to make sure everything works before I start adding styles to the mobile.scss file.
Day 22: June 22, 2020
This marked my first-day doing styles for the club page. Before I started working on the mobile styles, I took a couple of minutes to make sure Sass was working correctly and everything was set upright. I often run into setup issues in past projects so I made sure to set aside time to make sure everything was working before I started working on the styles.
Happily, things went very well for setup today so I was able to use the extra time I planned for troubleshooting Sass towards adding styles to the mobile.scss file. During this session, I was able to get the header, email, banner, and opening sections done for the mobile version of the site. I ran into some issues with the navigation for my header.
Originally none of my text was appearing on the site. This was due to the bg-light and navbar-light classes in the navbar code. I fixed the issue by changing the navbar-light class name to navbar-dark and removing bg-light.
I was able to start on the styles for the news section of the site. Tomorrow my goal is to add the styles for the remaining sections on the page. I'll double-check to see if any final changes need to be made to the mobile.scss file before I start working on the styles for the tablet.scss file.
Day 23: June 23, 2020
The club's website is almost finished. I finished all the styles for the mobile version of the site. I added styles for the news, clubs, and footer sections in the mobile.scss.
I also made some smaller changes to previous sections such as playing with the padding on different elements. Once I compiled those styles, I moved on to the tablet.scss file. I managed to get all the styles done on the tablet.scss file.
Tomorrow I'll do a final review of the medium screen version and make changes once I finish the styles for the style.scss file. As I was working on the styles for the medium screen version, I wasn't very happy with the way the video looked in the opening section. The video was too narrow in the column.
I played around with the width and height of the iframe tag to try to improve it. However, it still didn't look right to me. Tomorrow I'm planning on playing around with the styles some more to see if I can find a way to make it better on tablet screens.
Day 24: June 24, 2020
The first thing I did in this session was add the styles to the style.scss for the large-screen version of the clubs page. I didn't make too many changes to the styles since I was going to do lots of edits later. I did make changes to the font sizes for different headlines.
Once those styles were compiled into CSS, I turned my attention back to the mobile.scss file to begin final edits on the website styles. Before I started adding styles, I took a quick look at my site in all different screen sizes to see what I could do to improve the styles on each version. After looking at my site, I made some small changes to the HTML code.
I decided to remove the headlines in the opening section since they clashed with the background image. I also added strong tags for the h3 tags in the news section so they would stand out from the text in the p tags. The rest of the time was spent updating properties on the mobile.scss file.
This included playing with the padding of different sections, adjusting the width and height of the video in the opening section, and changing font sizes for headlines. I also removed the code for the headlines I deleted from the opening section and played around with the height for the background image. I was able to start on edits for the tablet.scss file.
I managed to get the header and navigation done for this version of the site. Tomorrow my goal is to get all the styles for medium screens done. I especially want to figure out how to fix the height for the video in the opening section and see if I can improve it.
Day 25: June 25, 2020
I finished all the styles for the club website today. I changed the styles for the tablet.scss and the style.scss files. These changes included fixing the margins on the buttons, updating font sizes for headlines, and adding padding to different sections.
I noticed I kept setting the text-align for the h2 to center so I went back into the HTML and added the text-center class to the h2 tag to center the tag then removed the text-align property for the h2 selector. I spent some time working on the width and height of the video size for medium-size screens. I get a sense the issues with the sizing are due to the Bootstrap classes.
The way the Bootstrap grid classes divide elements into columns made the sizes. In the future, I will try playing around with some of the styles for some of the class names I'm using to see if the width of the column will impact the video's width at all. Tomorrow I'm going to start working on setting up a brand new project.
I created the GitHub repository for the project today and created a branch for all my code during one round. Tomorrow I'm going to set up the files on a different branch and begin working on the HTML code.
Day 26: June 26, 2020
It is the first official workday for the beverage website. Before I started working on the site, I took a good look at the current version of the site before I started working on any of the code. There are quite a lot of things I wanted to keep for the newer version of the site so I reused a lot of the placeholder text, headlines, and images in my code.
I realized I've been using Bootstrap quite a lot in my projects so I decided to not use Bootstrap on this one. Instead, I want to use this project as a way to get more practice with using Flexbox. I also want to use this project as a way to test out some of the other Sass features from the Sass documentation besides the variables.
In this session, I didn't get to any styling. I removed the old CSS code from the style.css file as I organized my code files and got my files ready for coding. Once all the files were set up, I spent updating the HTML code by removing Bootstrap classes and adjusting elements on my site. Tomorrow my goal is to finish the HTML. I've been thinking about redoing some of the sections I have on the site before I start working on the mobile styles.
Day 27: June 27, 2020
All the HTML code is now on the beverage website. Before I started working on this project, I spent some time looking at different color palettes to use in the newest version. I was able to get a start on some of the mobile styles.
Tomorrow my goal is to get a good chunk of the header done. As I was adding some styles to my site, I noticed there was a space between the top of the header and the announcements section. I'm going to see if I can fix the spacing issue and possibly recreate the mobile navigation I often use in Bootstrap.
I'm going to take a look at different sites on my phone to get ideas of what I can try for mobile navigation on the beverage site. Most of the HTML code was mostly updating headlines, adding buttons, and moving certain elements to different div tags. I added some new HTML code to the site.
This new code resulted in two new sections for my site such as the email and announcements. I put the announcements at the top of the page above the navigation since I've seen so many websites have an announcements area at the top of their pages.
Day 28: June 28, 2020
I found a solution for the gap between the announcements section and the top of the page. The solution I used to fix the problem was moving the announcements section out of the header in the HTML file. In the mobile.scss file, I added some padding to the top and bottom of the announcements selector.
Once the announcements section was fixed, I spent the rest of the session adding styles for the header. I was originally going to have a background color for the header, but I think it might be better to just use a border around the header so I don't have three areas of the website using background colors. Tomorrow I will add a border to the header and finish the navigation.
I was able to start on some of the navigation. I removed the bullet points and changed the fonts. Tomorrow I want to play with the padding for the list of items to see if I can make it a little bit closer to the left side. I also want to figure out how to make the shop button work inside the header.
Day 29: June 29, 2020
Today I spent most of my time working on the mobile header. I was able to start on some of the styles for the email section. Tomorrow I will be figuring out how to get the spacing just right for the form elements so it looks nice on mobile devices.
I especially want to see if I can style the button just right on the form so it is consistent with the shop button in the navigation. I spent a lot of time with the header navigation and trying to get the list items as close to the left side of the screen as I possibly could. The best way I could do this was by adjusting the margin for the ul selector and playing with the padding for the li items.
The shop button took a lot of time to just get the width and border radius right. I had to play around with the border radius measurements a bit but I managed to get a decent button that fit within the navigation. I did try a border for the header, but I decided to scrap it at the very end after looking at the announcements, header, and email sections together in the browser.
I wasn't happy with how the borders were possibly extending too far on the site. After playing with the width, padding, and height properties, I removed the border. This made a huge difference on the site and didn't clash with the announcements and email sections.
Day 30: June 30, 2020
I finished two sections for the mobile version of the 30 Days 30 Sites beverage website. I added the remaining styles for the form in the email section. It took some time playing around with the margin and padding for the input selector but I managed to get the spacing just right for the inputs.
Initially, the button styles for the form weren't appearing. It took some troubleshooting and fixing some of the Sass variables but I was able to get the button background color and text fixed. As I was working on the styles, I began having issues with my sections extending too far on the mobile screen, creating a horizontal scroll bar.
I realized the width property I was using for the section ids was creating the scroll bar so I just deleted the width property for each of the selectors. This removed the horizontal scroll bar and made sure all the sections fit on the screen. Although I spent a lot of time on the styles on the mobile.scss, I did go back to the index.html file to make more changes.
These changes are mostly updating images. I updated the image link for the picture in the featured section. Tomorrow I'll update the rest of the images on the site as well as begin adding styles for the popular and recipe sections.
Conclusion
Tomorrow is the start of July. In the next 10 days, I'm going to continue working on the beverage website. My goals are to finish all the mobile styles for the site and begin working on the styles for the medium and large-screen versions of the site.
I will use Flexbox on these versions to get more practice using Flexbox properties on my site. Are you doing the Disney Codes Challenge? Share your progress in the comments.
This post was originally published on June 30, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
