Some resources on CSS gradient backgrounds

A static colored background seems so tired these days. A CSS gradient background can add some pop to your page. Here are two tools to help you pick gradient colors:

https://uigradients.com/

https://cssgradient.io/

And here’s a detailed article on using CSS gradients:

Test out the backgrounds on a full page. A background that might look cool in a small box on a sample page might not go over so well on a full page. Also, watch the contrast with the typeface color.

A few notes about portfolios

Thoughts prepared prior to speaking to a group of Data Science minors working to fulfill the portfolio requirement.

The stated requirement for the Data Science portfolio:

Portfolio: DS 401, completed during the fall or winter term of the senior year, including at least three projects or assignments from courses in the minor in addition to the capstone project in which students reflect on data-science competencies.

The keyword in that requirement is reflect.

The purpose of the portfolio is as a mechanism for having you engage thoughtfully with what you have accomplished and learned through the courses in the minor.

But the broader purpose of a portfolio is encouraging you to establish the practice of reflecting about your work … and your life.

Portfolio as a practice: you will benefit greatly by shifting your mindset away from thinking about a portfolio as an academic requirement. (There will come a point where you realize that the majority of your life is no longer as a student bound to academic rubrics.) Strive to develop the practice of reflecting deeply in written form.

Portfolio as a practice in public: making your thoughts about your own learning (and failures) in a public form is intimidating, potentially revealing those vulnerabilities we hold very close within ourselves. Yet, writing in public forces us to think carefully, to express ourselves with a level of sincerity that we might overlook if we’re only dashing off an assignment that will be seen by no one other than professor. A drawback of writing in public is self-editing out any blemish that might actually be worth our own deep introspection.

We live in an era where a web-based portfolio can serve as our calling card to the world.

Writing in public on the web is a personal choice.

A part of me admire those friends of mine who have nearly kept their entire existence hidden from the world.

If you’re in a career where you have any public presence, then you owe it to yourself to establish an ongoing web-based portfolio. (And if you’re comfortable with having a LinkedIn account, then you’ve already established that you’re okay with presenting yourself professionally on the web.)

Like any form of writing, consider your audience. A web portfolio is not the medium for sharing your wild antics (unless you’re entertainer whose stature is built around crazy publicity). You have to decide your audience. A web portfolio allows you to control how you present yourself, professionally, to the world.

A web portfolio presents your interests.

A web portfolio conveys your identity–in terms of all the aspects that make you who you are as a person.

A web portfolio need not include your photograph. That’s your choice.

A web portfolio is brief.

A web portfolio should leave others wanting to know more about you.

A web portfolio is more than a LinkedIn page listing your basic stats.

A web portfolio is more ….

And that’s where the reflection comes into play.

A portfolio highlights what you want to highlight.

Over a period of years, you will find yourself editing your portfolio not just be adding content but by removing outdated content. On my own portfolio (jeffbarry.org), I no longer list my education because, I feel, that something I did 30 years ago lacks relevance to the person I am today. (That’s a nearly heretical statement from a college professor.)

[If you looked at my website, then you quickly notice that I have no reflection and very little about myself. I’m in the process of updating that site but I’m still keeping it brief. Here on this blog are many ramblings that I have posted since 2005.]

The how … how do I go about creating a web portfolio?

The answer depends upon your technical skills and comfort with learning new tools. There are several easy to use web platforms; Squarespace has a selection of pretty templates. I would avoid Wix and Weebly. WordPress dominates the easy-to-use website builders, and one could never go wrong using WordPress.

I craft my own site with hand-coded HTML & CSS. But don’t do that unless you’re really comfortable with web development. For me, web development is an essential tool. So, for me, it makes sense.

I strongly feel that you should own your identity on the web through a personalized domain name, i.e., yourname.com (or dot something). If you have a common name, like mine, someone may already have your domain name, like this guy whose name is not really Jeff Barry though I can’t complain about a guy who wrote one of the most cheerful, catchiest songs of all time.

There are many places to buy (actually, you rent/lease) a domain name: Hover, Namecheap, Name. (Avoid GoDaddy because of their questionable business practices of upselling you at every moment.) I use Hover myself.

If you use a tool like Squarespace, etc., then there are ways of connecting your domain name to your website.

If you’re inclined towards technology, then you might even pursue a self-hosted site (which could be WordPress or hand-coded HTML/CSS). In that case you’ll need a hosting service. A good company that’s focused on academic customers is Reclaim Hosting.

If you use GitHub, then a dead simple solution is to use GitHub Pages. Here’s an article describing how to present your data science portfolio on GitHub.

The concept of academic portfolios prepared by students is tied to the rise of domains, which some universities (e.g., Davidson), provide to their students. An undergrad at Davidson wrote an excellent article in 2015 on this topic: Do I Own My Domain If You Grade It? (View his site in 2022.)

