I have reached day 40 of the Disney Codes Challenge. Before I start working on day 41, here's another recap of everything that has happened during the past 10 days of the challenge. During these ten days, I spent most of the time working on the beverage website inspired by the movie The Santa Clause.
I added all the styles for each screen size version while getting more practice using Flexbox properties. Right now I'm working on a brand new project in the 30 Days, 30 Sites challenge. I recently started adding HTML code for a printing company website. This website uses Sass and Bootstrap to make my idea of what a Disney printing company's website would look like.
Day 31: July 1, 2020
I made a lot of good progress on the beverage website today. I finished the mobile and medium screen styles for the site. Tomorrow I plan to finish the large screen version styles then take a look at each version of the site to make any final changes before I move on to the next project.
Before I started working on the mobile.scss file, I went back into the HTML file and changed the links for all the images on the site. As I was adding the images, I wasn't happy with how some of the elements were spaced on the page. Some were too close to the left side so I went back into some of the previous sections to adjust the margin and padding to see if that would help.
I also changed some of the button colors from red to green in the featured section. There weren't too many changes to make to the tablet.scss file. These changes are mostly adjustments to the margin and padding of different elements.
I was originally going to try using Flexbox properties on the medium-screen version of the site, but I decided against it as I took a look at how everything looked in the browser. Once the large screen styles are done, I might go back into the medium screen styles and play around with Flexbox to see if they would work.
Day 32: July 2, 2020
I began working on the large screen styles for the beverage website. I wasn't able to get as much done on this version as I was hoping due to Flexbox. I found myself having to make more adjustments to certain sections to get the right effect and look.
The CSS Tricks blog post has been helping me a lot, but I'm still struggling to get the Flexbox properties to work just right. So as I work through different sections, I'm going back into the HTML code to add more div tags to wrap elements around. I was able to get two sections done on my website.
The announcements and header are done on my large-screen version of the site. The header benefited from having the extra div tags so the list items were inline with the h1 tag. Right now I'm working on the email section and I am trying to figure out how to get my form elements inline and how to use Flexbox properties to space them out more. The inputs are too close together so I've been trying to use Flexbox properties to see if I can space items out more without adjusting the margin and padding too much.
Day 33: July 3, 2020
I added all the styles to the large-screen version of the site. I was able to fix the issues with the form in the email section. What I did was add id attributes to each of the form inputs in the HTML file.
In the style.scss file, I created new selectors for each of the ids which had the margin and padding set to ensure there was enough spacing between each other. This did the trick and gave some more spacing between these elements, but the positions of these elements still need to be improved. I'll see if I can get the layout better in the final style updates for the page.
Once the email section was done, I spent the rest of the session getting the styles added to the style.scss and compiled. I also went back into the HTML file to add more div tags to wrap elements in full-width classes. I also moved some of the h2 headlines around in certain sections so they weren't inline with other elements in the section.
I tried adding more Flexbox properties to this website, but I wasn't having much luck getting the properties to work the way it said in the CSS Tricks blog post. I found I was having better luck just adjusting the margin and padding vs using one of the Flexbox properties. Although most of the session was spent getting the styles on the style.scss file, I was able to start on some of the final style updates for the mobile version of the site.
I made a few adjustments to the base styles and took a look at how the site looks in the browser. I was relieved that the HTML changes didn't impact any of the styles too much on the style.scss. Yet I still found some changes I'll need to tackle tomorrow including solving spacing issues for the form, padding at the side of different sections, and changing the margins between the button and images in the popular section.
Day 34: July 4, 2020
I finished the mobile version of the beverage site today. I spent the entire session making style changes to various selectors on the mobile.scss file. Most of these changes were updates to the padding and margin properties so there was an appropriate amount of spacing between each of the elements.
I especially made changes to the padding and margin properties for the form in the email section. I also noticed I was using the same placeholder for the email input in the form so I went back into the HTML file and changed the placeholder attribute. After looking at the website at the beginning of the decision, I decided not to use any Flexbox properties for the mobile site.
Tomorrow I'm going to use Flexbox and Flexbox properties to get the layout just right for the medium and large screen sizes. My goal is to try some of the Flexbox properties in some of the base styles and see how I can make them work on the tablet.scss file.
Day 35: July 5, 2020
I started to work on the styles for the tablet.scss file. I spent the session setting up Flexbox on the medium screen size version of the site. I set the full-width selector's display to flex then added other Flexbox properties to different sections.
This has taken a lot of trial and error since some of the properties aren't working the way I was planning so I had to adjust other properties to see if that is impacting the CSS styles. This often looked like changing the numbers for the padding and margin of different elements. Today I was able to get the announcements, header, and email section done.
A lot of my time was spent on the header section and getting the spacing right for the list items. Originally the list items were too spaced out on the page so I played with the margin and padding to get the right balance of spacing between each li. The other big challenge was the form inputs in the email section.
I am really glad that I went back into my HTML to add the id attributes to the inputs since this made it easier to customize the margin and padding for each input so everything was aligned and spaced properly on the page. Tomorrow I'm hoping I'll be able to make more progress on the tablet.scss file so I can get all the styles for the medium version of the site done so I can start working on the updates for the large screen version. As I started updates for the featured section, I noticed the images in this section were spaced way too close to the top. So tomorrow I'll be playing with the padding to get the image just right on the page.
Day 36: July 6, 2020
I'm almost finished with the beverage website. Today I was able to finish the rest of the style updates on the tablet.scss and the style.scss files. These updates were mostly changes to the padding and font sizes.
I didn't work too much in the HTML file, but I did go back into the index.html to move some of the h2 headlines out of the full-width div tag so there would be more spacing in between the h2 headline and the elements in the full-width div tag. Although the styling is done, the beverage site isn't finished. As I was double-checking each version of my site, I noticed there was a horizontal scroll bar at the bottom.
Tomorrow I'm going to start going back into all the scss files to see what is creating the horizontal scroll bar. I did remove the styles for all the sections in the style.scss file to see if there was a horizontal scroll bar without the styles. There was a scroll bar at the bottom so I think the issue could be in the baste styles for this site.
Day 37: July 7, 2020
The beverage website is finally finished! I spent the entire session fixing the horizontal scroll bar issue I discovered yesterday. Before I started to work on any of the code, I took a look at each version in more detail.
I removed all the styles to see how each version looked with just the HTML to double-check if this was causing the horizontal scroll bar. This check confirmed the issue wasn't with the HTML. So I added the styles back to the scss files and compiled them back into CSS so I could start figuring out what was causing the scroll bar.
It took the entire session, but I managed to remove the horizontal scroll bar from all the screen versions. I double-checked every version in Dev Tools and played around with the window sizes to double-check everything. The solution I used was to remove the width property of 100% from the container selector in the tablet.scss and the style.scss files.
In the mobile.scss file, I just removed the width property from the full-width class. I didn't make too many changes to the styles for the medium and large screen sizes. However, I did adjust some of the styles for the mobile.scss file.
These changes were mostly adjusting the numbers for the buttons. I updated the width properties for all the buttons and added some margins to the left and right sides so the buttons would fit on the entire page.
Day 38: July 8, 2020
It is the first official day working on the printing company website. Before I started to update the code, I took a look at my old code to see what I had. It turns out that this is a project I had started before and never finished.
So I decided to delete all the code I had started in the past and add new code for this project. After spending the last few days working with Flexbox, I decided to go back to Bootstrap for this project while continuing to get more practice with Sass. Today I didn't get too much coding done.
A lot of today's session was spent preparing the code files and getting organized. The only code I started to add was for the header. This project is the first time I'm going to create a dropdown menu.
So far I've created one dropdown menu using the Bootstrap documentation. I'm not sure what else to add to the navigation menu. So I'm going to take a look at some printing company websites online to get some inspiration for what I might use on my site.
Day 39: July 9, 2020
I'm still hard at work on the HTML for the printing company website. Today I finished the header and footer sections. I was able to add two sections for the page, but I think I'll be making changes to these sections tomorrow as I add more HTML code to the page.
I'm not 100% sure what sections I want to include on the page so I'm going to take a look at more printing company websites to get ideas of what might be on a web page for one of these sites. Today most of the work was spent on redoing the header. After taking a look at different printing company websites and looking at some Disney websites, I decided to redo the dropdown menu I was making.
I used the menu for licensing and changed the items in the dropdown menu to different licensing types. I moved my original dropdown list items to the main navigation. I also added a new dropdown menu for new items and added a few list items to the new menu.
Tomorrow my goal is to concentrate on getting more sections added to the HTML code. I would like to get the HTML code done so I can start tackling the styles. This doesn't just mean adding new sections to the site. I'd also like to update the existing sections such as adding buttons and span tags to emphasize certain items later in styling.
Day 40: July 10, 2020
I made a lot of progress on the HTML code for the printing company website. I updated the header navigation and then spent the rest of the session adding sections to the site. I'm almost done with the HTML.
At the end of the session, I just started adding the last bit of HTML code. I was adding a form for the email sign-up page. Tomorrow I'm going to finish the e-mail section, and then I'll be able to start working on the styles for the mobile version of the site.
Today I made final adjustments for the dropdown menus and navigation items in the header navigation. I decided to change the all products list item into a dropdown menu. I forgot the dropdown class for the list item which resulted in the menu appearing at the far left side of the page instead of right underneath all products.
When I make more dropdown menus, I'll need to make sure I include dropdown classes on the li tags that will eventually be the dropdown menu so everything opens the way it is supposed to. Before I started adding code to the site, I took more time to look at more websites to get ideas of what printing companies put on their sites. I used these websites as inspiration for what kind of sections I wanted on this page. Although I've got most of these sections on the site, I'll be updating the HTML code as I work on the styles.
Conclusion
Tomorrow I'm going to finish the HTML code for the printing company website. The next 10 days of the challenge will be concentrating on getting each screen size version of the site styled and making final changes to the HTML code along the way. By day 40, I hope the printing company website will be done and I'll be ready to start on a brand new project for the last few days of the challenge.
Are you doing the Disney Codes Challenge? Share your progress and projects in the comments below.
This post was originally published on July 10, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
Latest comments (0)