When you want to set what font is used to display text you set the font-family property. The value for the font-family property is a comma separated list of fonts. Here is an example: Font Stack The list of fonts in the value for font-family is often referred to as […]
Code
24 posts
Previously we showed some basic CSS to make an image responsive. All that does is allow the image to resize as the element that contains it resizes. This means that you have to add the image at the largest size it can possibly be. The techniques below allow you to […]
Here are the steps to convert a project that doesn’t use Sass to use Sass. Step 0: Make sure you can compile Sass If you haven’t already figured out a way to compile (technically transpile) Sass into CSS then you need to do that. The simplest way is to use […]
Every website uses anchor tags to style links. This is an example of a way that you can use Sass to quickly style links. You can define the link color with your other colors for your site and then by changing the Sass $link-color variable you’ll change the color for […]
Today we are going to do some introductory activities and then get into two new topics that you will be able to apply to the final. Midterm Project Presentations Quizlet Gestalt Principles: Connectedness and Similarity Sass Introduction Midterm Project Presentations Please post links to you GitHub Pages to the comments […]
As you may have noticed, writing CSS can get long and repetitive. As you start to add styles for layout, type, page sections, media and more the .css file gets longer and longer and harder to modify. To help manage this and add some flexibility to CSS people created CSS […]
In order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units. This allows the layout to expand and contract to fit the width of the browser window. Flexible Media: images, video […]
Links on a web page are made through an anchor (a) element: When we’re styling them in addition to styling the basic a element you can also style different states of the link: visited: what it looks like when someone has already cliked the link before hover: what it looks […]
The examples I’m going to use are from the Listamatic web site. http://css.maxdesign.com.au/listamatic/ This site is out of date, but in this case that’s a good thing. It means that our navigation will work in older versions of browsers. Navigation is essential to your site and you want to make […]
A big part of graphic design in general and the web design we do in this class is communicating a message to a particular group of people (audience). The Gestalt Principles were created to help explain how people make sense of what they see. They are particularly useful for web […]
Class on Wednesday, October 2, 2019 (we had no class on Monday 9/3/19 due to school holiday) Note: We believe that those of you experiencing login issues related to the OpenLab should now be able to log in. Please try and let me know if you are able to or […]
Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example: The […]
Today were are going to go deeper into typographic hierarchy. PART 1 What is Typographic Hierarchy We will look at and discuss my (updated) post on Typographic Hierarchy: https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/16/typographic-hierarchy/ PART 2: Examples and Inspiration Next we will look at the following for examples and inspiration related to typography and hierarchy: […]
CLASS 6 on Monday 9/16/2019 Today we are going to look into typography and how to implement it on the web using CSS. Typography Basics We will start with looking at typography basics. This post covers that and more. Don’t worry if you don’t pick it all up right away. […]
These are some of the more commonly used properties for typography and creating typographic hierarchy. Font (Typeface): This controls the font that is used. Also see the information on fonts in the CSS section of the Web Design Resources. CSS Property: font-family Example: font-family: "pt sans", sans-serif; https://developer.mozilla.org/en-US/docs/Web/CSS/font-family Font Weight This controls the weight (boldness […]
CSS Fundamentals As you come in to class today visit this post and start trying to play the CSS game it links to. We will play a little in class and talk about CSS basics. Files at the END of class: Here is a zip of the HTML and CSS […]
CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts. Getting Started Guides These guides are designed to help you learn Grid. They all teach […]
Files From Class: DOWNLOAD: Here are the files we created in class based on our sketch: https://www.dropbox.com/s/q5n75j2ffp1bxxp/Bonobos-inClass-9.9.19.zip?dl=0Wireframe Sketch: here is a pic of the wireframe from the board. I converted it to a PDF. https://www.dropbox.com/s/vpsbsbs5mvhzvnw/Bonobos-Wireframe-Sketch-.pdf?dl=0 For the homework you would upload two files like these, the HTML and a Sketch […]
Play Game: https://flukeout.github.io/ This is a web game that requires you to write CSS Selectors. It’s a fun way to test your knowledge of writing selectors for CSS. It also explains the selectors so it can be a good learning tool as well. By the end of this class you […]
