Categories for Portfolio

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

WEBD 150 – Responsive mobile menus

Responsive Mobile Hamburger Menus Responsive hamburger menus are failrly easy to build. All we need to essentially do is: Build a normal menu as usual Put a hamburger menu icon in it, outside of the ul to make it easy to hide and show using display: block and display: none Make a second menu that… View Article

WEBD 150 – CSS Variables & Combinators

1. Variables Variables are used to store values that can be reused throughout a CSS document. The scope of a variable—where it can be accessed—is determined by where it is declared. Global Scope (:root) First off, what is :root? The :root pseudo class targets the same thing as the html{} selector. It targets the <html>… View Article