Naomi Bastian Design

Tutoring

Welcome!

Welcome to the homepage for Naomi Bastian Design's tutoring resources! These assignments and tutorials are meant to serve as a supplement to typical web design and development courses, providing examples of student work and also covering newer topics or giving greater depth to coursework material. The assignments archive began as a required project during my very first web design class, but I kept it as a resource to use while working at school as a TA or a tutor. The current assignments page contains archived CIT 230, CIT 336, CIT 301B, COMM 310, and CS 371 assignments. The tutoring page is an expansion of my previous efforts, and contains CodePen posts and projects to demonstrate techniques and philosophies that have helped me as I've progressed in my own learning.

For examples of my more recent work, please visit the homepage of Naomi Bastian Design! For examples of my graphic design work and vector artwork, please visit my graphic design portfolio or my design blog.

Assignments

Assignments Archive

This is the assignments archive for Naomi Bastian's CIT 230, CIT 336, CIT 301B, COMM 310, and CS 371 assessments and projects.

These examples may be incomplete, amateurish, and/or just incorrect! If you spot any grammatical mistakes, broken links, or database errors, please let me know. These archives of my school assignments will provide evidence of how far I've come since I began studying web design and development, and can also offer examples of the kind of work I've done and the experience I have. Please only use these links as examples or references, and do not copy any code or repost any images.

COMM 310: Creating Online Media

Projects
Final Project

Final Project Demonstration

CIT 371: Human-Computer Interaction

Projects
Project 3 Video

Final Project Demonstration

Final Project

Nuptials

Wedding Website

ART 230: Typography

Insight Web Style Guide

Tutorials

Tutorial Links

This is the directory for Naomi Bastian's Web Design and Development tutorials and resources.

These tutorials have been compiled based on classes I've taken at Brigham Young University–Idaho, the HTML and CSS Book, W3Schools, CSS-Tricks, and my own academic and professional experience. I've also included resources that I've found to be helpful in my own learning process, from Flexbox Froggy to the Mozilla Developer's Network. If you have any suggestions for resources to add or you'd like for me to cover a certain topic, let me know!

Open in New Tab

Beginning with HTML

HTML is the standard computer programming language used to create Web pages. HTML and CSS will work together with content management systems, blogging software, e-commerce platforms, and plugins to generate a fully functioning website. When you look at this website, your browser is receiving HTML and CSS from the web server that hosts this site. The browser will interpet the HTML, CSS, and other code to create the page that you see! More complex web pages will also include extra content such as images, audio, videos, or animations with external content or JavaScript. However, simple websites can be achieved easily by starting with HTML and CSS.

HTML Tags and Elements

HTML stands for Hyper Text Markup Language, and provides the structure of a web page. Pieces of content such as "heading", "paragraph", "table", and so on are represented by HTML elements, the building blocks of an HTML page. An element, in turn, consists of a start tag and an end tag, with content inserted in between.

<tag>Content</tag>

Keep in mind: <tag> is not an actual HTML element, but is used on this page as an example.

Browsers will not display the HTML tags, but will use them to render the content of a web page. An HTML element is everything from the start tag to the end tag. The following example is a complete HTML element:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

HTML elements can be nested, meaning that elements can contain other elements. Every single HTML document will consist of nested HTML elements, from your Facebook page, to your blog, to this website! For example, this basic HTML document layout contains four HTML elements.

<!DOCTYPE html>
<html>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

The <html> element defines the entire document.
It has the start tag <html> and the end tag </html>. The element content is another, nested HTML element, the <body> element.

The <body> element defines the document body.
It has the start tag <body> and the end tag </body>. The element content is two other HTML elements, <h1> and <p>.

The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>. The element content is: Lorem ipsum dolor sit amet.

The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>. The element content is: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML tags are not necessarily case sensitive: <P> means the same as <p>. HTML5 standards do not require lowercase tags, but lowercase tags are not recommended in HTML, and lowercase tags are required for stricter document types like XHTML.

For a complete list of possible HTML attributes, visit the HTML Element Reference page on W3Schools.

HTML Attributes

