Coding (Markup) Example

This sample of HTML and CSS was created for JOUR 215: Web Coding at the University of Kansas in fall 2021. Future samples of this type can be located here.

A downloadable PDF with the HTML and CSS for my sample is found above.

Visual Images of Browser with Sample HTML and CSS

The above image shows the “heading 1” as well as a “heading 2.” Using “span” is shown in the “heading 2.”
Above is a table that demonstrates the use of “classes” and “rules” in HTML and CSS.
This is the first image in a slideshow. Above the image are navigational dots. In the top left corner, there is a tab that says the image # of the four images in the slideshow that is currently being previewed.
In the bottom half of each image, there are navigational arrows and a photo caption. All photos in the slideshow were taken by me, which is why there is not an attribution to a source.
In the above image, I have included more examples of “heading 2,” as well as a “heading 3” [(Try Me!)], a button that would link to another site [(CLICK HERE)] and an interactive text box that site visitors could type in.
Above is another “heading 2” and a “heading 3.” This “heading 3” has been stylized with a “class” in HTML.
The above image features a text box with “paragraph” text, an image and a caption. I have experimented with size, color and alignment here.
In the above image, the style continues as more of the section called “My Bio” is displayed.
At the end, I have typed my favorite quote. Certain words have been marked “strong,” so they are emphasized and stand out as if they are in bold.

Visual Images – HTML

Included on this page are screenshots of the HTML as seen in a “code playground” called JSFiddle.

Visual Images – CSS

Included on this page are screenshots of the CSS as seen in a “code playground” called JSFiddle.

Thank you for your time. I hope you enjoyed viewing the visual images and the HTML/CSS. Please feel free to reach out if you have any questions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: