Skip to content

Web design and development 101: wireframes, HTTP, HTML, CSS, FTP, PHP, WordPress, Git!

License

Notifications You must be signed in to change notification settings

RavensbourneWebMedia/Web-development-workshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

During this course you will learn how to produce Web sites that are technically sound, aesthetically cohesive and appropriately structured.

This includes:

  • Conducting research (interviews, surveys and competitor analysis) to devise a content strategy
  • Using code (HTML, CSS and a dash of JavaScript) creatively to communicate and advocate
  • Building technically sound, aesthetically cohesive and appropriately structured websites
  • Understanding the WWW technical components and how they work (browsers, servers, HTTP, DNS, IP etc)
  • Structuring content with HTML
  • Styling information and interfaces with CSS
  • Hosting a website on GitHub Pages
  • Organising projects with Git
  • Project management basics: listing and prioritising tasks, tracking and evaluating progress, getting things done

Plan

Term 2

When In class Homework Blog
Wednesday
06.01
Welcome
Workshop: HTML & CSS recap
Project: Sharing is caring
Video tutorials of your CSS trick Sharing is caring
Wednesday
13.01
Workshop: GitHub recap
Tutorials on Sharing is caring
Flexbox!
Peer-learning research: How does the WWW work? JavaScript for cats
Wednesday
20.01
Peer-learning: How does the WWW work?
Workshop: scroll-magic
Tutorials on Sharing is caring
Sharing is caring: storyboard and copy How does the WWW work?
Wednesday
27.01
WWWTF quiz
Workshop: wireframing
Wireframes critique
Sharing is caring: wireframes to HTML & CSS Visualising information for advocacy
Wednesday
03.02
Formative presentations
Tutorials on Sharing is caring
Sharing is caring: collect your research Infographic stories
Week 6
Wednesday
17.02
Content strategy
Copy-writing
Sharing is caring: copy-writing
Peer-learning research: Visualising information for advocacy
Copywriting is Interface Design
Friday
26.02
Peer learning: Visualising information for advocacy
Tutorials on Sharing is caring
Sharing is caring: brain-catching mock ups Infographics, good and bad
Friday
04.03
Tutorials on Sharing is caring with Tor
Team project: Our space
Prep formative Interviewing humans
Friday
11.03
Formative video-presentations Form teams for Our space
Install MAMP
Install WP locally
Interviewing your target audience

Term 3

When In class Homework Blog
Friday
15.04
Recap
Competitor analysis
User interviews planning
Qualitative research: interviews
Quantitative research: questionnaire
Our space interviews insights
Friday
22.04
Personas
Content strategy
Peer learning research: GoodUI Our space personas
Friday
29.04
Peer learning on GoodUI
Workshop: typesetting
Moodbard: collect inspirations
Wireframes
10 common typography mistakes
Friday
06.05
Front-end frameworks
Prototyping with HTML&CSS
Tutorials on Our space
Keep prototyping
Prep formative
Web design myths
Tuesday
17.05
Formative presentations
Workshop: hacking a Bootstrap template and publishing your work to GitHub Pages
Keep prototyping
Friday
20.05
Group tutorials on Our space
Individual tutorials on Sharing is caring
Our space branding guidelines Destroy the Web
Friday
27.05
User-testing
Group tutorials on Our space
Individual tutorials on Sharing is caring
Face2face user-testing
Work on Our space
Friday
03.06
Tutorials on Our space and Sharing is caring: debugging clinic Work on Our space
Prep summative
Friday
10.06
Summative presentations Summative hand-in What have I learned?

Projects

Sharing is caring

This project is about using code (HTML, CSS and a dash of JavaScript) creatively to communicate and advocate a cause you care about.

All the project material is here.

Our space

On this team project you will design and build a website for our Ravensbourne Web Media degree course.

Starting from research (interviews with staff & students, competitor analysis) you will devise a content strategy and then build a technically sound, aesthetically cohesive and appropriately structured website.

All the project material is here.

Learning goals

By the end of this course, you will be able to:

  1. Conduct research (interviews, surveys and competitor analysis) to devise a content strategy
  • Use code (HTML, CSS and a dash of JavaScript) creatively to communicate and advocate
  • Build technically sound, aesthetically cohesive and appropriately structured websites
  • Understand how the WWW works (browsers, servers, HTTP, DNS, IP etc).
  • Visualise your ideas and explore design solutions through paper and digital wireframes.
  • Use HTML to structure Web content appropriately and accessibly.
  • Use CSS to style Web pages cohesively and coherently, being informed by contemporary trends.
  • Document your design and development process, from the exploration of ideas to their practical implementation. Including successes and failures.
  • Communicate your ideas both technically and in an engaging way.
  • Use the Git version-control system (through GitHub) to collaborate with your team and back-up your project files.

Rules of the road

  • Be present. If you happen to be late (even by 5 minutes) or absent, make sure you email me about it before a session starts. We'll deduct 2% from your grade for each uncommunicated tardiness or absence (aka the 2% Tardiness Tax).

  • Participate in class debates and workshops. We'll make sure that your ideas have space to be heard and that nobody makes you feel uncomfortable about sharing them.

  • Present your work during formative and summative assessments. If you can't make it those days then you'll record your presentation and upload it to YouTube (or similar).

  • Be responsible for what happens in class. Organise with your peers to get class information and material that you may have missed.

  • Meet the deadlines. If you submit your work after a deadline, your grade will be capped at D- (bare pass).

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

About

Web design and development 101: wireframes, HTTP, HTML, CSS, FTP, PHP, WordPress, Git!

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published