Animated Flexbox
Interesting CodePen I came across…might be useful to someone!
Search Results for: flexbox
Intro to Design Patterns
Reusable Solutions to Known Problems In web design, a design pattern is not a visual “pattern” (e.g. a background image of repeating shapes and colors). It’s easy to see how one might immediately think of this when they put the words design and pattern together. Originating from software engineering, a web (UX, UI) design pattern …
Web Design Studio
A Short Three Week Intro to Web Design This is the home page for a beginner-level course designed for upper school students at `Iolani School interested in learning the basics of web design and development in a studio-based learning environment. Through a combination of lessons and hands-on activities, students will learn about underlying core web …
Set Summer Goals
Summer is the perfect time for students to recharge and get ready for the future. Below are some tips, advice, and resources to consider taking advantage of in-between semesters. Take Care of Yourself Get Healthy. Establish a healthy personal routine that includes exercise, eating healthy, and getting plenty of sleep regularly. Start by being mindful …
Create a Featured Projects Portfolio Site
Showcase select projects by coding an online portfolio site from scratch There are many different ways to share your work online. If you are a web designer with front-end web development skills looking to showcase your talent, one of the best ways is to custom design and code your own portfolio site from scratch. In this …
Create a Static Student Website
Build a simple personal website from scratch, writing every line of code by hand, from scratch. This is a beginner-level set of lessons, with a focus on the essential basics of front-end web development. It does not cover any advanced concepts or technologies. Through a combination of brief overview lessons and hands-on activities, students will …
Web Design for All Ages
An introduction-level web design and development course designed for students of all ages with no experience in design or coding. This is a beginner-level course with a focus on the essential basics of web design and development. It does not cover any advanced web design concepts or web development technologies. Through a combination of brief …
Positioning and Layout Tests
Hands-on exercises to help understand different layout techniques Check out the codepen examples below, each with multiple ways to center content. Be sure to delete the css (or comment it out) line-by-line so you can fully understand the impact of each css property and value. Centering Horizontal Centering Note how it’s just one line of …
Web Layout Techniques & Strategies
A brief overview of the challenges that web designers and front-end web developers face when laying out content, including designing for multiple screen sizes and choosing between different CSS positioning and display techniques. When it comes to layout, the primary difference between designing for the web vs. designing for print is the size of the …
Create a Simple Image Grid Portfolio Site
Display your work by coding an online portfolio site from scratch There are many different ways to share your work online. If you are a web designer with front-end web development skills looking to showcase your talent, one of the best ways is to custom design and code your own portfolio site from scratch. See a …