The site I didn’t need to start everything from the beginning since I already had all the tools set up from last semester. The only new thing I set up was the SaaS, which was fun to dive into. I’m really excited and confident about starting to work with something new and building an exciting… Continue reading All set
Posts
Designspirati
I chose this design for its beautifully blended colors, which create a mesmerizing kaleidoscope effect. The vibrant hues resemble bright fireworks, yet the composition also feels calming and soothing. The balance of energy and tranquility makes it truly captivating. I chose this design because it resembles the egg from The Very Hungry Caterpillar book, evoking… Continue reading Designspirati
Bonus Flexbox Grid
To support responsive design, often developers use CSS libraries to speed there build processes. A CSS library can be a huge set of pre-written CSS that when incorporated with pre-designed HTML skeletons produce a huge array of components and layouts. To popular examples are Bootstrap and Bulma. But if you’re looking to work with just… Continue reading Bonus Flexbox Grid
Final Project Update Presentation
With only a few weeks to go in the semester I want you to create a presentation that serve both as an update to your project’s progress as well as a first draft of your final presentation. Below is a description of the final presentation requirements, you may not be ready to complete all of… Continue reading Final Project Update Presentation
Tailwind CSS Setup
This is a quick start guide for setting up a project that uses the functional CSS library Tailwind CSS. This setup allows you to write Tailwind CSS classes in HTML and whenever you save changes to the file, the compiler will add any missing CSS to your style.css file. First Time Setups Settings: search for… Continue reading Tailwind CSS Setup
Dür site v1
I’m using a common .title class for all the absolute postioned background text and then four separate modifying classes to position each title at the four corners of the page. Here’s some of the sample code:
Design2 – CSS Libraries Part 2
Topics Tutorials This tutorial teaches the fundamentals of setting up a tailwind project and working with a sample tailwind project. There are a few changes to tailwind since this tutorial, so bold values are changes. Here is a summary of the setup: Problem Set Revisit the Tweet cards project from web design 1 or a… Continue reading Design2 – CSS Libraries Part 2
design2 – css libraries and tools
Topics Tutorials Problem Set Using Bulma, build a simple default page and elements page similar to what you’ve seen in HTML5Up. For the Blog Describe which Bulma components to be the most useful for building something quickly and how you could see using them.
Font Pairing Exercise
Choose two fonts from Google fonts that will be a good pair for a heading font and a body text font. You may wish to choose yet another highly styled font for a ‘title font’ as well. Things to consider with your pairing and simple web page created: Upload a link to the simple webpage… Continue reading Font Pairing Exercise
Font Identification Exercise
Go to any website of interest and take a screen shot of a card or a page that shows the heading and body text used. You may have more than one of each. Then using the inspector identify the following traits of each font:
