Author: Erin McMichael

CSS Animations

This week was tough as the CSS animations could easily take up an entire semester on their own. I’d love to dive into them more and create sites specifically designed with CSS animations.

From what I learned, it seems there are endless ways to make objects on your page move without JS. Of the properties that I learned, keyframes was the easiest to understand. I’ve worked with animations on my digital portfolio in Webflow so could see the similarities in how to accomplish the same thing in CSS.

Parallax

Parallax is one of those things that seem to be on every webpage nowadays, and with good reason—it looks great! I enjoyed learning about parallax because I know I will be using it in future designs. It’s modern and adds extra flair to your site. I learned to be careful in how often it’s used, as it can take away from content if you’re not careful.

Parallax would be perfect for a photographer or someone who wants to showcase a lot of images. The caveat is you would need to also understand how to properly optimize images so that they don’t take too long to load. Prof. Mead also mentioned that you are essentially forcing people to download images, so be cautious of how many you are using if they don’t add value to your site.

Final Project

For my final project, I’ve decided to go with Option 1, which was part of our midterm project. We created four one-page designs for desktop, tablet portrait, tablet landscape, and mobile in Figma. I’m curious how I can make what I created come to life in HTML & CSS. I want to follow the project all the way through.

My midterm project is a spa site, and is already created in Figma. I am happy with what I came up with, but excited that I have another opportunity to create something entirely different with the second site I need to build. I’ve chosen to do a catering business because food brings me joy and I can envision the site being totally different from the original spa page, giving me some more creative license to do as I please.

This week we took our Zen and Sac designs and made them responsive. This part was really fun because the structure was already in place and all we needed to do was mess with the code a bit to make it responsive. I see now why you always start with mobile and work your way to tablet and desktop because 80% of the work is already done!

Continue reading “The Responsive Website Journey Pt. 2”

This week was a real doozy for me. It’s hard to stay focused with everything else going on in my personal life, but I really am trying my best.

Continue reading “The Responsive Website Journey Pt.1”

Over the last few weeks, we’ve been working on our Midterm project, which is a design project using software like Figma. I chose to do Figma because I want to become more comfortable with the program, and there are more tutorials available on the web for this software than others. I also figured that having Figma experience + projects will look good on my resume for future work. I’d like to do more work in Figma and really get a handle on the animations so that I can create moving prototypes.

I can’t express enough how much I liked working on this project. I just love working with design software and have so much fun learning new ones. I’ve only worked with Figma once, and it was just while watching a tutorial last semester so I didn’t do very much with it. Being able to get into the grit of the design is partly why I enjoy working with design software. I love tweaking the minute details of a design and getting the alignment just right, choosing the perfect font type and colors to give the right vibe, and adding shadows and borders on an image only to delete it because it’s not quite right. I love that process, and it’s something I really enjoy doing.

I am a tad bit concerned for the final project, however. I know that we can use this design for our final or come up with something entirely new. But, after putting in so much time into these designs, I don’t see why I’d choose to do something else—except that I may be making the coding of this site a bigger challenge than I’m ready for. I can see 100 different places where Flexbox and Grid could be used, and I would bet $100 that we have to create our final project using Flexbox or Grid, and maybe Float if we only use it once. I’m still feeling a little shaky about Flexbox and Grid and the final will really be the ultimate test, especially give how long my site project is. I may need to cut some of the site out and shorten it, so I don’t run out of time creating it. I’m looking forward to the challenge!

Lastly, we have been working on responsive design. Given that I’ve only seen it in the lectures and done the assignments along with the tutorial, I feel like I understand it fairly well. It seems easy enough, anyway. Placing the code that you want changed inside of the media query makes sense. And having limits on how small or large the browser can be seems sensible. I can’t see any issues learning about it so far, and I’m hoping this is one of those things that just clicked with me 🙂 We’ll find out!

Over the last few weeks, we’ve really dug into layout techniques like flexbox, grid, float, and positioning. The one I struggled with the most was positioning. It doesn’t inherently make sense like the others do, so I will need more practice with that one before it really sticks. The other three I actually started to enjoy working with toward the end of the two weeks.

