Web Design with HTML and CSS - Graphic Design Level 1
SCA – Technical Workshop Descriptor
Web Design with HTML and CSS (using Brackets) - Graphic Design Level 1
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 Adobe Photoshop and Brackets code/text editor before the session.
Technical Learning Objectives:
Through one supported workshop covering basic knowledge of HTML and CSS you will be guided to create a basic webpage which could be a prototype for your own digital presence online. We will learn to code and style a minimum of three basic elements.
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!!
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...
These 3 videos are from a LinkedIn Learning course and give an overview basics of HTML and CSS you don't have to attempt the exercises (you may need to use your UWE email address to access the 'Institutional Login' on that page) - just try and understand the
Getting started with web design
Workshop Summary video (duration 6mins):
Graphic Design Web PP1 Quick Guide
HTTML & CSS References:
Adding a heading
Adding a paragraph
Adding an image
Bonus Links (working with multiple elements of the same type):
CSS id selector (apply style rules to a specific HTML element)
Using the Id attribute
CSS class selector (apply style rules to a collection of HTML elements)
Using the class attribute
More Advanced stuff for if you are feeling adventurous...
Flexbox vs Grid: