- Completed Day 2 of #30Days30Sites – Event Invitation. I created a simple wedding announcement landing page with an RSVP button using HTML and CSS. I feel a bit out of practice on the design side, which was also the most challenging part of this project. The requirements were unclear so I essentially created a user story on my own – Iris and Barry wanted to announce their wedding and make it easy for friends living outside of Central City to RSVP.
- Pushed today’s project to GitHub!*Day 1 was a portfolio building project. I skipped it since I already have one up and running.
- #30Days30Sites Day 3 – Tourist Attraction. I decided to make a website for the fictional Beach City from the show Steven Universe. I did a Google search to find a list of tourist spots and checked out their websites then sketched out a basic design based on what I found. The site would include a jumbotron featuring a nice image of Beach City, a blurb about the city, and upcoming events tourists would want to see.
I know that screenshots of unfinished work aren’t as cute, but I am impressed with what I accomplished in 1-2 hours of designing and coding. This will be a great before image once I go back and fix it up.
- #30Days30Sites Day 4 – Product Site.
I decided to clone the Ipsy site.
One thing that was really cool to do was the rotating product name. For this, I used CSS animations.
While I really like how this clone looks full screen, I have to admit that I didn’t do much in the way of making it responsive. I added Bootstrap when I got to the footer columns and added a container-fluid class, but not much else.
I noticed later on that the Ipsy website does something pretty cool in making the site responsive – the products in the background image change location in the collage according to the screen size! However, it also seems to get kind of buggy – I had to refresh the page each time I resized it in Chrome. The next challenge I see is making that a bit more seamless.
- Restaurant Menu
For this project, I decided to clone the Hello Kitty Cafe menu site!
I’m actually pretty pleased with this one. For one – I was coding a tad bit faster than I had the past few days. I had most of the site done in the first iteration.
One of the big challenges I saw was in the responsiveness of the site. For images like the donut icon, I created a media query to change it’s size – it is the full width of smaller screen sizes and less than a quarter of larger screen widths.
Full width on my 15″ laptop, a lot of elements appear to be within containers with left and right margins. On smaller screens, there were less (or no) margin values. I used Bootstrap’s container class
- A “Rest Day” was built into #30Sites30Days which was not only helpful to avoid burnout, but convenient – I had plans that kept me out of the house and away from my computer all day. By the time I did get back home, I prioritized sleep over coding.
The first time I tried this challenge, days like this frustrated me. I felt like I had failed if I missed a day, regardless of the reason. That “all-or-nothing” paradigm was compromised my progress and my confidence, and I accepted defeat prematurely. This time around, though, I am much more mindful
I worked on the styling of the Restaurant Menu – making it just a little more accurate and nice to look at.
Updated the readme for my 30days30sites GitHub repository with links to live demos of each site I have built so far. I also wrote this post!
Goals and Expectations for Week 2
- Continue #30Days30Site projects. I am enjoying seeing the progress I’m making in my speed and comfort just in this short amount of time and I want to see it continue. I plan on picking up from the Day 6 challenge and building a total of 4 – same as the previous week. One thing I want to challenge myself to do is use less Bootstrap – it’s an amazing tool and I enjoy using it, but I also want to make sure I’m comfortable with plain ol’ CSS.
- I found this course on creating CSS images. I think CSS art is amazing – I know you’ve all at least heard someone who is just not a fan of CSS. It’s hard! Then, there are folks out there creating illustrations using nothing but CSS. So cool.
There are 6 sections to this course and I would like to finish at least 1 by the end of the week.
- Continue to push to GitHub as often as I create.