Increasing Specificity If… Avoiding Monotonous Work Imagine you have a website with 100 pages, and you want to style the last LI in the main menu. Imagine visiting each page and adding a class to the last LI. Yuck. Modifying The Work of Others Imagine that you have a content managed site running WordPress or […]
Category: CSS
For this assignment, I want you to produce a mockup of an online magazine site. This exercise will have five pages and will be completely responsive, adapting to screen size and device. The magazine focus is up to you. Make it realistic. If you like bicycles, make it a cycling magazine. If you like soccer or food, […]
For this exercise, you will create a one-page layout. Please download the files you will need for the exercise: the screenshots the images The images in the layout in the screenshots will be different than the supplied images. Do not worry about that. There is not a starter HTML or CSS file. Instructions on what […]
For this exercise, I want you to make a Responsive HTML & CSS Resumé It must be a single page of HTML and a single CSS file. It will list: This could include a picture, or references, links to work you have online (such as portfolio sites), links to LinkedIn profiles, etc. The main concern […]
First, please watch these Loom videos in the order implied by the numbers in their titles. Then download the starter files for the exercise. After opening the project in your code editor, you’ll see two html and two css files. The html and css files are actually identical. Task One Using the HTML & CSS […]
First please download these files. Included in the files you downloaded is a screenshot file from a previous version of the exercise, but please ignore that. In this exercise, you will mark up and style a single page with a lot of information about the great Nigerian musician Fela Kuti. I have recorded a series […]
For this code challenge, download this zip archive. Open the index page in a browser. It will look like this: Your task: in the scss partial _your_work.scss, edit a single css selector: main make the page look like this, but only above 1000px page width (click image for full size). Limitations: You cannot edit the […]
Categories
CSS Blend Modes Tester
In the following exercise, you will explore the following areas. css blend modes css variables (also known as custom properties) grid auto-fill and minmax() advanced form styling animation transitions js change event js event targets more visual studio efficiencies In the project, you will make a CSS Blend Modes Tester: a tool that will allow […]
Categories
SASS Mixin Exercise 2023
For this exercise, please watch all the Loom videos at the following locations. Code along with the examples, or you will not remember anything from the videos. There is a lot of content in these videos, so it would be best to watch (and code along with) them over a range of days. You will […]
For this code challenge, please download this image. For the paths to be consistent, put the html file, the image, and the css file in the same folder, and use relative paths ( no starting / ). Put your CSS inside <style> tags in the head of the document. Don’t link to an external stylesheet. […]