Categories for Lectures

WEBD 150 – CSS Animations, Transformations and Transitions

        CSS Transitons | Transformations | Animations Section 0 Introduction Section 0A – Introduction Introduction Css Animations allow us to add cool animations to our elements. We can add all kinds of different animations to our web pages using only CSS to do so using these methods, no JS involved. In doing… View Article

WEBD 150 – CSS Grid

CSS Grid Layout: A Comprehensive Guide CSS Grid is a powerful layout system that allows developers to create complex, responsive web designs with ease. Unlike Flexbox, which is one-dimensional, CSS Grid provides two-dimensional control over both rows and columns, making it perfect for overall page layouts and complex components. Introduction to CSS Grid CSS Grid… View Article

WEBD 150 – FlexBox & Organizing CSS

CSS FlexBox What is Flexbox? Flex Box (The flexible box model) provides an easier, cleaner and more efficient way to lay out items within a container. Because Flexbox is so… Flexible, it will cleanly lay out content within a container even if the size of the container is unknown. It gives the container the ability… View Article

WEBD 150 – Intro to Servers 2

Intro to Servers 2 – Web-mastery and FTP In our last lecture we took a look at hosting & servers, how to connect, server types and the basics on the file structure. However, we should discuss things more in depth because when you are out in the field, a lot of the time you will… View Article

WEBD 150 – Intro to Servers 1

Intro to Servers 1 (Linux Servers) What is a server? A server is a machine that can host resources and allow clients to access said resources. Physically, servers are tall racks of machines. They run operating systems and you as a developer can choose what OS you want to work with. You must keep in… View Article

WEBD 150 – Class Intro

Class Intro Welcome to semester 2 Learning Outcomes: Demonstrate intermediate knowledge of HTML and CSS to create functional websites. Explore code solutions for mobile devices by applying responsive strategies. Upload sites to the web. Execute CSS animations. Explore JavaScript application within HTML to achieve dynamic interaction. Apply professionalism to assignments, both verbally and visually. What… View Article

Introduction to CSS @media (Responsive Design)

There are many different tools at your disposal to make your site look good on all screens. One of the primary methods is the @media CSS rule. Simply put, using @media allows you to code different variables depending on specific situations—most commonly, screen size. This can be applied to any CSS property. If the screen… View Article

CSS :nth-child & :nth-of-type

Mastering CSS Pseudo-Classes: nth-child vs. nth-of-type When we have a bunch of elements nested in a parent, we could give each child element a class. But that is tedious! Instead, we can call upon the child elements using a pseudo-class. There are different approaches to this, and we will break down each. 1. :nth-child() —… View Article