Introduction to Web Design

No matter what field you’re working in, making a simple website is now considered a basic skill. If you’ve never built a website from scratch, this is the course for you. At the end of this course you’ll have created your own site, guaranteed. If you think coding a website is too difficult this is definitely the course for you! Forget the theory or complex codes: if you can locate the “greater than” and “smaller than” keys on your keyboards you can make a website.

Goals

• Understanding the basic structure of the internet.
• Understanding the basic structures of pages and websites.
• Getting to know the tools developers use (dev tools and IDE’s).
• Understand the basic languages of the web: HTML and CSS.
• Working with a code editor.
• Create a web page with custom colors and fonts.
• Understand the importance of your dev setup and structuring your website folders.
• Understanding the importance of a file system and managing to link pages to each other.
• Uploading a website to the web so you can share it with others.

Requirements

• All the tools we use are free. Go ahead and install Visual Studio Code and either Chrome or Firefox.
• Make an account at Netlify so that we can immediately put our website online.
• We'll provide some basic images and text to make a website, but ideally you can bring your own material (text, photos and videos) to make your website.

Project

We'll make a simple, single-page site that contains text, images and videos. We'll look at the design features of the web, like setting colors and fonts, and layouts like image galleries. You can use these techniques to turn it into your own portfolio website if you'd like.

Next Steps

Even though the techniques are basic they will apply to all websites you'd like to make.

• Continue learning about grid layouts by watching the CSS Grid tutorials by Wes Bos.
• Follow the JavaScript workshop if you want to add interactivity to your website.