Flexbox was hard at first, and it remains challenging, but it’s starting to click. It really started to click once we started working with grid. I’m not exactly sure why, but it could be that I’d had a week prior to do some challenges and it was just more practice. Or maybe the combination of adding flexbox and grid during one of the challenges helped me understand where I could use different layout techniques. Either way, it’s starting to make sense. At first, I really struggled during the challenges, so to help me I played the Flexbox Froggy game and that helped me figure out which flexbox rules to use when I was stuck.

I feel like I understood grid right away, though it gets tricky. During the challenges, the last one was really tough and I was able to figure out part of the solution. I needed to peak to the other slide to get some help, but I was okay with that because I was able to make sense of the solutions. Once I saw the solution, it was more of an ah-ha! moment rather than a huh? moment.

We started our Midterm projects this week as well. I chose #5, which was a spa website. It’s perfect because I’ve been so stressed out in my life the last few months, all I’ve been dreaming of is going to a spa and getting the whole treatment. So creating this website is really fun for me and I’m daydreaming a bit while doing it. I spent all of this past weekend working on it and I enjoyed it so much. I love playing with design software and Figma is really easy to use. I could literally just do that all day long.

These past few weeks were extremely hectic in my personal life, and very challenging in school. I’m proud of myself for keeping up the way that I have and am happy that I’m doing pretty well in the class!

This week we learned more about uploading files to the server, styling our html files with css, and downloading and converting typography from the web into our html files. I had the most issues with uploading files to the server because I don’t fully understand the process. However, it’s one of the main topics I want to learn because it’s vital to the web design process so I’ve been spending a lot of time researching it this week.

What I did learn from uploading my files to the server was just how important it is to name and organize your files. I made the mistake of copying my files and putting them into a server folder, because there wasn’t really much instruction on that bit, and ended up deleting files that I thought I didn’t need. I deleted files because the server folder system confused me and so I decided to go back to my original filing system, deleted the copied files, but then it completely messed up all of my files for some reason and I spent hours trying to get my files back. I still don’t fully understand how having a server folder is different than just having a root and source folder within the files you are uploading, but I am working on understanding that.

The typography module was also really confusing because when something didn’t work the way it was intended, I would scour the web trying to troubleshoot why it may not be working. The font-squirrel video showed different information than the transfonter files I downloaded. The files looked different and I wasn’t sure if I was doing something wrong or if it was my computer or what.

Just feeling a bit lost and in the woods this week for class.

This week we started getting into the weeds with CSS. We learned about inheritance, the cascade, and specificity, CSS reset vs. Normalize reset, and started styling our own html documents with CSS.

I learned that inheritance is when child elements take on styling that their parents passed down to them, just like how genes are passed on from parent to child. The Cascade is the mechanism that relates to how CSS rules that are in conflict with each other are sorted out by the browsers. And specificity is the process by which the browser determines which rule to apply to an element to solve conflicts. These concepts determine how your browser solves conflicts when you create new CSS rules that override the browser’s CSS. Hierarchy and specificity of your elements is ultimately how an element ends up being styled.

CSS reset is a stylesheet that removes all of the default styling from a page and normalize reset only minimizes the differences with the browser’s styling. Either work, but it depends on how much work you want to put into styling your document. The advantages of CSS reset is that it really forces you to really style everything rather than accept the default, can more purposely make decisions as to how to design site, and is easier to follow design standards. The downside is you have to style everything. Normalize has it’s pros in that it saves time for styling, especially for newbies. The disadvantage is that you are constantly fighting the browser’s styling and end up needing to create separate rules for overriding the browser’styling, and you may miss something.

The takeaway this week was that HTML and CSS are the bedrock of all website design, and to gloss over them is missing the very basics of website design. We need these programming languages in order to create websites, so I’m excited to be starting from scratch because I feel like I’m learning the fundamentals the old fashioned way, and as the saying goes “if it ain’t broke, don’t fix it”. I feel empowered to keep going!