Static Files

Lesson Objectives

1. Create a static files folder for CSS/JS

Create a static files folder for CSS/JS

• CSS/JS code doesn't change with server-side data
• We can toss any static files into a 'public' directory
  • static means unchanging
  • dynamic means changing depending on data

Let's set up a directory for our static code:

1. Create a directory called public
2. Inside the public directory create a directory called css
3. Inside the css directory, create an app.css file
4. Put some CSS in the app.css file
5. Inside server.js place the following near the top:

server.js

// tells express to try to match requests with files in the directory called 'public'
app.use(express.static("public")); 

1. In your html, you can now call that css file

<link rel="stylesheet" href="/css/app.css">    

Let's try some CSS

/css/app.css

@import url("https://fonts.googleapis.com/css?family=Comfortaa|Righteous");

body {
  background: url(https://images.clipartlogo.com/files/istock/previews/8741/87414357-apple-seamless-pastel-colors-pattern-fruits-texture-background.jpg);
  margin: 0;
  font-family: "Comfortaa", cursive;
}

h1 {
  font-family: "Righteous", cursive;
  background: antiquewhite;
  margin: 0;
  margin-bottom: 0.5em;
  padding: 1em;
  text-align: center;
}

a {
  color: orange;
  text-decoration: none;
  text-shadow: 1px 1px 1px black;
  font-size: 1.5em;
  background: rgba(193, 235, 187, 0.9);
  /* padding: .25em;
  margin: .5em; */
}

a:hover {
  color: ghostwhite;
}

li {
  list-style: none;
}

li a {
  color: mediumseagreen;
}

input[type="text"] {
  padding: 0.3em;
}

input[type="submit"] {
  padding: 0.3em;
  color: orange;
  background: mediumseagreen;
  font-size: 1em;
  border-radius: 10%;
}