Browse the archive
Category: AMDE 155 GN: Introduction to Web Design
9. CSS Displays @Media
Earlier in this guide, we talked about different tags having different types — some tags were “blocks” that push other tags down the page,…
Post Jan 13, 20238. Mobile-friendly designs with media queries
In one of my classes a student was talking to me about how the company she worked for had recently spent thousands of dollars…
Post Jan 13, 20237. multi-column layouts with floats: Wrapping elements using floats, Overflow,Transparency with opacity and rgba colors, Drop shadows
Wrapping elements using floats Let’s imagine our HTML is the following... <p> <img src="president.jpg"> Today, the president was very happy... </p> Here we have a <p> tag…
Post Jan 13, 20236. Let’s get mathematical: Ratios, Margins and paddings, Borders, Rounded corners with border radius, Filters
Ratios Humans are born with a natural instinct to prefer patterns and sizes that are based on mathematical ratios. Musical notes sound pleasant together…
Post Jan 13, 20235. CSS: Meet the header tag, Styling with color, Background images, Hover states, Transitions, Child selectors, Classes, Widths and heights
So far, we’ve been focusing on the content of our websites. By default, the browser gives them a style that looks like the web…
Post Jan 13, 20232. How to make a website, Recapping front-end web development, But how do you write code?
...and what exactly is “front-end web development”? Earlier we talked about the different programming languages and the two types of code, for front-end and…
Post Jan 13, 20231. Different programming languages for different tasks
It could be the first shock when you’re planning to learn to code — there are so many different languages you can use. How come?…
Post Jan 13, 20233. Let’s Talk HTML, Heading, Blocks and inline, Links, Images, White space + indentation
Why talk about HTML first? Well, we need to have some content which we can style and interact with. HTML stands for HyperText Markup Language.…
Post Jan 9, 20239. The Box Model
Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master…
Post Jan 9, 202313. Flexbox: Axes
Let’s see how the orientation of items within a flex container can be controlled using the flex-direction property. Lesson Overview This section contains a general overview…
Post Jan 9, 20231. Introduction To HTML And CSS
So here it is: it’s time to actually start making things. This section will teach you the basics of HTML and CSS, the two foundational…
Post Jan 9, 20232. Elements And Tags
HTML (HyperText Markup Language) defines the structure and content of webpages. We use HTML elements to create all of the paragraphs, headings, lists, images,…
Post Jan 9, 20233. HTML Boilerplate
All HTML documents have the same basic structure or boilerplate that needs to be in place before anything useful can be done. In this…
Post Jan 9, 20234. Working With Text
Most content on the web is text-based, so you will find yourself needing to work with HTML text elements quite a bit. In this…
Post Jan 9, 20235. Lists
Whether it be IMDB’s top 250 movies or the FBI’s most wanted, lists are everywhere on the web and you are going to need…
Post Jan 9, 20236. Links And Images
Links are one of the key features of HTML. They allow us to link to other HTML pages on the web. In fact, this…
Post Jan 9, 20237. CSS Foundations
In the previous lesson, you learned how to write the HTML that determines how a web page is structured. The next step is to…
Post Jan 9, 20238. Inspecting HTML And CSS
Being able to inspect and debug your HTML and CSS is critical to frontend development. This lesson will take us through the Chrome Dev…
Post Jan 9, 202310. Block And Inline
The MDN box model article linked in the previous lesson mentions that different display types have subtly different box models. It also mentions that…
Post Jan 9, 202311. Introduction To Flexbox
Introduction As you’ll learn, there are many ways to move elements around on a web page. New methods have been developed over the years and older…
Post Jan 9, 202312. Flexbox: Growing And Shrinking
Growing And Shrinking Let’s look a little closer at what actually happened when you put flex: 1 on those flex items in the last lesson. Lesson…
Post Nov 4, 2019Fonts & Pairing
https://nuggetofjoy.com/how-to-choose-fonts-for-headlines/ https://nuggetofjoy.com/the-beginners-guide-to-font-pairing The following are student examples of font pairing exercises:
Post May 7, 2019How to Choose Fonts for Headlines
by Jacci Howard Bear Updated July 31, 2017 Headlines and other short phrases or blocks of text are often set in display type sizes of…
Post