I'm officially on day 20 of the Disney Codes Challenge. Today's post is marking this milestone by sharing another recap of everything that has happened during the past 10 days of the challenge. During these past 10 days, I've been working on getting the styles on the mobile services and events web page based on one of the prompts from the 30 Days, 30 Sites challenge. I recently started working on building a club page inspired by the Mickey Mouse Club using more Sass.
Day 11: June 11, 2020
Today I was able to concentrate completely on the styling for the mobile services and events website. The first thing I tackled today was the header styles for the mobile version of the site. I changed the site name again and even tried changing the headline tag to a link tag to see how it looked.
After looking at the header in Dev Tools, I decided to go back to a headline tag and just add a link to the home page in the navigation. As I was looking at the header, I decided the colors were too light and hard to read. So I changed the Sass variables with different hex codes.
I picked darker colors this time and checked how everything looked in the browser. This made a huge difference. The colors made the text easier to read.
The rest of the session was spent working on adding styles to the email and meet sections on the mobile version of the web page. As I was checking the styles on this page, I noticed the spacing and padding were an issue that made it seem like elements were overflowing to the side of the page. I went back into the HTML file and started playing with Bootstrap classes to see if it would help.
I took all the tags for the meet section and wrapped them in a div tag with the container class. I also changed the class names for the images from img-thumbnail to img-fluid. These changes did the trick and the overflow effect I was seeing was gone when I checked everything in the browser.
Tomorrow I'm going to add any last-minute styles for the email and meet sections. The big tasks tomorrow will be adding styles to the highlight section and figuring out how to tackle the footer navigation section on the mobile site. I have a feeling I'll be adding more Bootstrap to the page to get the elements stacked on top of each other, but I've been debating about playing with Flexbox too.
Day 12: June 12, 2020
The mobile version of the mobile services and events website is officially done. Most of today's session was spent putting the finishing styles on the mobile.scss file. Before I began adding any styles, I took a couple of minutes to double-check the styles for the meet section I already had.
The only changes I made were adjusting the font sizes. The rest of the time was spent adding styles to the remaining sections on the page. As I added styles to these sections, I went back into the index.html file to add or rearrange Bootstrap classes.
It took a couple of minutes to get everything just right, but I found the best way to make the bottom navigation work on the mobile site. I wrapped the bottom navigation tags in a div with the class container. For each nav item, I wrapped every item in a div with the class col-sm-12.
This setup might change as I work on the medium and large-screen versions of his site, but for now, all the styles are working the way I want. I'm not 100% content with the mobile version of the highlight section. The h3 and p content in this section could use more padding.
However, I'm satisfied with the current layout so far. In the future, I might play around with these elements to see if I can find a better way to display them on a site. But for now, I am going to leave things the way they are so I can concentrate on the other styles.
Now that the mobile styles are done, I began working on the styles for medium screens. I was able to add the Sass variables on the tablet.scss file and started to add the header styles to the stylesheet. Tomorrow I'm going to make changes to the header styles before I move on to adding more styles to other sections.
Day 13: June 13, 2020
I added all the remaining styles to the tablet.scss file and compiled them to the page. As I was working on the styles for medium size screens, I noticed the button in my email section had more padding on the left side than the right. I tried playing around with the button style to see if I could fix it, but I wasn't able to get the padding on the right to work.
I think the Bootstrap classes could be preventing the styles from being changed so I'll see if I can find a solution tomorrow after I finish all the styles on the large screen sites. After taking the time to fix the button, I decided to move on with the rest of the styling for the site. The Bootstrap classes presented more problems with the bottom navigation.
They were first causing problems getting the navigation inline on the medium-sized screens. I removed the Bootstrap classes I added yesterday and just wrapped the tags in div tags with container and row classes. This gave me the right look for the bottom navigation on medium-size screens, but it messed up the styles for the bottom navigation on my mobile site.
Tomorrow I plan to get all the styles added to my style.scss file and compile them to see how everything looks on large-screen sites first. Then I'm going to use any time I have left to figure out the issues with the bottom navigation on the mobile site and figure out what is going wrong with my form button padding in the tablet.scss file. I'm going to try using Flexbox to see if this helps me make some of the styling issues I'm having get back to the way things were on the mobile site without using Bootstrap classes.
Day 14: June 14, 2020
I added all the styles to the style.scss file. I made some minor adjustments to the code, but I didn't make too many changes since I was going to do massive updates on all the scss files anyhow. Once all the styles were put on the style.scss file and compiled, I went back to the mobile.scss file and start making more style updates.
I was able to get the header, email, meet, and highlight sections done. These sections didn't have too many changes. Some of the bigger changes were adding padding to the headlines and images so there would be more spacing between different elements. I wasn't able to get to the bottom navigation section today, but tomorrow I'm going to spend my time working with Flexbox and seeing if the properties will help.
If Flexbox doesn't work, I'm not sure what I will do next. I think I might need to rethink my original plan for the site if that is the case.
Day 15: June 15, 2020
Today I only worked on the bottom navigation on the mobile version of the mobile events and services page. I played around with Flexbox at first, but I soon realized I needed to remove all the Bootstrap classes from this section. After I deleted all the Bootstrap code, I started to redo all the HTML code.
I managed to get the effect I wanted without Bootstrap, but I couldn't get the text-decoration property to work. Right now the site has all the bullet points next to each of the list items despite text-decoration being set to none. I think the issue could be in how the tags are nested in the bottom navigation section. Tomorrow I might play around with Flexbox again to see if I need to use it on the site but mostly my goal is to get the bullet points to be hidden on the page.
Day 16: June 16, 2020
I finally finished all the styles for the mobile version of the site. After playing around with some of the properties, I was able to get the bottom navigation section to look the way I wanted without using any Bootstrap classes. What I did was make a li selector that uses the list-style-type set to none and padding set to 10px 0.
I nested the a and a:hover selector inside. This hid all the bullet points. Now that the bottom navigation section is done, I made final changes to the mobile footer before working on the tablet.scss file. The biggest challenges on this version were the submit button in the email section and the bottom navigation section.
When I was working on the submit button, I removed the initial styles I was using and played around with the left and right padding. This didn't work and just moved the padding too far on the screen. After several tries, I decided to just leave it the way it was since was the best lookout of everything I was trying.
When I got to the bottom navigation section, I started to use Flexbox properties to see how they would work on the page. It took several tries but I eventually decided to set the display for the ul items to flex and add some padding to the left side to give some spacing between each of the items. Once I added the footer styles, I compiled everything to the tablet.css file and began updating the styles for the style.scss file. Tomorrow my goal is to finish all the updates for the style.scss and see if I can get the bottom navigation to work on the large-screen version of my site.
Day 17: June 17, 2020
I wasn't able to start working on the next project in the 30 Days, 30 Sites Challenge today. The styles in the style.scss are taking longer to update than I was planning. Although I was able to add all the update changes I wanted, I noticed I had a horizontal scroll bar at the bottom of the page.
I spent the entire session trying to look through my style.scss file to see what code is creating the issue. In the end, I wasn't able to get the horizontal scroll bar to disappear on my site. Tomorrow I'm going to see if I can figure out where the issue is.
I plan to remove all the styles from the style.scss file so I have a basic HTML page. I want to check if Bootstrap could be causing this issue. Then I'll add the code for each section back onto the site one at a time to best see which one creates the horizontal scroll bar.
Day 18: June 18, 2020
I spent more time working on the large-screen version of the mobile events and services page. I wasn't able to remove the horizontal scroll bar. I removed all the style.scss code to see if I could find the problem, but I learned instead the issue might be within the index.html file.
Tomorrow I'm going to see if I can debug the HTML code to see what could be making the scroll bar. I have a feeling the Bootstrap could be causing the issue so I'll be interested to see what I find as I work my way through the HTML code tomorrow. Hopefully, I'll be able to figure out the issue tomorrow.
Once I resolve the issue, I'll add the styles back to style.scss. Before I can move on to the next project, I will need to double-check the mobile and tablet versions to see if any HTML changes impacted the styling. If this does impact the look of these versions I'll adjust the styles to see if I can fix things to get back to current versions of my site.
Day 19: June 19, 2020
It took some time moving code around in the style.css file but I was able to figure out what created the horizontal scroll bar at the bottom of the page. My footer was the one creating the scroll bar at the bottom of the page. I fixed the issue by using a div tag with the container class around my footer elements.
After fixing the scroll bar, I added my styles back to the style.scss file and compiled them into the CSS file. I also double-checked the mobile and medium screen versions of my site to make sure there weren't any issues popping up on my site. Now that the mobile events and services page is finally finished, I was finally able to start working on the next 30 Days, 30 Sites project.
Today I was mostly getting the code files set up and organized so I can start working on the code tomorrow. The plan for tomorrow is to at least get most of the HTML added to the site and remove the old code I already have. I'm not sure if I will keep any of my current code for the new version yet so I'll see what I can use as I work through the HTML.
Day 20: June 20, 2020
I made a lot of progress on the HTML for the club page. Before I started to write any code, I took a quick look at the code I was currently using on the site to see if there was anything I wanted to keep for the new version. I decided I was just going to scrap all my code and write brand new code for the site.
So the first few minutes of the session were removing all my old HTML and CSS code so I had an empty page. Now that the old code was gone, I began adding new code to my site. During this session, I was able to get a lot of the HTML added to the site.
Right now I'm adding different sections to the page. So far I set up a banner section that will have a background image in the background as well as sections for news and an opening video. I might add more elements to the opening section tomorrow so it isn't just a video.
At the end of the session, I was working on adding images to a clubs section at the bottom of the page. Tomorrow I will finish adding images to this section. I felt like this page is missing some sections I am going to have an e-mail sign-up section as well as adding more elements to the opening section. My goal tomorrow is to get the HTML finished so I can start working on the styles for different screen sizes.
Conclusion
Tomorrow begins day 21. I will see if I can finish all the HTML code tomorrow so I can concentrate on the styles for all the screen sizes on the club page. My goal is to complete the club project in the next 10 days and get a good head start on the HTML code for the next project in the 30 Days, 30 Sites challenge.
Are you doing the Disney Codes Challenge? You can share your progress below in the comments or on social media using #DisneyCodesChallenge.
This post was originally published on June 20, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
Latest comments (0)