Any examples?

There are all types…not all present reflections. And these are not undergraduate students. You do not want to model yourself after other undergrads. You want to model yourself after professionals in your field, after the type of person you aspire to be like.

This list is quite random, representing a variety of professional sites (aka portfolios). Almost all are academics (or were once academics). The most wonderful portfolios are by designers, but I’ve left them off this list.

Herman Sahni

Daniel S. Quintana

George Cushen

Karthik Ram

Katherine Firth

Wade Kelly

Andy South

Andee Kaplan

Robin Thompson

Eve Miguel

Julia Palacios

Samuel Jenness

Sarah C. Nelson

Sidhant Chopra

Ray Chen

Ian Walker

Matteo Lissandrini

Barton Myers

Ben Swift

John Lees

Pawel Piatkowski

Barry Rowlingson

Andrew Glassner

Paul Gribble

Ari Lamstein

Ciprian Crainiceanu

Yiping Su

Weekly Update: December 5 – 12, 2021

Inspired by bava weekly and motivated to add a bit more life into this blog, I’m starting a weekly update series.

Professional

Last week of class at W&L. I’ve been busy with grading, wrapping up courses, and assisting students with last-minute research projects. This term probably will be the last in which I’m doing so much teaching. More library technologies duties are ahead for me, and I’ll be happy to get back to a technology-focused position.

Writing 100 Virtual Reality. I’m writing a lengthy reflection on my experiences teaching first-year writing, particularly on this term’s topic of VR. Previously, my first-year writing course focused on the opioid crisis.

Data Science portfolio and independent study. Worked with an excellent student. I wasn’t able to devote as much time as I wanted to working with him. Fortunately, he’s very self-directed.

Journalism 190: Information Sources in the Digital Age is a 1-credit course that I inherited as the liaison to the Journalism and Mass Communications department. The course has been co-taught for years by our long-time senior reference librarian, who retired prior to the pandemic, and by a member of the Journalism/Mass Comm faculty; the “J-School” faculty rotate this assignment from year to year. I’ll be putting a lot of work next term into redesigning this course.

Faculty search committee for a tenure track position in Strategic Communication. Can’t say much about this other than the committee has been very busy this week.

Shenandoah Volume 71, Issue 1. The Fall issue was published at the end of the week. I do all the technical work associated with publishing the literary magazine, which involves “touching” each work that goes online. I try to reach each piece. At a minimum, I quickly browse each work for formatting. And I easily get distracted into reading the text. I’m very proud of the work I do to make Shenandoah freely available.

Tech

WordPress: Shenandoah is produced with WordPress. The theme is heavily customized. We have a long list of features to add to Shenandoah. I hope to revise the theme and create a plugin that will smooth the publishing process. That’s a big goal for 2022.

Unreal Engine: At the other end of the tech spectrum from WordPress is Unreal Engine. My daughter and I have a major initiative, Nightlight Discovery, where we are developing a game in UE. Over the holiday break, I’m hoping to make significant progress on the prototype.

Personal

Celebrated my 56th birthday last week. Enjoyed a relaxing weekend with my daughter. With each year, I grow more and more perplexed by age and the passage of time.

What I’m reading

Still Possible, a new book of poetry by David Whyte. I absolutely love his writings!

Nightlight Discovery: an open world

The game environment of Nightlight Discovery is an open world of nature, modeled after areas inhabited by wildlife but free of buildings and people. You start playing as a wolf pup but will grow up into an adult wolf, if you survive. (Most wolf pups in reality don’t survive their first year.) We’re learning a lot about wolves & building open world games in Unreal Engine, which enables us to create a realistic world of many square miles. As with any open world game, part of the fun for the player is just exploring the terrain. The screenshot is from a level of our game. We also have areas with forests, a river, and a huge cave (with bats). You can’t tell from the image but the game has wind, rain, flowing rivers, etc. Another day I’ll post a video clip from the game.

Business, Creativity & Game Engines

Every few years I adjust the focus on this blog based on my evolving interests. Here’s where my mind is for this coming year:

On this channel, I’m exploring the intersection of business, creativity and game engines.

The most exciting advances in entertainment and education over the next decade will emerge out of blending those 3 elements.

Game engines, such as Unity, are the software platforms for not only developing games but also for developing augmented reality, virtual reality and all types of interactive storytelling.

Yet, few people outside the game industry recognize the possibilities of readily-available game engines.

The global video game industry is a market valued at over $150 billion and growing. In comparison, for the film industry worldwide box office revenue was $42 billion.

The game industry consists of massive corporations with their AAA game studios as well as small, independent game developers. Indeed, these independent game developers are becoming a new creator class: solo, or a few people, small businesses offering a sustainable and enjoyable lifestyle alternative to working for someone else.

