Selected Topics

Purpose:

This page will serve as a space for HTML and CSS topics that require more attention than we have had time to cover so far. Each topic will be discussed and accompanied with hand-on practice.

Web Design Resources

This is a list of recommended websites and other resources that you can explore to enhance your experience in the class. This list is occasionally updated.

Link to general resources

 

Another good resource to be aware of is CSS Defaults from W3Schools. Knowing where to find the default values of some of the HTML elements can be good for trouble shooting problems.
w3schools.com/csSref/css_default_values.php  

Special Underlines

Remember that underlines should only be used for hyperlinks. Otherwise, it might confuse users into thinking that it's a link. You might be interested, however, in some fancy underlines for special purposes.

digitalocean.com/community/tutorials/css-text-decoration

Dropdown Menus

In this practice exercise from Chapter 7, we will use 16_navigation _2_tier.html as a model as we code the menu from scratch. Let's begin the discussion and get some starter code.

More information

 

Brand Manual, CofC

Students, clubs, alumni, and employees from time to time will have the need to create designs which reflect the College of Charleston's proper colors. It's not a good idea to guess the hex or RGB of maroon. Instead, a designer should use the brand manual to learn about the colors, typography, and a lot more about our brand.

Take a look

For instance, have you ever wondered why you often see that gold color included in CofC designs? It's because #bfa87c is on the college's primary color palette.

---

23 Year Old Evolution of our Website

From 2000 to 2023

 

Typing on an Image

One way to type on an image is to set the image as a background. Then you can simply use margins and padding to position the textbox. It’s OK to do it that way.  However, a more effective way of typing on a picture is to use CSS positioning. See the example:
Type on a picture

Download the Word File that contains the code.  

 

CSS Animation

Animation Practice

* We will start with a very brief overview on a slide presentation.

* Before going to the presentation, please unzip THIS FOLDER. Save it in your assignment folder because you'll be submitting it.

 

 

Slide Shows and Image Galleries

Slideshows and image galleries are great ways to show multiple images. Except for the simple galleries, however, they require other languages such as JavaScript and jQuery. On the main webpage, I've shared the Fresh Take presentations with you, and hope you'll explore even if just a click-through to glean some knowledge.

 

Also, please open \BOOK_EXAMPLES\ch15\06_animations\index.html to see one that works with CSS only. Then open css/styles.css. Then change "overflow: hidden" to "overflow: visible". I hope to get a chance to do this with you so that I can explain what's going on.

 

Beyond the Basics:

The fancier and more interactive slideshows usually require more frontend development languages such as JavaScript. However, by doing the basic exercise from this textbook, you have strong insights into how they work. Until you get a chance to learn JavaScript, you can also find free sources online. Examples:

1. https://wowslider.com/demos.html
   I purchased this a few years ago and still use it for some websites. It has a free version, which places a small credit stamp at bottom of slides.
   
   
2. W3Schools has a few that are not as fancy, but the good thing is that they are highly customizable. Both contain "readable" JavaScript.
1. www.w3schools.com/w3css/w3css_slideshow.asp
2. www.w3schools.com/howto/howto_js_slideshow.asp

 

 

 

 

 

---