Sarah DyeSummer has officially started and that means a summer full of coding challenges. I decided to kick off summer with the Disney Codes Challenge, a coding challenge I created last year. Today I put together a recap of everything that has happened during the first 10 days of the Disney Codes challenge.
This post is going to describe my experience building a photographer website for Peter Parker using Sass. It will share my progress on my latest project. Right now I am building a mobile events and services website based on fictional Disney food trucks.
I did the Disney Codes challenge last year where I updated several projects I made during the first round of 100 Days of Code as well as practiced different tech skills I wasn't confident with. During the first round of Disney Codes, I made websites such as a portfolio site for Rapunzel, a restaurant website for La Ratatouille Bistro, and a movie trailer website for Rise of the Skywalker. If you would like to learn more about the Disney Codes challenge, read the official post which goes over the challenge in more detail.
Day 1: June 1, 2020
I decided to completely redo the entire website for the photographer project in 30 Days, 30 Sites. When I made this project during the first round of 100 Days of Code, I made a web page for a fictional Storybrooke Cultural Center with Bootstrap so it didn't quite fit with the photographer prompt. This time, I'm building Peter Parker's photographer web page.
For this project, I want to use it as an opportunity to build more projects with Sass and get more practice using it so I can use it more in future projects. Today I didn't get a chance to start working on Sass. Instead, I wanted to get a good head start on the HTML for the site.
I created a brand new branch for this project and deleted all code. Then I started over by adding all the links and files in the head tag I needed for this project such as Google Fonts, Font Awesome, and Bootstrap. Although I didn't use any Sass, I did take a look at the documentation to get an idea of how I can organize my files.
I will see how this setup works later this week when I start adding styles to the site. For now, my focus is on getting all the HTML code I need in the file. Today I managed to get a good head start.
The header is done and I started adding sections to the page. I'm not quite sure what to put on this site so I'm going to google photographer websites to get a sense of what others put on their landing pages so I can add more to my site. I might use some of the code from round one in some form on this newer version, but my goal is to not get too bogged down by what is on the site since I want to spend most of my time working with Sass.
Day 2: June 2, 2020
The HTML is almost done on the site! I looked at different photographer websites before I started working on this project and I noticed that a lot of sites focused on the images on the landing page. So when I started working on the code, I decided to use freeCodeCamp's image gallery guide to create an image gallery at the bottom of the page of different images.
The image gallery was the biggest addition to the project today, but I did make smaller updates by adding a headline in the banner section for Peter's job title and changing the image to fit with the theme I have in mind for the page. There isn't much HTML left to add. The last bit of HTML that needs to be added is the footer and the social media graphics.
So tomorrow I'll be able to start with the styling and mostly see if I can get Sass to work. So far I've been looking at articles on DEV and on Sass to get an idea of how I can make things work. Tomorrow I'm going to add some styles to the desktop version of the site to see how things work as well as using the Sass documentation to see if I can get any styles to appear before I start working on the rest of the styles for different screen sizes.
Day 3: June 3, 2020
I finished the footer on my web page. Before I started to work on Sass, I double-checked how my site was looking and noticed that some of the images I added yesterday weren't working. So I spent a few minutes fixing the images and getting them to appear on the site.
The rest of the time was spent trying to get Sass to work. Initially, I wasn't having much luck and none of the test styles I set weren't appearing on the site. However, I managed to get things working once I fixed my folder setup.
I took the contents out of my app and public folders and then tried to compile my files again. This made a difference and my test styles were appearing on the site. Now that the styles were appearing on my site, I started to play around with the styles for the mobile version of my site.
I found myself spending a lot of time trying to get the header styles just right. My original plan was to have the header with a background color and white text. However, I wasn't having much luck no matter what I did.
I tried changing some of the bootstrap classes and rearranging my nested code, but the background color didn't change. So I decided to leave the header the way it is and add a border instead. Tomorrow I might try playing around with the header some more to see if I can get it to work.
Once I finished the header, I managed to start working on the banner section. I got the background image to appear on my site. Tomorrow I'm going to play around with the headlines so they are centered on the page and move both headlines down a bit so they aren't too close to the top. I'll see if I can get started on the image gallery at the bottom of the page tomorrow.
Day 4: June 4, 2020
The mobile styles are almost done on the photographer's site. Today I was able to get the styles for the banner, about, and gallery sections done. I also used some time to go back and fix the header.
I got a head start on adding some of the styles for the footer. Tomorrow I'll finish the mobile styles for the footer then move on to adding styles for the medium size screens in the tablet.scss file. Although I spent time using Sass, I found myself spending a lot of time in my index.html adding more Bootstrap classes to my code.
Many of these Bootstrap classes were added to the gallery section to get the images the right size and stacked on top of each other. I also added a headline to the gallery section. I rearranged the code in the About section so the text appears underneath the banner instead of another image.
Day 5: June 5, 2020
The mobile version of the photographer site is done. I added the remaining footer styles to the mobile site. At the beginning of the session, I forgot to start Sass in my terminal so I spent 5 minutes trying to troubleshoot my code since none of my style changes were appearing on my site.
When I am using Sass, I will need to make sure Sass is running before I start working on a project. One of the challenges I faced with finishing the mobile styles was getting the Font Awesome icons to appear. Originally the icons weren't appearing on the site with only bullet points showing.
I did some troubleshooting and I realized I needed the Bootstrap nav classes for the ul and li tags. Once those classes were added to my footer navigation, the bullet points disappeared and the icons appeared. The rest of the time was spent working on the tablet.scss file and adding styles to make the tablet version of my site.
Tomorrow I will double-check all my styles for the tablet.scss file to see if there are any other changes I need to make. I did add some styles for the style.scss file, but I will finish adding those styles tomorrow when I work on getting the image gallery to work using freeCodeCamp's guide. I am interested to see if the styles I want to add will conflict with the Bootstrap classes I'm using for small and medium-sized screens.
Day 6: June 6, 2020
I'm almost done with the photographer's website. I added the remaining styles for the tablet.scss file. The rest of the time was spent adding styles to the style.scss file.
Everything was going smoothly until I got to the gallery section. It turns out that the Bootstrap classes were overriding the styles I was putting for the gallery image so I decided to remove the Bootstrap classes from the index.html file. Removing these classes created issues for other style sheets.
I went back through the mobile and tablet files to add new classes for gallery and gallery images which helped fix the images and get them back to the original way I wanted them to look. However, the gallery on the large screen version is still giving me issues. Tomorrow I plan to fix the gallery on my large screen version of my site.
I will see if I can get the image gallery to look like the one in the freeCodeCamp image gallery guide. If I can't figure out how to make things work, I will add the Bootstrap classes back to the code and create a different image layout instead.
Day 7: June 7, 2020
I finished the photographer's website today. I took a look at my styles for the different classes and noticed the issues. One was the display for the gallery being set to flex instead of grid.
This was causing the images to be inline with each other. When I changed the display to grid, the styles for the other images began to work. The other missing piece from my gallery was one of the classes for the gallery images.
As I was looking at the styles, I noticed I was missing styles for one of my images. This had one of the images being smaller than the other images. Once I added styles to the image, the size and position changed to fit with the other images.
Now that the photographer site is finished, I did get a head start on a brand new 30 Days, 30 sites website. I set up the files I needed for the new site and added new files. I was able to get a headstart on the header for the site.
Right now my challenge is getting the navigation just right. I'm not using the Bootstrap navbar classes to make the navigation so I can play with the positioning of different elements on the page. Tomorrow I will move the main headline underneath or above the navigation to how it looks as well as if it needs to be in a separate container in the header.
Day 8: June 8, 2020
I made a lot of progress working on the HTML. Before I started working on this project, I took a couple of minutes to take a look at CodePen to see what other creators considered a mobile service and event. After seeing those ideas, I decided to stick with my original concept but put in as many Disney references as I could.
The header is finished. I decided to move the headline out of the div row. Once I start with the styling, I might move the code around some more later.
After I finished the header, I started updating the rest of the website. Lots of these updates included brand-new code. I updated some of the images and headlines in the meet section.
I removed the social media section and moved those tags to the footer. Right now I am working on an e-mail section, one of the newer sections I added to the website. Tomorrow I'm going to add the button to the site and start playing around with the Bootstrap classes to get the form elements inline with each other.
Day 9: June 9, 2020
The HTML for the mobile events and services website is done. I fixed the issues I was having with the form for the email section. I had to put the form elements in different Bootstrap classes so everything would be inline and have some spacing in between.
This gave me more practice using the Bootstrap form classes and seeing how they work to make responsive forms. Once the form button was added to the site, I added a highlight section to the page. The last thing I did in the HTML file was rearrange the sections.
I moved the email section to the top so it would be the first section users would see when visiting a website. Now that the HTML is done, I turned my attention to working on the styles. Especially getting Sass to work.
I wasn't able to get Sass working on this project. When I tested some code on my site, none of the styles appeared on the site. Tomorrow I'm going to use the Sass documentation to double-check if everything is installed correctly and if things are connecting correctly.
Day 10: June 10, 2020
Today's session was spent trying to get Sass to compile correctly and get the styles to appear. I was able to get the styles to appear on the large-screen version of my site, but the styles weren't appearing on the mobile and tablet versions. I double-checked the commands I was using, but I still wasn't having much luck.
I ended up replacing all the CSS files and updating the links to the style sheets. This did the trick and all my test styles began appearing on the site. The rest of the session was spent working on the styles for the mobile version of my site.
I was able to get a head start on the header styles. I decided to change my mind about the header navigation and make a navbar. So I went back into the index.html file and added the navbar classes to my header.
I also abandoned my original idea to have the main headline in a separate container above the navigation and keep things inline so I moved the h1 tag inside the nav. Right now I am playing with the fonts and colors I'm using for the header. I think the colors I have chosen so far for this website might be too light. Tomorrow I'm going to take a look at how the completed header looks first and if I can read the navbar items.
Conclusion
Tomorrow I plan to continue working on the styles for the mobile events and services website. I am hoping I will be able to get the header finished so I can start adding the styles to the email section on the mobile version of the site. If you want to stay up to date with my progress on the Disney Codes Challenge, follow me on Twitter.
Are you doing the Disney Codes challenge? Share your progress in the comments below or using the hashtag #DisneyCodesChallenge on social media.
This post was originally published on June 10, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.
