Browse the archive
Category: DMET 155 Introduction to Web Design
HTML/CSS Reference for DMET 155/355
Basic Directory Structure for a Static Site <!DOCTYPE html> <html> <body> This is my first web page </body> </html> The first line on the…
Post Aug 28, 2023HTML/CSS Reference for DMET 155/355
Basic Directory Structure for a Static Site <!DOCTYPE html> <html> <body> This is my first web page </body> </html> The first line on the…
Post Apr 20, 2023HTML/CSS Reference for DMET 155 Introduction to Web
Basic Directory Structure for a Static Site <!DOCTYPE html> <html> <body> This is my first web page </body> </html> The first line on the…
Post Mar 10, 2023Quick Tutorial: Adobe Illustrator CC Tutorial – How to make Camping Landscape Design
https://www.youtube.com/watch?v=MZTdVUoyVPk
Post Feb 17, 2023CSS Flexbox Poster and Demo
Properties for the Parent(flex container) display This defines a flex container; inline or block depending on the given value. It enables a flex context…
Post Jan 14, 20232. CSS: Units, Connecting HTML + CSS, Typography
The cascading part of CSS is the idea that you begin to style your site on a general basis, then get more particular as…
Post Jan 14, 2023The CSS Box Model: Block And Inline/Divs and Spans
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 13, 202312. Web fonts
We have already talked about typography on the Web and about how to change typefaces, and how they look using CSS rules. For a…
Post Jan 13, 202311. Transforms: rotations, scaling and skews, Vertical alignment, Head tags and search engines, Flexbox, CSS animations, Forms, Audio, video and media
Back in 2010, Steve Jobs wrote an open letter about Adobe Flash, the multimedia tool that most of the Web was using for animation…
Post Jan 13, 202310. Positioning
When making more complex layouts, sometimes we might have to use styles that don’t fit into the usual floated layout pattern. As designers, we want…
Post Jan 13, 20239. 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