Sarah DyeI'm at day 50 of the Disney Codes Challenge. Before I start working on the last 7 days of the challenge, today's post is taking a short break to do the final 10-day recap post in this challenge. In this post, I'll be sharing my experiences during the past 10 days of the challenge and what projects I've been working on.
During these past 10 days, I finished working on the printing company website. I also started work on the final project in the Disney Codes challenge. This project is another prompt in the 30 days, 30 Sites challenge.
I began coding a website for a motivational speaker. The website I'm making is inspired by Megara from the Disney movie Hercules.
Day 41: July 11, 2020
All the HTML is officially done for the printing company website. I spent the first few minutes of the session adding the HTML code for the email section setting up the form for the site and using Bootstrap classes to get the form spacing just right. Once the form was done, I double-checked the link for the Google Fonts site and figured out what color palette I wanted to use for styling.
The rest of the session was spent starting the styles for the mobile.scss file. I was able to get the base styles and header styles done on the site. I found myself going back into the HTML to adjust some of the Bootstrap classes to get the header colors to appear on the site and adding class names to help customize the styles for different elements.
These class names came in handy for adding background colors, font sizes, and text colors to different elements. Once the header was finished, I was able to start adding styles for the banner section. Tomorrow I'm going to finish adding class names to different p tags in the HTML file for styling and adding final styles to the section. I especially want to go back into the styles I've already written for this section and adjust some of the colors such as the background color.
Day 42: July 12, 2020
I'm still working on the styles for the mobile.scss file. Today I was able to finish 2 more sections for the mobile site. I was able to start adding styles for the deal section.
I spent a lot of time working on the styles for the deal section since I was playing with the opacity property. I originally tried setting the opacity property for the background image, but I realized this wasn't going to make the text easy to read. I ended up creating a class name for the div I wrapped my text around.
In the scss file, I used this new class name to set the background color to white. Then I changed the opacity property so it would be transparent to see the background but clear enough for people to read the text. The email and banner section styles were much easier to get done.
I added some Bootstrap classes and adjusted the CSS code I already wrote yesterday. This included changing the background color for the banner section from red to green. I also played around with the padding of the text elements a little bit. Tomorrow I'm going to finish styling the deal section and see if I can get more styling done for the rest of the sections for the mobile.scss file.
Day 43: July 13, 2020
The mobile.scss file is almost done. I finished a lot of the styles for the website sections today. This included adding styles for the bottom navigation, second deal, and trending sections.
I also finished the styles for the deal section. The only other section I need to finish tomorrow is the footer. Once the footer styles are done, I'm moving on to the styles on the tablet.scss file.
Although most of the work was spent working on the CSS and getting the styles on the mobile site, I found myself going back into the HTML to adjust more Bootstrap classes. Today I went back into the HTML to change some of the headline tags and add class names to div tags. In the bottom navigation section, I changed the h4 tags to h3 tags. Once the mobile styles are done, I would like to take a little bit of time to play with the spacing for the groups of links in the bottom nav section so they aren't too close together.
Day 44: July 14, 2020
The mobile styles are officially done on the printing company site! Initially, I ran into some issues with the Font Awesome icons. They initially did not appear at the bottom of my site.
When I took a look at the HTML code, I realized I didn't put a link to Font Awesome in my head tag. Instead, I added an extra link to the Google Fonts font I was using. Once I deleted the extra link and added a link to the Font Awesome CSS files, the icons appeared at the bottom of the page.
Once the mobile footer was done, I started to add styles to the tablet.scss file. I managed to add most of the styles to the medium screen size version of the site. The only sections that need styles in this file are the bottom navigation and footer sections.
Although I will add these styles to the website tomorrow, I want to go back to the deal and second deal sections to play with the white text block. I'm not satisfied with the position of the box on the medium screen version so I'm going to go back into the HTML code and see if I can play with the Bootstrap classes as well as the CSS properties to get the position just right for the text boxes on the page.
Day 45: July 15, 2020
The printing company website is finished! I spent the entire session adding the final styles for the tablet.scss file. I also added the styles for the style.scss file then made final changes to all the screen size versions.
Tomorrow I'll be starting a brand new project from the 30 Days, 30 Sites challenge. I'm going to think about what the topic will be for my site so I can start working on the HTML code tomorrow. I was able to play around with the text-block classes to see if I could improve the position of the transparent white box on my site.
The best solution for this site ended up being a fix for the Bootstrap classes. I changed the class names for the medium and large screen sizes to twelve columns instead of six. I also wrapped the ul and li items in my header with a div tag with the nav-row class name so I could adjust the padding of the list items so they were aligned with the form and nav brand logo.
Day 46: July 16, 2020
It is the first official workday for the motivational speaker website. Today I spent the session organizing my code files. This will most likely be the last project I work on in the challenge so I'm going to use this project to get some final practice with Sass.
Although I'm going to be using Bootstrap on this website, my goal is to get some more practice with CSS Grid. I'm going to use the CSS Tricks blog post tomorrow to help me use CSS Grid code on my site. I didn't get too much HTML done on the site, but I was able to start adding code to the site.
I was able to get the header and footer sections done in today's session. I started to add code for a quote section underneath the header section. I'm not sure what sections to add to this site so I'm going to take a look at some example websites online for inspiration.
Day 47: July 17, 2020
I'm almost done with the HTML code for the motivational speaker website. Today I was able to add more HTML code to different sections on the site. First, I finished the quotes section I was working on in yesterday's session.
Next, I added brand new sections to the site. Before I started working on the site, I took a look at some websites which were similar to the one I'm making. So I modeled these sections after things I like or would fit with this site.
Some of these new sections included email, upcoming, about, and programs. The only HTML I need to finish tomorrow is the bottom-nav section before the footer. Before I start adding styles to the site, I am going to take some time to go back into my HTML code to see how I can use CSS Grid on this site.
I wasn't able to play around with CSS Grid today, but I am going to see if I can make it work in the programs section on my site. If I can't find a way to make it work, I'm considering scrapping CSS Grid completely and just concentrating on the styles. After giving this site more thought, I decided to change the subject of this site.
So I went through the HTML to change the text from Jiminy Cricket to Megara. I changed the navbar-brand and email text in the footer. In the head tag, I changed the text in between the title tags.
I'm going to start taking a look at color palettes to see what I would like to use for styling tomorrow. This will be much easier to do now that I changed my subject for this site since Megara's got a good color scheme I could use for this site.
Day 48: July 18, 2020
The HTML is finally finished for the motivational speaker website. Today I spent most of the session finishing the bottom-nav section of the website. I wasn't able to any styles to the website, but I did start adding styles to the mobile.scss file.
I was able to add the Sass variables as well as styles for the body and some of the header. I will compile these styles to the site tomorrow as I continue to add styles to the mobile.scss file. Although most of the work was spent on the bottom-nav section, I updated the footer section by moving some of the footer elements to the bottom-nav section.
I was inspired by Tony Robbins's website. It was the website provided in the challenge email and wanted to see if I could recreate this section on my site. So far this section is similar to the one on Tony's site.
I used Bootstrap and br tags to get the layout just right. As I work on the styles, I will be making more changes to HTML so the bottom-nav section will constantly be changing as I work on styles for each screen size version of the site. Before I started writing any code, I took a few minutes before the session to pick a color palette for the styles and read the CSS Tricks blog post on CSS Grid.
I decided I would try playing around with CSS Grid later in this project when I worked on the styles for the large-screen version of the site. Tomorrow my goal is to get as much of the styles done for the mobile version of the site.
Day 49: July 19, 2020
I spent today's session working on the styles for the mobile.scss file. I was able to get most of the styles done on the site. The only sections I have to add styles for are the bottom nav and footer.
Tomorrow I plan on tackling the styles in the tablet.scss file to get the medium screen size version of the site done. This way I can use the extra time to work on the large screen styles and work with CSS Grid. Although most of the session was spent on the mobile.scss file, I started to go back into the HTML file to make changes to Bootstrap classes, adding div tags, and creating new class names for elements.
I deleted the container-fluid div tag I had wrapped around all the page elements since this left white space in areas instead of going full width on the page. Another major change I made was removing the btn-info class from all the buttons on the site so I could customize the colors to match the color palette I am using. Finally, I added div tags around the input tags in the header navigation so I could create more spacing between the input form and the button.
Tomorrow I'm going to take a look at the bottom-nav section to see if I should make any edits to any of the form elements in the index.html file. I have a few ideas of what elements I could delete from the site as well as other ones I might move in different areas within the section. This way I can make the bottom nav section fit more of Meg's personality for the site.
Day 50: July 20, 2020
The mobile styles are officially done on the motivational speaker website. I added styles to the bottom nav and footer sections in the mobile.scss file. I didn't have too many issues adding styles to the site.
The biggest issue was the background color for both sections. I was originally going to have both sections be the same color so they would blend. However, this created a gray line between the two sections.
I decided to go with a different background color for each section but I think tomorrow I might change the border of the footer section to see if it will help disguise the line in between the bottom nav and footer sections. Before I started working on any of the styles, I took some time to go back into the HTML file to make changes to the bottom-nav section. I made a lot of changes to the code including removing a div tag with elements for media inquiries and customer service.
I changed the Bootstrap classes for the other div tags from col-md-4 to col-md-6. I rearranged some of the text tags and added more li tags to the unordered lists. The other big challenge in the bottom nav section was getting the spacing just right between the list items and Font Awesome icons.
It took some time playing around with the padding but I eventually got the spacing just right for these elements. I was able to add a lot of styles to the tablet.scss file. Right now the programs section is causing me some struggles since the group classes are too close together. I'm going to play around with the padding and margin of the group class to see if this helps create some space between each of the groups on the page.
Conclusion
I'm in the home stretch of the Disney Codes Challenge. The next post in this series will wrap up the Disney Codes Challenge with a recap of the last 7 days of the challenge. This recap will describe how the styling went for the medium and large-screen versions of the motivational speaker website and how I was able to include CSS Grid on the website.
Are you doing the Disney Codes Challenge? Share your progress and projects in the comments below.
This post was originally published on July 20, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