Game engines are not just about games. The same software used to create games is now being used to create VR experiences in manufacturing and elsewhere.

Game engines provide our creativity with the possibilities to create experiences, digital and in-person, that cannot be done through any other means. The creativity made possible by game engines will be the core of entertainment and learning over the next decades.

Endless possibilities will emerge.

Industries will evolve.

New forms of storytelling will engage our daily lives.

I’ve been thinking about these topics for the last 20 years. Now, it’s time to share my insights and take a deeper step into the business and creativity of game engines.

Creating an asset kit for a 3D game

Procedural and Versatile: Explore Cartegena with Vincent Derozier is a superb article detailing the steps employed in crafting a 3D environment. The article provides key visuals for explaining the process. I’m particularly interested in urban environments, which first drew my attention to this specific piece. Substance3D is a suite of products offered by Adobe for developing 3D textures. (Substance was originally a product of Allegorithmic, which was acquired by Adobe in 2019.)

Part of the Substance suite is Substance Source, which is like a stock image market but for 3D assets and textures. Adobe regularly commissions artists to design a set of materials that are specially marketed as a Substance Source Signature Release. Each release has a significant number of material types, usually 15, divided into multiple categories.

Derozier’s Substance set is available for download on the Substance Source site. An example of how these materials come together into a scene is on Derozier’s YouTube channel:

I’m new to working with 3D and what I really like about the article is the breakdown and examples that Derozier describes in the creation of this set. Read the full article but I’ll provide an outline, which I’ll adapt for my own work.

In establishing the stylistic direction Derozier wanted to pursue, he chose a “slightly idealized” realism of a specific setting. Before thinking about specific materials, he created a set of reference images. The Internet makes it silly easy to pull together a quality set of images to serve as a reference for creating artwork.

A person with no understanding of art may naively be surprised at how much digital artists rely on photographs. Some even employ a fascinating technique known as photobashing to remix a set of disparate photos into an intriguing scene. There’s an entire field of concept art and environment painting that is very useful when working with clients or part of a larger team. Or, you can do as Derozier did himself and create a sketch, either pencil/paper or in your favorite app. This rough draft is just to create a visual roadmap. Of course, Derozier’s “rought draft” sketch is pretty damn impressive!

Next, a visual mockup of the 15 materials he needed to create. He used actual photos from his reference images to show details of the chosen materials. Also, he prepared a written list to track the production process.

Then, a base mockup of the desired scene with simple shapes. A key in 3D modeling is modularity: reusing smaller shapes (i.e., assets) to piece together an overall structure. (The next time you look at a finished 3D model of a scene, look for the repeating patterns in the architecture or other elements.)

Each asset exists separately, which also allows for reuse in other projects or even sold in an asset store for use by others. There’s quite the cottage industry of 3D artists making 3D assets and selling those online.

The production phase pulls everything together into a composition. Once you have a fairly detailed composition, you might want to “paint over” the image in Photoshop to highlight the areas that still need work.

The entire article has many more details plus a lot of visuals. Read it for exploring an aspect of technology development that those of us trained as Web developers seldom experience.

As I get more and more into 3D, I’m sure I’ll find myself going back to that article multiple times.

How can I resolve my doubts about learning to code?

That voice in your head

Is this for me?
Can I do this?
I’m not good at this.

It’s natural to have doubts. But what are doubts? Do doubts really exist? Or, are doubts simply beliefs you have developed about yourself?

Perhaps, these beliefs are based on a past experience with a similar topic with which you have struggled. Don’t internalize past struggles, or even failures. Those are not indicators of your capabilities.

Accept that you have struggled with something. Accept that as an event in your past but don’t let the memory, the feeling, of that struggle define you. A doubt is a feeling. 

You are an intelligent person

Even when based on a real experience, the doubt is not who you are as a person. You are a person with intelligence. Forget about that past moment. Maybe you had a bad teacher, maybe the instructions were not clear. Maybe that moment in your life simply was not the time for you to learn that topic. Now is another time, now is another moment in your life. And if you struggle today, then tomorrow will be another new moment, a new time to start

People approach coding as it’s full of arcane mysteries impenetrable to all but a select kind. You doubt you are part of that select kind. Yet, that’s a false belief. There is no special kind of person who is “good” at coding. If you can tie your shoelaces, you can learn to code. Or, even better, if you can put on a pair of flip flops, you can learn to code.

You can learn anything if you believe you can.

Of course, everyone starts at a different point, prepared with a different set of background knowledge. But forget about that. Coding is not a competition. Learning is not a competition. That’s the problem with grades. It sets up a competitive mindset that should have no place in education. 

Focus on yourself, your mindset. Forget about any negative of the past and the tell yourself, “I can do this.”

You just need to make the commitment. Make the commitment to yourself. Recognize that your mind is an incredibly powerful computer. In learning to code you are simply feeding your mind a new set of instructions: a set of instructions called computational thinking.

