Modern Web Design

Description

Modern Web Design will prepare you to be a front-end developer by walking you through the basics of HTML, CSS and JavaScript.
COURSE PREVIEW

MODERN WEB DESIGN

This course is an introduction to front-end development for the web. You will learn how to mark up content with HTML, use CSS as a design tool, and add interactivity to your web pages with JavaScript. You will also learn the basics of building a responsive website for mobile devices and tablets, as well as for the desktop.

COURSE OUTLINE

Lesson 1: Getting Your Bearings

Learn the core skills of being a front-end developer and how they fit into the larger ecosystem of web design and workflow. Additionally, you’ll learn the principles and benefits of progressive enhancement, a philosophy and collection of techniques for building web pages used throughout this course.

Lesson 2: An Introduction To HTML

In this lesson you’ll learn the anatomy of HTML elements and attributes and take a look at the importance of nesting and the Document Object Model (or DOM). You’ll also explore how to create well-structured documents that will serve as the foundation for the styles you will add in later lessons with CSS.

Lesson 3: Structuring HTML Content

Learn how to logically divide and apply markup to your content using the building blocks of HTML such as lists, tables, and figures. Additionally, learn how to use the relatively new elements that were introduced in HTML5, such as the main, section, header, and footer elements.

Lesson 4: Getting Started With CSS

Build upon your new knowledge of HTML with a dive into the core concepts of Cascading Style Sheets (CSS). You’ll learn about the different categories of style rules, and more importantly, which type of rule to use in any given situation. Additionally, you’ll explore how to control the typographic style of your page, how to work with color, how to control layout through margins and padding, and much more.

Lesson 5: CSS As A Design Tool

In this lesson you’ll expand your CSS toolbox by exploring a number of stylistic techniques you can use to enhance the appearance of your pages, including CSS backgrounds, text and drop shadows, borders, and positioning of elements. You will also learn how to begin constructing pages designed to adapt to multiple screen sizes, including phones and tablets, through the use of CSS media queries.

Lesson 6: Getting Started With JavaScript

This lesson wraps up your tour of learning how to be a front-end developer with a look at JavaScript, the language used to add interactivity to your website. In addition to reviewing the basic concepts of this powerful scripting language, you will also walk through a real-world project and build a robust site navigation component which uses JavaScript to adapt to small screens (such as smartphones).

PREREQUISITES

Familiarity with the web
Experience with a text editor (such as Sublime Text, Atom, BBEdit, etc.)



More Ways to Learn Web Design

Coding for Designers

High School - College | Online class

LEARN HOW TO BE A WEB DESIGNER THAT DEVELOPERS LOVE Students will learn how to translate graphic design to the web; about common pitfalls many print designers face when moving to the web; the...

Free

Responsive Web Design

College | Online video/YouTube

Hi! I create videos mostly related to programming, and sometimes simple hacks and tricks to survive on internet!

Free

Web Design for Everybody Capstone

7th - College | Online class

The capstone will develop a professional-quality web portfolio. Students will demonstrate the ability to design and implement a responsive site for a minimum of three platforms. Adherence to...

Free
Offers paid add-ons

Responsive Web Design

College | Online class

PROMOTE YOURSELF RESPONSIVELY: BUILD A PORTFOLIO FOR ALL DEVICES At the end of this course you’ll have a responsive portfolio website you’ve built from scratch. You will learn the essential...

Free

Learn how to design great user experiences

7th - College | Online class

You will learn how to design technologies that bring people joy, rather than frustration. You’ll learn how to generate design ideas, techniques for quickly prototyping them, and how to use...

$39
Offers paid add-ons

Design Principles: an Introduction

High School - College | Online class

What makes an interface intuitive? How can I tell whether one design works better than another? This course will teach you fundamental principles of design and how to effectively evaluate your work...

Free

Responsive Website Tutorial and Examples

7th - College | Online class

In this course, we will show you exciting examples of collaborative, interactive web applications that use various types of media including sound, images and big data. We will show you how to build...

Free
Offers paid add-ons

Learn to Design and Create Websites

7th - College | Online class

This Specialization covers how to write syntactically correct HTML5 and CSS3, and how to create interactive web experiences with JavaScript. Mastering this range of technologies will allow you to...

$79
Offers paid add-ons

Web Design

6th - High School | Online class

The CompuScholar Web Design course teaches students how to create their own web pages using HTML and CSS. Topics Covered This course covers fundamental web design skills such as: Basic web site...

$15

Responsive Web Design Tutorial

9th - College | Online video/YouTube

10 videos covering: Dealing with pixels Flexible grid layouts Media queries Desktop vs mobile Templates

Free

Become a Web Designer

College | Online class

Today’s web designer balances clear, concise design skills alongside a strong foundational background in the technology of the web. Our tutorials cover the skills you need to design rich, engaging...

$20 monthly
Offers paid add-ons

How To Create a Website in a Weekend! (Project-Centered Course)

College | Online class

About this Course What you’ll achieve: In this project-centered course*, you’ll design, build, and publish a basic website that incorporates text, sound, images, hyperlinks, plug-ins, and social...

Free

Responsive Web Design

7th - College | Online class

In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn...

Free
Offers paid add-ons

Advanced Styling with Responsive Design

College | Online class

About this Course It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of...

Free

Photoshop CC For The Web

7th - College | Online class

With so many file formats, colour spaces, and image types, knowing where to start with web graphics can be daunting. But guided by this thorough, yet easy to follow course, you'll be feeling like a...

$99

See all resources for Web Design