Fall 2018 HTML Toolbox Challenges

Emma

Trish

Seamus


Carly

Hannah

Animated Challenges

Rule Challenge

Jess

Create an image that tells a story (heart warming, funny, sad, tragic, etc) that relates to a quote/saying that you live by. To do this, you can only use 2 div tags and 1 span tag. Place your quote somewhere on the page if you feel it is necessary to include the quote, however, the class should be able to judge the quote’s tone by the image itself.

 

Zen Garden One – A Short Defense

I chose a calming theme for my first zen garden project. I believe the precise order of the page and the use of pastel greens, blues and purples help to give a calm and orderly appearance. The background is very light and airy with no hard edges to distract the viewer. The use of darker purples and greens allows the text to be easily read. Navigation is on the right, so the user doesn’t have to search for links at the bottom of the page. Here is a link to my first Zen Garden.

Challenge Set 3 2016

Animated Skull by Antoinette - note your version should animated the eyes moving and changing colors.
Animated Skull by Antoinette – note your version should animated the eyes moving and changing colors.

 

eye roll by Cameron note the eyes should be animated
eye roll by Cameron note the eyes should be animated

eye roll by Cameron note the eyes should be animated
eye roll by Cameron note the eyes should be animated

eye roll by Cameron note the eyes should be animated
eye roll by Cameron note the eyes should be animated

 

Post-it by Anna - note the text on the post-it notes should be editable
Post-it by Anna – note the text on the post-it notes should be editable

Demo: CSS Dropdown Menu

I chose to create a dropdown menu using CSS. The menu should have a list of links that appear when you hover over the parent div. You can make the menu have as many links as you like. When you hover over each option, the background color should change as an indicator of which link you are about to click.

HTML
Make a parent div to hold everything- the main button and all the links that will appear when you hover over it. Mine is called “dropdown”.

Inside that div, make a button that will contain all of the links. Mine is called “menu”.

Also inside the parent div, but not inside the button, make a div that is the parent of all links that appear when you hover over the button. Mine is called “dropdown-content”.

Inside this div, create as many links to other pages as you want using .

Close all divs by using two

tags. This is all of the HTML needed.

CSS
Start your CSS with an id for your button. In this case, mine would be #menu. Use an id because it is unique. This is the only element that is visible at all times. Style it with background colors, changes to the text, and any other changes you like. How the button looks does not impact the functionality of the dropdown menu.

Next in your css, make a class for the div that holds all of your links. Mine is .dropdown.content. Add display:none to hide all of this until you hover over it. Add a width and background color.

Add .dropdown-content a. Adding “a” means these declarations will only affect links. Style the links however you want, but be sure to add display:block. Adding text-decoration:none stops the links from having an underline or color change when clicked.

Next, add the rule .dropdown-content a:hover. This will only make changes to the content when you hover over it. You can add a color change here so that each link’s background changes when you hover.

The final rule will be dropdown:hover .dropdown-content. Add the declaration display:block. Without this, the dropdown menu does not appear on hover.

Challenge set 2

Color Change panda by Lindsay
Color Change panda by Lindsay

 

Background change with window resize by Zane
Background change with window resize by Zane

Background change with window resize by Zane
Background change with window resize by Zane

Week 1 Reading Questions

The standards of the W3C are not really standards, but merely recommendations that have become widely accepted as standards. It brings standards with it that will allow your website to be structured and read on most any browser safely and give you some direction for design.

Guidelines for a great markup include DOCTYPE, headers, titles, specifying the language that you will use to run your website, as well as some other features of the webpage. Generally, it is good to have less in your markups and keep it simple.

The benefits of standards are that as a designer we have something to go off of. We aren’t just fed a project and then let out in the wild to fend for ourselves. It gives us a starting point that we can grasp onto for the beginning of our work and then it allows us to mold the standards to our liking as we see fit. W3C’s standards are just good guidelines so we have some direction of how to begin at the start of our work.