You are activating, pressing the power button, that part of your brain that is made to understand coding. Don’t let that other part of your brain, those negative thoughts, bad feelings and doubts defeat you.

We all struggle everyday with regulating our emotions and we all struggle everyday to focus on work, learning, and productivity. Don’t let doubt defeat you.

Take a moment and look at the computer closest to you. It could be a laptop or even a phone. Think about what it is. What is it? It’s a metal box. It has a battery, or some source of external power. The interior of the box is engineered with circuits that pass along electrical charges that paint images onto a screen. 

The computer has similarities to the human brain. Our brains have millions of neurons transmitting electrical charges forming thoughts, emotions, images, actions. The computer, unlike our minds, does not get distracted by all those thoughts and emotions.

Every application on a computer, everything a computer does, has been programmed by a human. The computer does what it has been told. An app is a set of instructions.

In learning to code, you are learning how to give instructions to a computer, you are learning how to teach a computer about your imagination.

Okay, maybe, you’re saying, “Okay, that’s a good concept. I get it. But how do I really code? How do I program something? Everything seems so arcane. The syntax is confusing. I’m getting frustrated with the simplest mistakes. Is a freakin’ semi-colon really that important?!”

Congratulations. The first step in coding is your mind casting away any doubt that you can do this. And these doubts will creep in every time you make an error in your code. We all make mistakes in coding everyday, even those of us with over 25 years of experience.

The difference: programmers are confident that they can resolve a problem. They recognize that there are mental strategies for thinking about a problem and that there are many resources for learning how to solve the problem. And they dive into that challenge and figure out what they do not know.

Here’s a mental strategy

* Take a breath. Take another deep breath.

* Say to yourself, “I can do this.”

* Look at the problem. Break down the complexity into small, discrete steps that you can figure out.

But what if you don’t know where to start. You are in the fog of unknowing. Look for what is closest to you, reach out to what you do understand. 

Let’s go through an example.

Say, I have this web page.

I want to change the background-color, the creamy yellow. You’ve already learned an essential question, “Can the background color change?”

You know there’s a bit of code for that. You know it’s CSS because you’ve learned that CSS is the set of instructions that control the style and design of a web page. You cannot remember the exact command. You get confused: is it color? or, no background-color? You google for the answer. You’ve learned that programmers google all the time. Sure, a lot of things they have remembered over time. Some things become part of your memory when you do it a lot. But the internet is always there as a reference source for figuring out how to do something. But you do need to know how to evaluate the sources that you find. Many sources on the Internet have become outdated or, perhaps, are even more confusing than necessary. 