HTML attributes provide additional functionality and information to HTML elements. All HTML elements can have attributes, but the kind of attribute that can be included depends on the element. There is a list of global attributes that can apply to any HTML element, including:

  • accesskey: Specifies a shortcut key to activate/focus an element
  • class: Specifies one or more classnames for an element (refers to a class in a style sheet)
  • contenteditable: Specifies whether the content of an element is editable or not
  • contextmenu: Specifies a context menu for an element. The context menu appears when a user right-clicks on the element
  • data-*: Used to store custom data private to the page or application
  • dir: Specifies the text direction for the content in an element
  • draggable: Specifies whether an element is draggable or not
  • dropzone: Specifies whether the dragged data is copied, moved, or linked, when dropped
  • hidden: Specifies that an element is not yet, or is no longer, relevant
  • id: Specifies a unique id for an element
  • lang: Specifies the language of the element's content
  • spellcheck: Specifies whether the element is to have its spelling and grammar checked or not
  • style: Specifies an inline CSS style for an element
  • tabindex: Specifies the tabbing order of an element
  • title: Specifies extra information about an element
  • translate: Specifies whether the content of an element should be translated or not

The HTML global attribute data is taken from W3Schools.

You may not use most of the attributes above when you're just starting out with HTML, but they do exist! Generally, however, we tend to use attributes like href, which specify the URL of the page the link is pointing to. However, this attribute can only be used with <a>, <area>, <base>, and <link>, and should not be used outside these elements. For a complete list of possible HTML attributes, visit the All HTML Attributes page on W3Schools. Just remember that attributes provide additional information about an element, are always specified in the start tag of an element, and are usually formatted as name and value pairs, like this:

<a href="http://nsbastdesign.com/" target="_blank">Naomi Bastian Design</a>

The link will display as:

Naomi Bastian Design

The href attribute specifies that the link is pointing towards http://nsbastdesign.com/, and the target attribute is specifying that the link will open in a new tab. This can be very useful when you want to show a user new content without navigating them away from your page. When exploring for new HTML elements to include in your pages, take some time to review the possible attributes that can be included in the elements. You may be able to do something you hadn't even thought of to increase usability or make your content more engaging!

Using HTML

Once you have the HTML syntax down, you can get started with creating your own webpages! You can create HTML documents using anything from professional HTML editors like Adobe Dreamweaver or NetBeans, but you can also use simple text editors like Notepad or TextEdit. To use these programs, all you need to do is open the program and begin with a simple page. For example, we could try something like this:

<!DOCTYPE html>
<html>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page!</p>
</body>
</html>

You can then save the file with the .html file extension, and set the encoding to UTF-8 if it is an option. If the encoding is set to UTF-8, it will recognize the HTML language and will display HTML characters correctly. Once your file has been saved, open the file in your favorite browser so you can view your first webpage!

HTML is a language that is full of possibilities, and it can be combined with JavaScript, CSS, and other languages to make the same kind of webpages that you're familiar with, or to create something entirely new! You can use HTML to build the framework for anything from an online retailer site, to a portfolio, to a social media site. Learning HTML will enable you to write better blog posts, understand how your favorite websites are created, and show you how to create your own pages. To learn more about HTML, check out the resources below, or take a look at my Codepen page or assignments archive to find inspiration and ideas!

Open in New Tab

Beginning with CSS

CSS is used to define design, layout and variations for web pages. HTML was created to describe the content of a web page, while CSS was created to describe the display of that content. CSS can control the display of multiple elements at once, and even control the layout of multiple web pages at once.

CSS Syntax

CSS stands for Cascading Style Sheets. CSS is defined by sets of rules, consisting of selectors and declaration blocks.

p {
color: blue;
font-size: 18px;
}
CSS Selectors

A selector will point to the HTML element you want to style. A declaration block will contain one or more declarations, separated by semicolons. Each declaration will include a property name and value, separated by a colon. CSS declarations end with semicolons, and declaration blocks are surrounded by curly braces.

If the CSS rule-set from the first example was applied, all paragraphs within the HTML page would have blue text and the font would be resized to 18pt font, like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

There are a few different types of CSS selectors, and many different ways to combine them. This is a brief overview of CSS selectors, but for more options and a better overview of specificity, check out these links:

The element Selector

The element selector selects elements based on the element name. You can select all <p> elements on a page like we did in the example above using this.

p {
color: blue;
font-size: 18px;
}
The id Selector

The id selector selects elements based on the id attribute of an HTML element to select one specific element. An id must be unique within a page, so an id selector can only be used to select this one element. To select this specific id, you must write a hash # character followed by the name of the id of that element.

