Web Design with HTML and CSS - Graphic Design Level 2
SCA – Technical Workshop Descriptor
Web Design with HTML and CSS (using Brackets) - Graphic Design Level 2
Technical Instruction Area:
Digital Design Studios
Duration of Workshop: Half day
Pre-requisites/Skill Levels/Workshop Preparation:
Students who wish to participate with any hands on exercises are expected to have downloaded Brackets code/text editor before the session.
NOTE: the brief for level1 (pp_lev1_web_design.pdf) contains links to useful 'pre-learning' materials.
Technical Learning Objectives:
This workshop follows on from the previous year's Graphic Design level 1 Professional Practice workshop of the same title. Where students learnt how to create a very simple webpage with a minimum of three basic elements.
There will be a brief recap of last year's level1 session.
Followed by a combination of demonstration and Q&A covering linking to the following:
Room Number: (0F14, 0F15, 0F16 or 0F17 )*
Maximum Numbers Possible: 13†
*This year the workshop will be delivered as an online session.
†As an online this workshop session can accommodate up to 30 students.
NOTE: If students intend to follow this session using a booked DDS computer the must bring their own headphones!!
Workshop Content and associated files for download:
Brackets is an open source text editor designed to work with a variety of code types. The Professional Practice module outlined here uses HTML or CSS to create a webpage. Brackets has a simple interface, and tools such has autocomplete and colour highlighting, to guide the author through the creation of web pages. This series of workshops is designed to take the complete beginner through the steps of creating a simple website, using the tools Brackets provides.
Note: Though Adobe have abandoned development of Brackets. But it is still Open Source, alive and kicking and can be downloaded free of charge from here:
Brackets for MacOS
Brackets for Windows
This folder contains some files to get you started in case you don't have your own...
This Padlet contains a few useful resources to support our workshop sessions:
Official Twitter icons and brand guidelines:
Official Instagram icons and brand guidelines:
Think of it as a evolving resource that will be added to and edited, according to your needs and requests