M3T4.MEDIA Homepage Project Template
As mentioned in the syllabus, you will be coding a "homepage" for yourself online. The assignment is to create your own online "profile", not as it's defined by a 3rd party platform like Instagram, Tinder or Behance, but instead as you define/interpret the concept of an online profile. The Goal of this project is to consider more deeply what it means to have a "presence" online, to critically examine aesthetic conventions on the web and to experience the process of coding something from scratch, not in the interest of becoming expert coders, but instead to provide context and perspective for the course’s larger digital literacy goals. That said, here's how I will be evaluating this assignment:
The Tech: Over the course of the semester we have been learning to code (from Binary to HTML to CSS), this project is an opportunity to apply what you've learned. Again, our goal is digital literacy, so I'm looking to see that you understand the "basics", I'm checking for agency not proficiency, specifically:
- Is your website accessible on the Web? Meaning if I enter your URL into my browser does the website show up.
- Is your HTML and CSS code in the right place? (
<meta>tags in the head,
<p>tags in the body, CSS either between
<style>tags or in a separate CSS file, etc.)
- Is your code clean, easy to read and indented properly?
- Is your code syntax correct? (are all the
;, etc where they are supposed to be)
The Theory: We've had a lot of theoretical discussions about our tech ecosystem. We've talked about what communities online used to look like in the early days of BBSs and how they've evolved into social media as well as the various factors and politics (copyright, open-source, privacy, business models, etc) that have informed this evolution. Now that you are aware of these histories and politics, given a blank canvas (ie. an HTML page) and no limits (this isn't an Instagram profile or squarespace template) how do you want to represent yourself to the world? You can think of this site as an "online business card", pitching who you are, what you do and linking to all your relevant accounts. Or you can choose to be more mysterious, poetic or amiguous with your online presence, it's up to you! I'll be specifically looking at:
- What aesthetic choices did you make? Does it look like any other portfolio page? or did you use CSS to do something less conventional? (Does it look like Instagram? GeoCities? Something else entirely?)
- How do you choose to represent yourself? What should remain private and what should be made public? Though we've been coerced into sharing specific pieces of our personal data on other platforms, given a blank slate you decide what to share and not to share.
- Are you aware of your influences? If you appropriate content or ideas from others, do you give them credit? (hint: whether you're copying images or code, leaving "comments" in your code is a great way to give attribution)
1. "fork" this repo
To get started with this template you first need to make sure you're currently logged into your GitHub account. If so click the "Fork" button on the top right-hand corner of this page in order to copy+paste this repo into your own account. Once you've "forked" this project you'll now be able to remix it.
2. rename your repo
The next thing you'll need to do is change the name of your repo by clicking on the "settings" tab on your forked version of this repo. Change the name from
[YOUR_USERNAME].github.io. For example, my username is
nbriz so I would change my repo name to
nbriz.github.io. Once you've done that you should be able to visit your page on a browser by visiting http://YOUR_USERNAME.github.io (again, replacing where it says YOUR_USERNAME with your actual GitHub username).
3. "clone" your repo
Once that's complete it's time to start working on your project. You'll first need to "clone" your repo onto your computer. To do this launch a Terminal (use your spotlight to search your computer for "Terminal") and type
cd (don't forget the space after "cd") then drag+drop the folder in-which you want to clone your project. Once the path to that folder appears in the Terminal press enter (your terminal should now be in that folder). Next, copy the clone URL (which you can access by clicking the green "Clone or download" button) from your GitHub repo page and then back in your terminal enter
git clone https://github.com/USERNAME/REPONAME.git (where the URL is the one you copied from GitHub).
4. work on your homepage
You should now see your repo's folder appear inside the folder that you cd'd into. Now you can open up your project like we always do by drag+dropping the folder on the Atom icon. Or by opening up Atom (making sure no other projects are open in Atom) and opening your project via Atom's menu bar. You can now work on your page and "commit" changes and upload them to your GitHub repo by "pushing" your commits just like you've done with your homework all semester. Soon as you push changes you should see it reflected in the GitHub repo, and a few minutes later you should see the updates on the website as well (when you request your URL in the browser).
5. register a domain name
Once you've finished coding your website and you're ready to turn it in, the last thing you'll need to do is give it a proper domain name. This can be any name with any domain (.com, .net, .pizza, .design, etc.) you want. You'll need to create an account on namecheap.com to buy one (remember that you've got namecheap credit as part of the GitHub student pack you signed up for at the start of the semester). Once you've got one you'll need to follow these steps so namecheap knows that your domain name should point to your GitHub project. Once you've completed that process, you'll need to click on the "settings" tab of your GitHub repo and scroll down to the "GitHub Pages" section, there you'll see a field in which to copy+paste the domain name you purchased. After a few minutes (sometimes hours) you should be able to enter that URL into any browser and your website should come up.
6. turn in your homepage
Lastly, you'll need to submit your assignment by emailing me a link to your homepage. Not the https://username.github.io URL, but the one you've purchased on namecheap. CHECK YOUR URL BEFORE EMAILING IT TO ME! If I click on the URL and it doesn't work the assignment will be considered incomplete.