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 the pages. 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 robust website, using the tools Brackets provides.
Brackets can be downloaded free of charge from the brackets.io website
This folder contains some files to get you started in case you don't have your own...
Embedding Vimeo videos:
Official Twitter icons and brand guidelines:
Official Instagram icons and brand guidelines:
CSS class attribute:
CSS id attribute:
CSS flexbox (flexible box):
Flexbox vs Grid: