#1
File Management & HTML Boilerplate
Good web design is all about great organization. Like starting any project, whether cooking or painting the bathroom, the best chance of success starts with good, solid prep work.
Web Design for Graphic Designers
Written by Elbongurk
Table of Contents
#2
Semantic Text
Learn about how browsers understand and display text content including the right way to write code so that we can take advantage of the browser’s built-in text styling features.
#3
Images & Captions
Learn how to write code to display images in a website including features such as captions and descriptive text for screenreaders to meet inclusive design standards.
#4
Tables & Lists
Lists and tables are extremely valuable for organizing your content. We’ll learn to add bulleted, numbered and dictionary style lists as well as how to organize spreadsheet style tabular data.
#5
Links
Learn how to link your webpage to someone else’s, how to link to downloadable files and documents, and how to link pages in a single website together.
#6
CSS Basics
To control the presentation of the content, we need to learn a new code language called CSS which is used to style HTML content. The process is similar to creating and using a stylesheet in InDesign.
#7
Box Model
Learn the anatomy of an HTML element and how to use CSS to control the space inside and around each using specific CSS properties and value types.
#8
Navigation & Mobile First Design
Learn ways to optimize images for all screen sizes, to create and style a mobile-friendly navigation, and how to use anchored links to promote scrolling over clicking which is easier for mobile users.
#9
Organizing Content for Better Control
HTML provides us with several organizational tags such as header, footer, and section to be used to group related elements into larger related organizational units for better control of CSS styling.
#10
Custom Web Fonts
Copyright makes using custom fonts tricky, however, there have been great advancements in this area. Learn about techniques and resources for incorporating custom fonts into your sites.
#11
Basic Positioning
Explore CSS techniques for controlling our page layout including how to wrap text around images and how to build and control multi-column layouts.
#12
Advanced Positioning
Whenever possible, limit yourself to basic positioning techniques, however, there are times where more contol is needed. Learn CSS techniques for precise positioning of specific elements on a page.
#13
Media Queries
To compete, we need to design sites that adapt or respond to our user’s device be it a phone, tablet, or computer. Learn CSS techniques that allow us to optimize our design for all screens.
#14
Creating Navigation for the Big Screen
Learn to create a horizontal navigation for a large screen site, a multi-column layout, and how to hide and show certain elements based on screen size using media queries.
#15
CSS3
Learn some advanced CSS techniques to allow for simple hover animations, drop shadows, and gradient backgrounds. We’ll also discuss rounded corners, using opacity, and browser limitations.
#16
Adding a Bit of JavaScript
JavaScript is the progamming magic that allows for slideshows and slide-in navigation. Learn to use and customize some prewritten JavaScript for added interactivity in your site.
#17
Forms
Forms allow users to enter data into a website. Learn to build a basic contact form for your site including using a third-party service to handle the database and delivery of submitted content.
#18
Publishing a Website
Learn the steps of publishing a website from purchasing both a domain name and a hosting account, to preparing and transferring your files, and finally, to accessing your new website online.