Week 4, Day 3

Getting it Online

Posted by on 12th Jun 2019

You've been working on your digital methodology and learning some HTML and CSS from Codecademy. Now it's time to start putting those ideas and those skills together in an actual web page.

Goals for Today

  • Learn more HTML and CSS
  • Start assembling and designing your webpage

HTML and CSS are the two fundamental languages of the world wide web, and you need to work with both in order to create a competent webpage that incorporates good practice in design and communication. Remember, your job is to build this webpage from scratch, so you're not using WordPress for this!

As described in the assignment, the core of your webpage is a short essay about what you found in your methodology research. Specifically, your web page should contain the following elements:

  • A title
    • Several paragraphs of text including
    • A description of your process
  • Any conclusions you can draw from your process
  • Images and/or embedded media
  • Links to related resources
  • Citations and links to your sources

That's your content, and getting those into your webpage will require you to use HTML. In other words, this list of elements really describes the minimum threshold for success with this project.

Making it all look clear and well-organized is where CSS comes in. I'm not going to give you a specific set of things to do with CSS, because your design is up to you, but I do expect you to use CSS to make some intentional changes in the look and feel of your webpage. It doesn't need to be fancy, but it does need to show that you can work with the language.

Some examples of previous student work can illustrate the kind of thing I'm looking for. Here's one by Sophia that isn't too fancy but does a good job conveying the information with some style. This one by Yousef is more elaborate, but still within the realm of what you can achieve in a couple of days.

Learn HTML and CSS

With this assignment, one major difference between the online version and the face-to-face version of this class is that in the online version, I can't do the in-person teaching of HTML/CSS that I usually do. As I've said, I think it's helpful to hear the material presented multiple ways, but more than that, a major part of what I do as I demonstrate these skills with my class is convince my students that they're capable of doing this.

I've found that many students approach this assignment with some anxiety about their abilities or some basic fear of coding, but even if it seems intimidating or you get frustrated as you work, please believe me when I say you can do this! I'm here to help walk you through it, and I'm happy to troubleshoot and debug your code once you starting hitting those inevitable frustrations.

When you get to those points, please know that frustration is a perfectly normal emotional response to coding, and it doesn't mean you're a failure. Please ask for help in Slack! That's what the #hep channel is for!

All that said, you do need to learn as much as you can from Codecademy and/or W3Schools in order to be successful with this project.

Specifically, if you're sticking with Codecademy -- and I think most of you are -- the first two "courses" in their "HTML and CSS" catalog should give you the required knowledge base. That's "Learn HTML" and "Learn CSS". Optionally, the "Make a Website" course looks pretty good too, but I haven't worked through it to be sure. One possible risk is that the way the describe putting your site online might not make mesh clearly with how things look on the UMW.Domains system.

If you're sticking with W3Schools -- or even after you've completed those courses in Codecademy and you want to use W3Schools as a reference -- the HTML5 Tutorial and CSS Tutorial have what you need.

Start Assembling your Webpage

However you're learning HTML and CSS, it's one thing to study and practice it in the abstract, but another to start putting it into practice with an actual working webpage of your own. Problems and challenges arise that may not have come up in the Codecademy lesson, and various things that those lessons assume about your prior knowledge and your computer environment may not be intuitive.

You've got to do some work to make it transfer, in other words.

To that end, I've made a video explaining how to set up an HTML project on your computer, and I'll have another video or two about working with raw HTML on the UMW.Domains environment. In the interest of full disclosure, I will acknowledge that the video I'm embedding below was made a couple of Summers ago. I don't like to recycle content, but, well, the information and demonstrations I convey there haven't changed in a year, so I see no reason not to re-use it.

It's on the longer side, but I hope it's helpful. Please watch it:

I hope it helps. Please continue working on your methodology research and building your project webpage, and when you get stuck, please ask so I can help!