Back to our example. You know there is a code to specify color. You remember the term hex. But there is no way that anyone can remember the millions of hex codes. You look it up. You’ve learned how to do that. Let’s change it from creamy yellow (#F0F3BD) to a bluish sapphire (#05668D).

You realize that in the CSS you set the hex code on the HTML body element to change the background color of the page.

body {
  background-color: #F0F3BD;
  margin: 0;
  padding: 0;
  font-family: Georgia, serif;
}

Changing background-color on the body element from #F0F3BD to #05668D changes the background color of the page.

You may be wondering why the top section is still teal green. Let’s look at that part of the HTML:

  <section id="top"> 
    <h1>Hey, You, Welcome to My World</h1>
  </section>

Note the ID #top on the section. And the corresponding CSS:

body {
  background-color: #05668D;
  margin: 0;
  padding: 0;
  font-family: Georgia, serif;
}

#top {
  background-color: #00A896;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

Be sure you understand what is happening in that CSS code.

Let’s go further. Let’s look at your web page. You have two sections labeled “top” and “bottom”. Now, we want the bottom section to change color when the mouse moves into that section. (“Let’s set aside whether that’s a good idea or not.”)

You think, “How do I…?” Now, don’t go immediately to google and type in the question that you have. That’s not computational thinking. Do not doubt your ability to think up a possible solution. 

Let’s think about this.

We know that a web page consists of HTML elements. Those elements can be styled with CSS. And we also know that those HTML elements can be further styled with class names and ID names. That is a core set of knowledge about HTML and CSS that has not changed for decades. And it’s not going to change in the future.

What do we know about JavaScript? 

Based on what you know, you know that JavaScript controls the behavior of a page. But you also know that you  can use CSS to change the color of an element on hover. Remember, how a link color can change when you hover over it with a mouse? You should ask yourself, “Can I use CSS for doing that or do I need to use JavaScript?” 

In programming, there are usually more than one way to do something. One way may be more efficient. Another way may be easier. One way might present more problems down the road. While there is usually a best practice for each technique, as a beginner, you do not want to get stuck on figuring out the most optimal way of doing something. Many people would disagree with me on that. But when you are learning something new, you don’t want to get paralyzed by perfection. The same way is true when you are developing a prototype or a small project. Don’t get paralyzed by perfection. And remember: what you are developing at this stage is unlikely to be used by millions of people. It does not need to be so highly optimized that it can process thousands of hits per second. You are learning. Focus on getting something to work. Later is the process of refactoring, of improving the code. 

How can we programmatically control the behavior of a web page.

Let’s further define “programmatically”:

You know that a program, code, is a set of instructions. It’s a set of instructions written in a specific programming language. In this case, we are using JavaScript because JavaScript is a specific language with the specific function of working within an application called a browser, like Chrome or Safari or Firefox. There are a lot of other programming languages, but we’re not going to go over those now. Most importantly, do not confuse JavaScript with Java, which is an entirely different programming language. Other than having similar names, the two languages are not the same. If you are talking with an experienced developer and you say, Java, when you should be talking about JavaScript, then you will lose all credibility. Be sure you know the difference. 

How do you use JavaScript programmatically? What is really happening?

The browser is an app, though we often don’t think of it that way. It’s an app that downloads HTML documents and presents those documents onto a screen (within the browser). The app also downloads and reads a CSS file to determine the layout and appearance of the document. Built inside of every browser is JavaScript. JavaScript can interpret your code, your set of instructions. JavaScript has the capabilities for processing a script to change the appearance or behavior of a web page. 

Let’s go back to our example of changing the background color for the bottom section when the mouse hovers into that section. 

The browser, like any app, is smart. It was programmed to do certain things. In addition to download and styling documents, the browser keeps track of a lot of information that is happening. The browser stores all that information as “properties”. The values of those properties can be accessed programmatically, in other words, by your code.

Let’s look at some these properties. A browser gives us a console to view parts of the code. You are already familiar with the Inspect element of Chrome. In Chrome, open up the Inspect tool by right clicking on the web page. Once you have the Inspect tool open, click on the word Console to display the console box.

The console box is an interactive in which you can view and run JS commands. The console is really valuable in debugging (i.e., troubleshooting) your JS code since it can give you clues as to what is (and is not) happening in your code.

One of the most important aspects of JavaScript is that the browser makes available all sorts of properties that can be manipulated with JS. We’re going to look at a few properties as examples. Be sure to have the https://jeffreybarry.github.io/easygithubsite/ web page open in Chrome, and have the Inspect tool open to the Console.

Exploring the DOM

The Document Object Model (DOM) is the most important part of understanding how JS manipulates the behavior of a web page. Using the console, we will walk through some examples of how JS examines the DOM. At this point, the goal is for you to grasp the concepts behind how JS accesses different parts of a web document. Keep in mind: if JS can access a specific property of a web document, then JS can change that property. The change in the property can have a visual effect on the screen.

My recommendation is that you read through this section, try the examples in a console on your own laptop, and then later come back to this section as reference material when needed.

In the console box is a prompt, as indicated by the greater than (>) sign. You type commands into the console box at the prompt and then hit enter/return to run the command.

Type the word “document” and hit return. You should get something like the following:

The document command has returned the document object. You can reveal the contents of the document object by clicking on the triangle next to #document. When you do that, you will see the HTML document:

Now you know that every time you see one of those little triangles, then you can click to reveal further details. Click on the triangles next to head and body to reveal the full HTML document.

Most often, you will only be accessing a specific part of a document. JS has many valuable ways of doing that. We’re just going to start touching on a couple of methods here. Let’s get just the body element. In that case, simply type document.body in the console and press return:

Remember that the body element contains the visible parts of the web page. But, more often, you will want to get a very specific part of the body. Notice how the HTML elements are structured in a hierarchy. That tree-like hierarchy allows you to drill down and retrieve specific elements. Let’s say that we just wanted to get the section with the ID bottom. Take a look at the following screenshot of the console, and see if you can understand what’s happening:

The command to get the bottom section is document.getElementByID(“bottom”); remember, we are only using the word “bottom” in the command because that is the actual ID name. If the ID was named something else (like “panel”), then we would use the word “panel” instead of “bottom” in the command. Make sure you understand that. For practice, in the console try, getting various elements by ID from the web page.

In addition to document.getElementByID, there are several other handy methods for retrieving parts of an HTML document object, such as

  • getElementsByTagName
  • getElementsByClassName

Storing values in variables

Every programming language has the concept of a variable, which allows you to store a value. Storing values in variables makes it easier to do things with those values. For instance, we can store the section “bottom” from our previous example in a variable named bottom. (There are several ways of declaring variables as well as best practices and rules for naming variables. We’ll talk about those later.) Here, we are just introducing the concept. And you can try this in the console:

(When you press enter, you will get back “undefined” but don’t worry about that, for now.)

The variable makes it easier for writing code. All HTML elements have many properties, and those properties can be accessed via JS. For instance, all the CSS settings of an element can be accessed through JS. You access the CSS styles of an element through the adding .style to the end of an element variable in JS. For instance, to see the property styles for the variable we named “bottom”, simply type in the console: bottom.style

The screenshot only shows a partial list of the dozens of style properties accessible via JS. Note that you are only seeing the style property names. You are not seeing the values of the style properties because the JS is not actually reading the CSS stylesheet. (We’ll come back to that in a later lesson.) Meanwhile, you can experiment with changing the background color for the bottom section by typing:

bottom.style.backgroundColor = "red"

You also can use a hex code in place of “red”. For simplicity, I simply used a common color value. As you can see in the screenshot below, the background color for the bottom section has changed to red.

It’s important to note that any changes you make via the console are not permanently applied to the document. Console changes only take place on the computer’s display. When you refresh the page, the change will disappear unless you add it to the actual code.

The takeaway so far is that we have learned that the console can be used for debugging and quick testing. Now, let’s look at how we make an actual change to the code using JS that will transition the background color to red when a user hovers a mouse over the bottom section of that page.

User Interface Events

The concept of events happening in the user interface is another very important aspect of JS. We’ll go over this in more detail but, for now, here’s a brief introduction.

An event is when something happens inside the user interface of a web page. For our example, the event we’re listening for is when the mouse hovers over the bottom section. When that event occurs, then we are going to code an action to take place. That action will be to change the background color of the section.

Linking HTML to a JS file

Just as with CSS, we want to put our JS code into an external file. JS code files have the extension .js. Also, there should be no spaces in the filenames. Additionally, I prefer to group all my .js files for a site into a subfolder named “js” for JavaScript. The links to JS files are placed inside the body element of an HTML document and just before the closing body tag:

Pay attention to the structure and format of the script tag and the link to the JS file. Your JS file may have any name. In this example, I used “main”.

What’s in a JS file?

A JavaScript file is just a regular file, just like HTML and CSS are regular text files. To start, just create a new file in your code editor and give it a filename with a .js extension. Then we add the code:

var bottom = document.getElementById('bottom');
bottom.onmouseover = changeBackgroundColor;

function changeBackgroundColor() {
  bottom.style.backgroundColor = "red";
}

That’s it. That’s our complete JS file for changing the background color of the bottom section to red when the mouse moves over that section. Of course, this is a very simplistic example. We will be breaking down more complex examples in further detail.

Introduction to Bootstrap 4

Using Bootstrap

The current version of Bootstrap is 4.5; new versions come out regularly. When you’re looking at documentation on the web to figure out how to do something in Bootstrap, be sure to note the version number. Version 4 is very different from version 3. So, a lot of older advice about Bootstrap can lead you in the wrong direction.

Let’s walkthrough a page created with Bootstrap 4. First, here’s the plain page without any Bootstrap code:

It’s quite boring: some links at the top, a full-width image, and a paragraph of text.

Here’s the same page with Bootstrap:

Notice the navbar is looking nicer, and the paragraph is well formatted. Plus, this file also uses the free Font Awesome to add in those iconic links to GitHub, Twitter, and LinkedIn.

Before we take a close look at how Bootstrap works, here’s my own web page using this same code:

On my site, I opted not to use a navbar. I actually have a lot of different web sites, so I wanted my personal branded page to be minimal and distinguished by a unique image.

This code is freely available in case you want to use it for your own site. See the code repository at https://github.com/jeffreybarry/bootstrap-hero and a live version of the site: https://jeffreybarry.github.io/bootstrap-hero/bd-hero.html

Code Walkthrough

Let’s take a look at what’s happening.

https://www.youtube.com/watch?v=SpRgAZxkQaY

Step 1 in using Bootstrap

Since Bootstrap is a CSS framework, keep in mind that it’s really just a bunch of CSS code that you can freely use. How do you use? Well, how would you use any CSS code? You have to link to the CSS file for Bootstrap.

Bootstrap makes this really easy for you. Just go to the getting started page on the Bootstrap site. Look for the CSS link. There’s a convenient copy button that copies the entire link to your clipboard to make copy-and-paste super easy.

Be sure that you’re always using the latest production release of Bootstrap. As of this writing, it’s version 4.5 You can locate the current version number in the navbar:

Google searches often will point you to an outdated version number, so be sure to check.

Now that you’ve copied the Bootstrap CSS link to your clipboard, you simply want to paste it into the head section of your HTML file:

There are a few things happening here in this head section. Let’s look at certain line numbers, but focus on line 8:

line 7: links to Google font
line 8: links to the Bootstrap CSS file. Note that the file extension at the end of URL in the href is simply .css. Again, remember, that Bootstrap is mainly just a CSS file that someone else developed for you to use.
line 9: links to Font Awesome, which is also just a CSS file.
line 10: links to a special CSS file for the code walkthrough. (You will not be using this link in any of your files, but I included it so that you could see how it works.)
line 11: links to an overall styles.css file for my website
line 12: links to a specific bd-hero-styles.css for this page.

The lesson learned through all these links is that an HTML file can link to multiple CSS files. Very important: the order in which the CSS files are listed in the head section determines the order in which the browser reads the files. Remember that files listed later overwrite any earlier CSS code. This is very important to remember since it may trip you up if you put the Bootstrap CSS after your own CSS file. In that case, none of your own CSS code will appear on the web page.

Also, you can and most likely will want to combine the contents of styles.css and bd-hero-styles.css into a single styles.css file. For a project I’m working on, I needed to have the files separate. But on your site, you’re unlikely to have that need.

Step 2: Creating the navbar with Bootstrap

Navbars can be a bit tricky, especially when developing one from scratch in plain CSS. Indeed, the convenience of the navbar code in Bootstrap is one of the reasons I use Bootstrap.

The Bootstrap documentation provides sample code for various types of navbars. You can copy/paste this code into your own project. That documentation page can be rather confusing when you first look at it.

Step 3: Creating containers in Bootstrap

In this step, we will go over the initial step in defining a layout in Bootstrap: setting up a container for the grid. Containers, as the name suggest, contain the grid that controls the layout of the content. In other words, containers also contain the content. . A web page may have one containers or multiple containers. Containers can be nested, but in most cases you don’t use nested containers.

How do you define a container in Bootstrap? Remember that Bootstrap is a set of CSS code. So, it comes with a .container class. You add this .container class to an HTML element in the body of the HTML page. Most often, you will add the .container class to an HTML element such as main, section, article, or div.

By default, the .container class comes with padding that provides an attractive left and right margin. That makes the content look centered on the web page without you needing to do anything else.

In some cases, you will the content to stretch all the way across a page without any margin. This is most common when using an image that you want to fully span the width of the page. You implement this style by using the class .container-fluid instead of .container.

Terms. Be sure to understand the following three terms when working with grid layouts.

Viewport: the part of the web page that is visible within the browser. The viewport is only what you see at a particular time. The viewport does not include the entire web page if you have to scroll to see the rest of the web page. The browser automatically knows what parts of the page is visible on the screen. This information, known as the viewport, is very useful in developing web pages, particularly when you add interactions or behaviors that you only want to start activating when a person scrolls into a certain area of the page.

In terms of layout and responsive design, the viewport keeps track of the width of the visible page within the browser.

Breakpoints: A breakpoint is a specified width of the viewport, e.g., 960px. When the browser is adjusted to go beyond or below that width, i.e., breakpoint, the design can respond with a change of layout to accommodate the smaller or larger width. This is where responsive design comes into play.

Min-width: the viewport width in pixels at which

Bootstrap sets sizes for the following widths as max-width and breakpoints:

Small
≥ 576px
Medium
≥ 768px
Large
≥ 992px
Extra Large
≥ 1200px
Min-width breakpoints: top row

When use the class .container, the width of the container changes depending upon the width of the viewport. While this may seem confusing at first, this feature allows you to specify in your CSS different layouts for different widths. Obviously, phones have viewports with smaller widths than laptop and desktop computers. That’s where having your content in a container that can automatically adjust based on the viewport width is really helpful.

Creating Grids in Bootstrap

Always keep in mind that Bootstrap is a set of predefined CSS classes that you can use in your HTML. Bootstrap allows you to easily define a grid that is 12 columns wide. And you can add as many or as few rows as you need.

To define a grid, start with the container. Then you define the number of columns, and then a row.

<main class="container">
<section class="col-10 offset-1">
<div class="row">
<h1>This is a heading</h1>
<p>This is a paragraph of text</p>
</div>
</section>
</main>

The code above shows a simple Bootstrap grid that is 10 columns wide, and that is offset by 1 column on the left margin. The offset provides extra margin.

Grids, responsive design, & CSS frameworks

This articles provides an introduction to grids, responsive design, and CSS frameworks.

Grids are a fundamental part of design that makes your life a lot easier. The second part of the article will talk about responsive design: or, how web sites adapt (or respond) to different sizes of screens. The web designer and developer have to plan and decide how the site responds, and then implement the code to make it happen. And that’s where CSS frameworks come into play, which we will cover in the third part of the video. CSS frameworks are freely available sets of code that other, very experienced developers, have created for us to reuse in order to implement a quality responsive design. In other words, you don’t have to reinvent the wheel. But there’s still a lot of thought that goes into using a CSS framework. In the course, we’ll focus on the most popular CSS framework: Bootstrap. This post you’re now reading provides a context for understanding why we’re using Bootstrap.

Why grids for design layout?

A bit of graphic design history is in order. Utilizing a grid is one of the best steps you can make to improve your layout. That’s common knowledge among designers. But everyone has to learn about grids at some point.

Grids provide a consistent structure for organizing and aligning content. Don’t be misled into thinking that a grid implies everything is just boring rows and columns like a spreadsheet. The grid is a concept for organizing content. A grid actually offers a large variety of layout possibilities, even possibilities that don’t at first even appear to be a grid.

For learning more about grids, particularly in print design, I highly recommend Thinking with Type.

What is a grid?

In some ways, all of us have been learning to compose with a grid since elementary school. Remember that lined paper on which you first learned to write, or perhaps that you even write on today (if you still write by pen and paper). Each of those horizontal lines represent a row that helps you keep the content aligned neatly.

Designers, though, tend to use columns mostly. Think of a newspaper layout. Perhaps some of you have never actually read a print newspaper. But think about how columns divide a page into vertical parts.

Combine rows and columns and you have a true grid where items can occupy multiple blocks either horizontally and/or vertically. You also can have grids within grids.

Grids have been a consistent element of layout since long before even the early days of the printing press, and before the age of illuminated manuscripts. In the early 20th century, advances in printing led to new types of publications.

“Modern man has found in illustrated newspapers and magazines a new source of delight.”

The New Typography (1928), Jan Tschichold

If illustrated newspapers and magazines formed new sources of delight for the early 20th century, then the Web with its colorful, interactive, motion-driven apps has surpassed every expectation and promises to keep evolving into even more delightful (and, perhaps, frightening) experiences.

Jan Tschichold emerged as one of the foremost thinkers to ever impact the design of print publications. He argued that “the enormous importance of magazines today requires us to give them the most careful attention. Since today more magazines are read than books, and much more important matter appears only in magazines, there are many new problems, of which the most important is how to find a contemporary style for their production.”

In describing the thoughtful placement blocks of text and images Tschichold stated an approach:

Constructive, meaningful, and economical (= beautiful)

Jan Tschichold

Nearly 40 years after Tschichold articulation of what constitutes a beautiful layout, Josef Muller-Brockmann produced a series of definitive guides that provided detailed instructions for grids. Out of that came the landmark work Grid Systems, which is essential reading for anyone involved in working with grids.

Responsive design

When the web started gaining popularity back in the 1990s, computer monitors were more or less the same size. But as smart phones, then tablets, came out in the 200s, web design got a lot more difficult. Developers had to account for devices with different size screens. The complexity of design and development for mobile devices required many modifications to the code, which allowed for sites to look good on every device. Honestly, it was a painful period in web development as it required knowledge of many obscure techniques in CSS. Code became clunky and more difficult to maintain.

Fortunately, developers started sharing bits of their code on the Internet. That eventually lead to the emergence of CSS frameworks: systematic collections of CSS code that can be freely reused for improving web development.

The landmark article Responsive Web Design by Ethan Marcotte (2010) identified the initial techniques for adapting web sites to different devices. The term “responsive design” became adopted to describe that process. While the technical aspect of Marcotte’s article are now dated, the concept remains the same.

CSS frameworks = responsive design + grids + web design

By this point in the course, students have gained some experience in creating HTML files and working with CSS. They’ve probably noticed that a lot of aspects are repeated over and over again when starting to develop a site. Years ago, before frameworks, us developers would have some base code that we would copy over when starting a new web project. The first framework that I started using a lot was YAML CSS. (You don’t need to bother with that, I am just noting if as a reference for my own historical work.) I also used the 960 grid system. That approach made a lot of sense to me. And, of course, I often would build sites out of WordPress and theming, but that’s a topic for another course.

Have you noticed that a lot of websites look similar or have similar features? That’s likely because they’re using a template or a framework like Bootstrap.

CSS frameworks significantly changed the way I do front-end web development. There was a time when I mostly used Zurb Foundation for most of my own work, but I switched over to Bootstrap since it’s easier for students to learn. Since these students have extremely limited design skills (at this point), Bootstrap enables them to create an attractive site with a the wider range of built-in styles that comes with Bootstrap. (And I switched to Bootstrap because I felt that I should be using the same framework that I taught.)

Of course, part of my former preference for Foundation was that I wanted the built-in styles to get out of my way. I needed the framework to handle some of the heavy lifting of the layout that I prefer not to bother with myself. But, now I’m mostly use Bootstrap but do know that there are other options out there. A very popular CSS framework is Tailwind. And, increasingly, many developers are not using a CSS framework at all but using the CSS grid capabilities built into the Web standards. But I feel like that’s a bit complex for students new to web design. So, for this class, don’t worry about anything other than Bootstrap.

Next, we’ll take a close look at actually how to implement Bootstrap in your code. You’re going to be pleasantly surprised at the difference it makes.