#introduction {
color: green;
font-size: 28px;
}

If we had a heading <h1 id="introduction">Lorem ipsum dolor sit amet</h1> with the id of introduction, it would be displayed like this:

Lorem ipsum dolor sit amet

The class Selector

The class selector selects elements based on specific class attributes. To select elements with a specific class, you must write a period . character followed by the name of the class of that element.

.emphasis {
color: orange;
font-size: 21px;
}

If we had four paragraphs <p class="emphasis">Lorem ipsum dolor sit amet</p> but only two of them had the class of emphasis applied to them, they would be displayed differently, like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Using CSS

CSS can be placed within the HTML in three different ways: external style sheets, internal style sheets, and inline styles.

External Style Sheets

With an external style sheet, you can change the look of an entire website by only changing one file. This can be very effective on larger sites with many pages, but also has its advantages on smaller sites or other web projects. Every page that the external stylesheet should apply to needs a reference to the external style sheet file inside the <head> element of the HTML document. This reference is formatted as a <link> element with additional attributes to specify that you are linking a CSS stylesheet.

<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>

The "style.css" external style sheet could look like this:

body {
background-color: black;
}

h1 {
color: yellow;
font-size: 48px;
}

Notice that there are no HTML tags. The browser will still interpret these as defined styles for the HTML elements in the page, because of the CSS selectors that specify the styles.

Like any CSS or HTML, an external style sheet can be written in any text editor like Notepad, Brackets, or NetBeans. The file should not contain any HTML tags, and must be saved with a .css file extension.

Internal Style Sheets

Internal style sheets also have their own particular use, but be careful using these if the styles are going to be re-used! If one page of your website or one project has unique styles applied to it, you can use an internal style sheet to define these. An internal style sheet is placed within the <head> element, like an external style sheet, but instead of using the <link> element, you will use the <style> element instead.

<head>
<style>
body {
background-color: white;
}

h1 {
color: red;
font-size: 48px;
}
</style>
</head>
Inline Styles

An inline style is useful for applying a unique style to a single element. To use inline styles in your HTML, you will need to add the style attribute to the element . The style attribute can contain any CSS property. In the example below, we can change the color and the font-size of an <p> element by adding style="color:hotpink;font-size:18px;, like in the example below.

<p style="color:hotpink;font-size:18px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

But be forewarned: CSS was created specifically because HTML was never intended to contain formatting for a page. When CSS and HTML work together, you can separate content from presentation and make it easier to edit one thing at a time. When you use inline style, you will lose the advantage of having a style sheet in the first place. Having the HTML content and the CSS presentation in the same place can be useful in some circumstances, but in the event that you need to edit this in the future, it can get confusing and may not be worth it. So use this method sparingly!

Multiple Style Sheets

Using multiple style sheets can be very helpful, especially if you have pages with complex styling or an entire website to define styles for. Separating out CSS styles into different stylesheets can allow you to apply different styles to some pages and not others. This way, you can create universal style sheets with fonts, colors, or backgrounds for the entire website, but get more specific and have different style sheets for differently formatted pages or for specific sections of content. However, there are certain guidelines and best practices to follow when using multiple style sheets, just as there are for every use of CSS. For example, it is important to keep in mind that if some properties have been defined for the same selector in different style sheets, the value from the last read style sheet will be used.

This rule is observed because CSS uses cascading order. Remember, CSS stands for Cascading Style Sheets. This means that the last read CSS rule will generally take the highest priority. When there is more than one style specified for an HTML element, all the styles will "cascade" into a new "virtual" style sheet by the following rules, where the last one has the highest priority:

  • Browser default rules (will sometimes differ between browsers)
  • External and internal style sheets (inside the head element)
  • Inline style (inside an HTML element)

An inline style (inside a specific HTML element) has the highest priority, which means that it will override styles defined inside the <head> tag, inside an external style sheet, or browser defaults. This is another good reason to avoid overusing inline styles: you don't want to override other styles accidentally.

If you are using multiple external stylesheets, the last one listed will be the one that takes the highest priority. For example, if we have three different external stylesheets included within the <head> of your HTML page, the last one will take precedence over styles defined in the first and second stylesheet, and the second stylesheet will take precedence over styles defined in the first stylesheet.