Week 2 Questions

  • What did the standards of the w3c provide?
    • The W3C developed standards for code that were intended not to function as laws but to establish rules and guideline to provide consistency in code. Web developers who use the standards first hand created the w3c standards. Their main goal was to ensure long-term growth for the web.

 

  • What are some general guidelines for great markup?
    • Hyper Text Markup Language (HTML) is used to create structure to text documents and then CSS is applied to add design elements. Browsers interpret these documents is specific ways using the guidelines created by w3c. In order for the code to function properly all elements and attribute names are written in lower case. It is also required that all attribute values are quoted in order to be read by the browser. Another common standard is that all elements are ended with a slash.

 

  • What are the benefits of standards?
    • The obvious benefit of the w3c stands is the ability for web developers to have a standardize language that allows for consistency when coding. Applying web standards to your code allows for greater visibility in web searches. The set structure of HTML elements makes it easier for search engines to access and evaluate the information. Another benefit that is more audience related is the importance of accessibility. The web is used by many people with disabilities, by using the provided standards also allows web pages to be understood and accessed by people using browsers other then the usual ones such as voice browsers that read web pages aloud to people with sight impairments.

Chapter 1 Questions

The standards of the W3C provided clear guidelines for designers and coders to follow to make sure their sites are widely viewed and assessable from many platforms and also allowing precise visual control.

General Guidelines for great markup include using a DOCTYPE, specifying a language/character set, titling it, using proper elements, avoiding div-itis, minimizing markup, and using class and id appropriately. Using a DOCTYPE helps browsers identify the markup language used for the site. Specifying a language /character set tags your document with a human language which browsers will use to filter through results based on the language used. Titling the document is saved as the link description and is showed in the users browser window and bookmarks. Search engines also use titles as main keywords when generating site traffic. Using proper elements means to markup the document using HTML elements according to the structure of the page content. Avoiding the overuse and misuse of div tags is to not replace more appropriate HTML tags. If a heading tag fits best and describes the content then one should use that instead of a div tag. A div tag should be used more as a reusable, styled container in order to separate sections in a page. Minimizing markup means to only have the necessary tags and elements that make up your page and to trim unneeded markup. This will create a smaller file size and allow it to get onscreen faster. Using class and id properly helps CSS and JavaScript attach correctly to HTML elements. An id can only be used once per page as apposed to a class, which can be reused.

Some benefits of web standards include smaller file sizes and quicker downloads, increased portability, better page accessibility, and having precise control. Having smaller file sizes can happen when you move your markup into CSS. This enables browsers to cache the CSS styles so the page loads quicker. Increased portability happens in the way you format your CSS styles. Without CSS, the basic elements are properly formatted for a mobile version of your site. With CSS, you can format it for many different screen sizes and present it differently according to the sizes. This gives you a bigger window of opportunity to design it according to your target audience. When proper HTML elements are used, the markup is accessible and it will follow 90% of the World Wide Web Consortium content guidelines and be available to a wide audience. CSS allows designers to have precise control on the look and movement of the site.

HTML Reading Response

What did the standards of the w3c provide?

The standards of the World Wide Web Consortium provided a sense of consistency in the process of designing websites.  This made it easier for web designers to make a complex page and feel reassured that it would work properly on different browsers and operating systems.

What are some general guidelines for great markup?

There are seven main guidelines for a great markup.  The first is to use a DOCTYPE.  This identifies what markup language you are using to your browsers and the users.  The second is to specify a language/character set.  This marks your page with a particular language so that it doesn’t get translated a bunch of nonsense.  The third is to title your page.  This makes sure that your page will be titled in a browser or in a bookmark so that it isn’t just another generic page.  Fourth, users must use the proper elements.  This means that you use the right HTML for the right part of your page.  For example, you do not want your header to actually have your footer in it because it can easily cause confusion when trying to fix or change something in the long run.  The fifth thing is to avoid div-itis.  This means do not overuse the div or span tags when there is something more proper to use in its place.  This jumps back to using the proper elements as well.  The sixth thing is to minimize markups.  This relates to the last two guidelines in saying use only what you need and minimize the extra fluff that could cause slow downloads and huge files.  The last guideline is  to use class and id appropriately.  If you use an id on something that will be used over and over again, you are going to have to make more and more ids and adding unnecessary fluff to your page.  Instead you use a class and you only need one to do the exact same thing.

What are the benefits of standards?

Standards have many benefits.  One benefit is that standards help to make smaller files and therefore quicker downloads.  Another benefit of standards is that it increases portability. Css standards have specifications for different media types such as phones or computers.  This changes the look of the page based on the media type and makes it work more efficiently for that specific media.  A third benefit to standards is better accessibility.  With so many new browsers popping up its difficult to stay current, but with standards its like a “one-size-fits-all” kinda thing where your page will work on almost any of the new browsers available just because of the standards.  Lastly, standards lead to precise control.   With the Css standards, you can position things anywhere you want and make them look just the way you want with precise control over your page.