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 […]
Posts
102 posts
Most of the web is text so much of what you have to design is text. A typographic hierarchy helps the user to quickly scan a page and find information. Also, done right, it will make the page more visually attractive. Typographic Hierarchy tells the reader two basic things: what text is more or […]
This is a LONG list of web fonts. It’s meant to be used as a resource that you can come to when trying to find the right fonts for your web sites. Fonts with multiple weights These fonts have at least six weights including normal and italic versions Sans-Serif Alegreya […]
In your sites you generally don’t want to use more than 2 or 3 fonts. More than that can start to look a bit chaotic and can represent too many different tones. This video talks about choosing fonts and also talks about hierarchy and some other basics about typography. The video is just […]
This assignment will be submitted on Blackboard. Instructions are also there. You need to complete Assignment 2 before you complete Assignment 3. The assignment is to add CSS Grid Styles to the HTML files you created for Assignment 2. We went over this process in Class 5. You can find […]
In this assignment you will be repeating the group exercise we did in class 3 but on your own and with a different site. STEP 1: FIND A SITE Find an example responsive site that is NOT made by one of the large tech companies (apple/google/facebook/amazon/Microsoft/samsung/twitter/instagram). STEP 2: CREATE SKETCHES […]
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 […]
Class 3: Thursday, September 5, 2019 Today is a special meeting day on the class because the College is running on a Monday schedule even though today is Thursday We are going to pick up where we left off on Wednesday with learning the basics of actually creating and writing […]
All of your websites for this class will follow this basic folders structure. The following is a list of folders with the kinds of files that are in them: Note: except for the Project (Root) Folder all files and folders should be (a) lower case, (b) have no spaces in […]
Class 2: 09/5/2019 Today we are going to get more practical with HTML and practice writing it. We will also talk about learning science, start discussing responsive design and layout and take a short practice quiz. HTML Refresher The presentation on HTML from last week can be found here: https://www.dropbox.com/sh/2qqbhb9sb1w653n/AACjG7ORjctXlBxftA6vpKiia?dl=0 […]
Extensions add functionality to Brackets. They are also free and easy to install. I suggest you start with the following. We will go over them in more detail throughout the semester. These extensions are generally not installed in the BMCC computer labs. Emmet: High-speed HTML and CSS workflow. Beautify: Format JavaScript, HTML, […]
When we tried getting into our accounts on the first day, everyone was not able to log in. The College is working on a fix, but there is a possible solution that you can try right now. When you log in, remove the stu. part of your email. So if […]
Wednesday, August 28, 2019 Today in class we are going to get to know each other, the class, create accounts we will use throughout the class and even learn some HTML. The general class flow will be: Introductions (Me, the class, you) Accounts (use this link to help with that) […]
I created and am still updating this interactive table that helps to show the elements and explain what they are and how to use them: https://stein-bmcc.github.io/periodic-table/
We will use the following accounts during the course of the class. BMCC OpenLab: https://openlab.bmcc.cuny.edu This is where the class content will be and it will be a hub for most of the action for the class. You will need a special code to complete signup for the OpenLab. Prof […]
This is a series of videos I made showing the fundamentals of HTML and how to write it. HTML Fundamentals Part 1 This covers the basics of what HTML is and it’s purpose. Duration: (11:10) HTML Fundamentals Part 2: How to Write HTML In this video I cover writing HTML […]