<head>
<link rel="stylesheet" type="text/css" href="main-style.css">
<link rel="stylesheet" type="text/css" href="menu-style.css">
<link rel="stylesheet" type="text/css" href="gallery-style.css">
</head>

CSS is an ever-evolving language, with new functionalities and tools being developed constantly. The best way to get started with CSS is to get inspired! Looking up examples of CSS on Codepen, visiting the CSS Zen Garden, or simply looking up your favorite websites can help you see how far you can go with CSS or help give you ideas for where you can go with it. There's always more to learn and to implement, so once you have the syntax down, it's time to play and explore! Take a look at the resources included below for added inspiration and instruction, and feel free to experiment!

Open in New Tab

Coming Soon!

Open in New Tab

Layout with Flexbox

Beginning with Flexbox

The Flexible Box Module, or flexbox, is a one-dimensional layout model, dealing with either a row or a column at a time. Flexbox was created to provide more efficent layouts, by aligning and distributing space among items within a container, especially when the size was unknown or dynamic. Flex layouts allow containers to change the items within, altering width, height, and order. Flex containers can expand items to fill the available free space, or shrink them to keep them from overflowing. Flexbox is different from block and inline layouts because it can handle both vertical and horizontal layouts. Flexbox is simply more flexible (if you'll forgive the word-play), and can change the orientation, size, width, and height of layouts. This is especially helpful when combined with media queries to create responsive designs, because you can simply rearrange items within their containers at different screen sizes.

Flexbox is an entire module, not just one property, so there are more possibilities but also more complications. Some properties are meant to be set on the container (the parent element, known as a "flex container"), while others are meant to be set on the items within the container (the child elements, known as "flex items"). Complete overviews of these properties can be found at CSS-Tricks or the Mozilla Developer's Network, but this tutorial is just meant to get you started!

Creating flexbox layouts will actually begin with your HTML. Since Flexbox deals with flex-containers and flex-items, the HTML elements need to be arranged in the same way. Luckily, HTML already lends itself to creating these flex-containers and flex-items. Think of an unordered list.

<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
  • Home
  • Contact
  • About

The <ul> tag already contains the <li> tags within it. If we think of a <ul> tag as a container, the <li> tags are naturally the items within it.

To use the CSS Flexbox properties with this piece of HTML code, we are going to define the styling for the <ul>, because it's the flex-container. If we set the style for the <ul> as: ul { display: flex; flex-direction: row; }, the unordered list will rearrange itself to run horizontally instead of vertically by default.

ul {
display: flex;
flex-direction: row;
}

  • Home
  • Contact
  • About

Right now, it doesn't look like much, does it? To make this resemble a navigation bar, we can add some additional CSS to add colors, padding, margins, and text-alignment.

  • Home
  • Contact
  • About
ul {
display: flex;
flex-direction: row;
justify-content: center;
background: midnightblue;
list-style-type: none;
}

li {
background: deepskyblue;
padding: 20px 50px;
margin: 5px;
text-align: center;
}

A few lines of code later, we have a functioning navigation bar! There are other ways to spice it up, but one of the nicest perks to Flexbox is that you can rearrange content from running horizontally to vertically. If you're working with a responsive design, this can be a huge bonus! All you have to do is change flex-direction: row; to flex-direction: column; to change the direction of the flex-items. On mobile or tablet device displays, you often have much more vertical space to spare than horizontal space, so layouts must change accordingly.

  • Home
  • Contact
  • About
ul {
display: flex;
flex-direction: column;
justify-content: center;
background: midnightblue;
list-style-type: none;
}

li {
background: deepskyblue;
padding: 20px 50px;
margin: 5px;
text-align: center;
}

Flexbox is an amazing tool for creating and changing layouts, especially when used hand-in-hand with media queries. However, it's definitely a tool that requires practice! You can begin practicing by taking layouts from magazines, websites, or any other medium, and grouping content together into boxes. Get used to thinking with boxes and considering how you can change the layout with those. You can also use the resources below to find new examples or to develop your new skills!

Be forewarned: CSS Grid and Flexbox may not be implemented in all browsers. If you are designing for a wide audience, especially one still using Internet Explorer, make sure to test new pages and layouts in other browsers or check CSS selectors at "Can I use" to ensure proper layout display across all browsers. Good luck!

Open in New Tab

Coming Soon!

Open in New Tab

Coming Soon!