How to: Get started

  1. Subscribe to the newsletter to read about upcoming sessions and get invited to them.
  2. Make a user page so that you have a place to store links to your Sunday Sites. If you’re using glitch.com to host your user page, then your user­name is the first part of the URL (*yourusername*.glitch.me) and can be reached at sundaysites.cafe/~*yourusername*. If you’re not using Glitch, I suggest sending an email to me letting me know how to link to it from SundaySites.cafe.
  3. The newsletters usually arrive on Wednesdays or Thursdays before up­coming sessions. They contain a few words about the state of the project, links to interesting stuff I come across and last but not least, information about the session.
  4. Participate in the Zoom meeting by clicking the link you got in the news­letter. The sessions usually take about three hours.
  5. If you can’t participate in the Zoom meeting, you can still use the form at the bottom of the first page to submit your Sunday Site. The form opens for sub­missions when the newsletter arrives and closes on the following Tuesday. If you missed the deadline, just send me an email with your username and the link to your site.

How to: User Pages

Every member starts out by making a user page. This is where you keep the links to your Sunday Sites (all of which should also link back to your user page). If you are using Glitch for your user page, you can either access it on yourusername.glitch.me or on sundaysites.cafe/~yourusername.

Here is some code to make you started, but please make yourself at home and add as much stuff as you like! Want to make a dream journal, list your favorite fruits or go crazy with CSS? Go ahead!

        
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>~yourusername (same as the name of the glitch page)</title>
      <style type="text/css">
        /* Put your CSS here */
      </style>
  </head>
<body>
  <h1>yourusername</h1>
  <p>
    Welcome to my user page for
    <a href="https://sundaysites.cafe/">Sunday Sites</a>.
  </p>
  <h2>My Sunday Sites</h2>
  <li>
    <ul>
      <a href="https://your-first-sunday-site.glitch.me">
      https://your-first-sunday-site.glitch.me</a>
    </ul>
    <ul>
      <a href="https://your-second-sunday-site.glitch.me">
      https://your-second-sunday-site.glitch.me</a>
    </ul>
  </li>
</body>
</html>
    

How to: Sunday Sites

Host your Sunday Sites wherever you want, but I recommend using Glitch, because it’s free, easy to use, has a built in HTML editor and it updates your site in real time (this is really handy if you want to be included in the live view during sessions). If you get stuck when making your site, you can get help from one of their community members. Also, if you want to use a standard text editor instead of the built in one, you can use Visual Studio Code together with this extension.

Another good and free service is Netlify, and there are lots of other alternatives to choose from if you are curious or looking for something with a specific feature.

        
<!-- Put something like this somewhere on your site  -->

<p>
  This is a 
  <a href="https://sundaysites.cafe/">Sunday Site</a> 
  made by
  <a href="https://sundaysites.cafe/~yourusername">
  yourusername</a>.
</p>



<!-- Or put this footer before the closing body tag and change 
the styling to something that looks good on your site-->

<footer style="position: fixed; bottom: 0; width: 100%;
padding-bottom: 0.5em; font-size: 1vw;">
  <p>
    This is a 
    <a href="https://sundaysites.cafe/">Sunday Site</a> 
    made by
    <a href="https://sundaysites.cafe/~yourusername">
    yourusername</a>.
  </p>
</footer>
    
    

How to: Center a background image

It can be frustrating to work with background images, especially when you want to center them inside a responsive div or as the background for your entire site. Here is a solution that seems to work most of the time.

        

div {
    background: url("image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}