COMP06294 2021 Web Design Fundamentals
Full Title
Web Design Fundamentals
Transcript Title
Web Design Fundamentals
Code
COMP06294
Attendance
N/A %
Subject Area
COMP - 0613 Computer Science
Department
COEL - Computing & Electronic Eng
Level
06 - Level 6
Credit
05 - 05 Credits
Duration
Semester
Fee
€
Start Term
2021 - Full Academic Year 2021-22
End Term
9999 - The End of Time
Author(s)
Aine Mitchell
Programme Membership
SG_KGADV_B07 202100 Bachelor of Science in Computing in Games Development
SG_KSODV_B07 202100 Bachelor of Science in Computing in Software Development
SG_KSODV_H08 202100 Bachelor of Science (Honours) in Computing in Software Development
SG_KCMPU_H08 202100 Bachelor of Science (Honours) in Computing
SG_KAPPL_H08 202100 Bachelor of Arts (Honours) in Computing in Application Design and User Experience
SG_KCMPU_C06 202100 Higher Certificate in Science in Computing
SG_KCMPU_B07 202100 Bachelor of Science in Computing
SG_KSMAR_H08 202100 Bachelor of Science (Honours) in Computing in Smart Technologies
SG_KCNCS_B07 202100 Bachelor of Science in Computing in Computer Networks and Cyber Security
SG_KCNCS_H08 202100 Bachelor of Science (Honours) in Computing in Computer Networks and Cyber Security
SG_MBUSI_H08 202100 Bachelor of Arts (Honours) in Business and ICT
SG_MBUSI_H08 202200 Bachelor of Arts (Honours) in Business and ICT
SG_KSODV_H08 202200 Bachelor of Science (Honours) in Computing in Software Development
SG_KCMPU_H08 202200 Bachelor of Science (Honours) in Computing
SG_KSODV_H08 202400 Bachelor of Science (Honours) in Computing in Software Development
SG_KCMPU_H08 202400 Bachelor of Science (Honours) in Computing
SG_KAPPL_H08 202400 Bachelor of Arts (Honours) in Computing in Application Design and User Experience
Description
The ability to comprehend and implement the technologies required to build a website are a fundamental requirement for any ICT graduate. This module introduces the learner to the core concepts required to build a basic website using industry relevant tools, while concentrating on the design side. Particular emphasis will be placed on HTML and CSS.
Learning Outcomes
On completion of this module the learner will/should be able to;
1.
Describe the evolving nature of the client server model.
2.
Explain the stages of the web design process.
3.
Create website content using HTML.
4.
Style website content using CSS.
Teaching and Learning Strategies
Computer labs will be used to move easily from concepts to practical implementation. Small out of class tasks will be provided to emphasise core concepts. Moodle (or similar) will be used to encourage students to engage with each other out of the class environment.
Module Assessment Strategies
One ongoing assignment will be used to allow the learner to provide a practical implementation of topics covered. Smaller assessments will be used to allow the learner to obtain feedback on a regular basis.
Repeat Assessments
The student will be required to repeat assessments and/or project.
Indicative Syllabus
Describe the evolving nature of the client server model.
- Technical overview of client server model
- Evolution of client devices
- Overview of servers and web servers
- Cloud based systems
- The purpose of a web hosting company and facilities offered
- Methods of accessing the Internet
- Common tools used to build websites
Explain the stages of the web design process.
- Planning (requirements, site layout etc.)
- Design (mock-ups, review and approval)
- Development (content, functionality etc.)
- Launch and post-launch
Create website content using HTML.
- Webpage structure
- The purpose of HTML and CSS
- HTML elements (text, links, lists, tables, images etc.)
- HTML attributes
- The difference between HTML5 and previous versions
- HTML forms
Style website content using CSS.
- Introduction to CSS syntax
- Selectors, backgrounds and text
- The CSS box model
- Borders, margins, padding and dimensions
- Units and relative lengths
- Media
- Layouts and positioning
- Manipulating a website template
- Designing and building a basic website
- Browser compatibility
- Debugging CSS
- Media queries
- Cascading
Coursework & Assessment Breakdown
Coursework & Continuous Assessment
100 %
Coursework Assessment
| Title | Type | Form | Percent | Week | Learning Outcomes Assessed | |
|---|---|---|---|---|---|---|
| 1 | Moodle Quizzes | Coursework Assessment | Multiple Choice/Short Answer Test | 40 % | OnGoing | 1,2,3,4 |
| 2 | Design and build a Website using GitHub Version Control | Coursework Assessment | Individual Project | 40 % | OnGoing | 3,4 |
| 3 | Practical Assessment | Practical | Assessment | 20 % | Week 6 | 2,3,4 |
Full Time Mode Workload
| Type | Location | Description | Hours | Frequency | Avg Workload |
|---|---|---|---|---|---|
| Practical / Laboratory | Computer Laboratory | Lab based practical work | 3 | Weekly | 3.00 |
| Independent Learning | Not Specified | Self-directed Learning | 4 | Weekly | 4.00 |
Total Full Time Average Weekly Learner Contact Time 3.00 Hours
Required & Recommended Book List
Recommended Reading
2011-11-08 HTML and CSS: Design and Build Websites Wiley
ISBN 1118008189 ISBN-13 9781118008188
2011-11-08 HTML and CSS: Design and Build Websites Wiley
ISBN 1118008189 ISBN-13 9781118008188
A full-color introduction to the basics of HTML and CSS from the publishers of Wrox!
Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content management system or e-commerce store) and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach.
- Introduces HTML and CSS in a way that makes them accessible to everyonehobbyists, students, and professionalsand its full-color throughout
- Utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging
- Boasts a unique structure that allows you to progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure
This educational book is one that you will enjoy picking up, reading, then referring back to. It will make you wish other technical topics were presented in such a simple, attractive and engaging way!
This book is also available as part of a set in hardcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781119038634; and in softcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781118907443.
Recommended Reading
2014-01-03 Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) (Voices That Matter) New Riders
ISBN 0321965515 ISBN-13 9780321965516
2014-01-03 Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) (Voices That Matter) New Riders
ISBN 0321965515 ISBN-13 9780321965516
Since Dont Make Me Think was first published in 2000, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krugs guide to help them understand the principles of intuitive navigation and information design. Witty, commonsensical, and eminently practical, its one of the best-loved and most recommended books on the subject.
Now Steve returns with fresh perspective to reexamine the principles that made Dont Make Me Think a classicwith updated examples and a new chapter on mobile usability. And its still short, profusely illustratedand best of allfun to read.
If youve read it before, youll rediscover what made Dont Make Me Think so essential to Web designers and developers around the world. If youve never read it, youll see why so many people have said it should be required reading for anyone working on Web sites.
After reading it over a couple of hours and putting its ideas to work for the past five years, I can say it has done more to improve my abilities as a Web designer than any other book.
Jeffrey Zeldman, author of Designing with Web Standards
Recommended Reading
2013-01-06 CSS3: The Missing Manual O'Reilly Media
ISBN 1449325947 ISBN-13 9781449325947
2013-01-06 CSS3: The Missing Manual O'Reilly Media
ISBN 1449325947 ISBN-13 9781449325947
CSS3 lets you create professional-looking websites, but learning its finer points can be trickyeven for seasoned web developers. This Missing Manual shows you how to take your HTML and CSS skills to the next level, with valuable tips, tricks, and step-by-step instructions. Youll quickly learn how to build web pages that look great and run fast on devices and screens of all sizes.
The important stuff you need to know:
- Start with the basics. Write CSS3-friendly HTML, including the HTML5 tags recognized by todays browsers.
- Apply real-world design. Format text, create navigation tools, and enhance pages with graphics.
- Make your pages lively. Create eye-catching animations and give your visitors attractive tables and forms.
- Take control of page layouts. Use professional design techniques such as floats and positioning.
- Look great on any device. Craft websites that adapt to desktop, tablet, and mobile browsers.
- Get advanced techniques. Use CSS3 more effectively and efficiently, and ensure that your web pages look good when printed.
Recommended Reading
2014-11-29 The Non-Designer's Design Book (4th Edition) Peachpit Press
ISBN 0133966151 ISBN-13 9780133966152
2014-11-29 The Non-Designer's Design Book (4th Edition) Peachpit Press
ISBN 0133966151 ISBN-13 9780133966152
For nearly 20 years, designers and non-designers alike have been introduced to the fundamental principles of great design by author Robin Williams. Through her straightforward and light-hearted style, Robin has taught hundreds of thousands of people how to make their designs look professional using four surprisingly simple principles. Now in its fourth edition, The Non-Designers Design Book offers even more practical design advice, including a new chapter on the fundamentals of typography, more quizzes and exercises to train your Designer Eye, updated projects for you to try, and new visual and typographic examples to inspire your creativity.
Whether youre a Mac user or a Windows user, a type novice, or an aspiring graphic designer, you will find the instruction and inspiration to approach any design project with confidence.
THIS ESSENTIAL GUIDE TO DESIGN WILL TEACH YOU
- The four principles of design that underlie every design project
- How to design with color
- How to design with type
- How to combine typefaces for maximum effect
- How to see and think like a professional designer
- Specific tips on designing newsletters, brochures, flyers, and other projects
Recommended Reading
2015-09-01 Responsive Web Design with HTML5 and CSS3 - Second Edition Packt Publishing - ebooks Account
ISBN 1784398934 ISBN-13 9781784398934
2015-09-01 Responsive Web Design with HTML5 and CSS3 - Second Edition Packt Publishing - ebooks Account
ISBN 1784398934 ISBN-13 9781784398934
Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web users
About This Book
- Learn and explore how to harness the latest features of HTML5 in the context of responsive web design
- Learn to wield the new Flexbox layout mechanism, code responsive images, and understand how to implement SVGs in a responsive project
- Make your pages interactive by using CSS animations, transformations, and transitions
Who This Book Is For
Are you writing two websites one for mobile and one for larger displays? Or perhaps you've already implemented your first RWD' but are struggling bring it all together? If so, Responsive Web Design with HTML5 and CSS3, Second Edition gives you everything you need to take your web sites to the next level.
You'll need some HTML and CSS knowledge to follow along, but everything you need to know about Responsive Design and making great websites is included in the book!
What You Will Learn
- Understand what responsive design is, and why it's vital for modern web development
- HTML5 markup is cleaner, faster, and more semantically rich than anything that has come before - learn how to use it and its latest features
- Integrate CSS3 media queries into your designs to use different styles for different media. You'll also learn about future media queries which are evolving in CSS4.
- Responsive images allow different images to be presented in different scenarios. We'll cover how to load different sets of images depending upon screen size or resolution and how to display different images in different contexts.
- Conquer forms! Add validation and useful interface elements like date pickers and range sliders with HTML5 markup alone.
- Implement SVGs into your responsive designs to provide resolution independent images, and learn how to adapt and animate them
- Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calc
In Detail
Desktop-only websites just aren't good enough anymore. With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just work', regardless of the devices used to access them. This second edition of Responsive Web Design with HTML5 and CSS3 explains all the key approaches necessary to create and maintain a modern responsive design.
The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences to consider. With these recent trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand. Responsive Web Design with HTML5 and CSS3, Second Edition is an updated and improved guide that responds to the latest challenges and trends in web design, giving you access to the most effective approaches to modern responsive design.
Learn how to build websites with a responsive and mobile first methodology, allowing a website to display effortlessly on every device that accesses it. Packed with examples, and a thorough explanation of modern techniques and syntax, Responsive Web Design with HTML5 and CSS3, Second Edition provides a comprehensive resource for all things responsive'.
This updated new edition covers all the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won't just be built right' for today, but in the future too.
Chapter example code is all hosted on rwd.education, a dedicated site for the book, built by the author, using the approaches and techniques championed throughout.
Module Resources
Non ISBN Literary Resources
Journal Resources
URL Resources
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp
http://flatui.com/
http://www.csszengarden.com/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
Other Resources
Additional Information