Front End Developer Suite

Front End Developer Suite

Learn how to create state-of-the-art responsive websites that work beautifully on phones, tables, laptops, and desktops using modern CSS3, HTML5 and JavaScript. Take your existing HTML skills to the next level to create professional-grade websites like the pros do. You will also learn to design and build fully responsive websites optimized for smartphones, tablets, and laptop/desktop viewing environments.

72 Course Hrs
  • Details
  • Syllabus
  • Requirements
  • Instructor

Details

Learn how to create state-of-the-art responsive websites using modern CSS3, HTML, and JavaScript, the premiere front-end language of modern web development. Take your existing HTML skills to the next level and start building professional-grade sites like the pros. If you want to survive and excel in the fast-paced world of web publishing, you're going to need to keep up with ever-evolving standards. That means CSS3, HTML5, JavaScript, and the ability to create modern website that work perfectly on phones, tablets, laptops, and desktops.

CSS3, HTML5, and JavaScript are the main front-end languages that professional web developers use to create modern responsive websites. They are the same languages used by popular graphical tools and templates like WordPress, Dreamweaver, Wix, and Bootstrap. So everything you learn in these courses will apply to sites you create from scratch, as well as sites you create using any modern design frameworks. You will also learn to identify and address every aspect of responsive web design: from scaling elements and adjusting page layout, to adapting color schemes and implementing accessible forms.

This course will provide you with the foundation you'll need to master the three most important languages for modern web development, CSS3, HTML5, and JavaScript, and also teach you the specific tricks of the masters for making sites that are fully responsive to phones tables, laptops, and desktop computers.

Suite bundles are not eligible for partial drops or refunds. Transfers to other open sessions of the same course are available. Please refer to your school for additional details regarding drops, transfers, and refunds on Suite bundles.

Enrollment Options:
Instructor-Led
Course Code: B9149
Start Dates*Sep 15 | Oct 13 | Nov 17 | Dec 15
*Choose start date in cart
$299.00 USD

Syllabus

Introduction to CSS3 and HTML5

HTML5 and CSS3

Learn what HTML5 and CSS3 are all about and why you'll want to learn to use them. Then, discover how CSS lets you create design elements that give your site a consistent look, feel, and unique identity.

Backgrounds

Learn how background colors, photos, textures, patterns, and gradients can add visual interest to your website. Then, learn how CSS properties make it easy to add professional polish to your design with borders, rounded corners, and drop shadows.

Text

Learn about the many ways you can style your text with CSS, including fonts, text shadows, and more. You will also examine the primary tags for text markup in HTML. Then, discover how pictures add visual interest to any website, and discuss ways you can float, position, and size pictures using CSS.

Classes

Learn how style classes and links can boost your creativity and assist the management of your styles. Then, learn the latest techniques for playing sounds and showing videos on your site.

Tables

Learn why HTML tables are the perfect tool for displaying information in rows and columns, like tables you see in print. You will also learn techniques for styling tables with traditional CSS, as well as brand new CSS3 techniques that really make tables shine with minimal coding! Then, solve the mysteries of the ever-important CSS Box Model and overcome potential frustrations.

Layout tags

Learn the new set of layout tags in HTML5 and discover how to make them work in new and older browsers alike. You will also acquire some professional-grade techniques for styling layout tags with CSS. Finally, learn about adding side columns to your layout and allowing vertical navigation with links suitable for a mouse, fingertip, or stylus on a mobile touch screen.

Introduction to JavaScript

JavaScript

Learn what JavaScript is, where it came from, who uses it, and why you want to learn it. Most important, you'll learn how and where to write JavaScript. Then, you'll learn to control not just what your JavaScript code does but also when it performs its task with an introduction to event handling.

DOM

Explore the Document Object Model (DOM), a set of rules and words you use to access and manipulate the elements of a Web page. You'll also learn about variables, which are temporary placeholders for information that can vary. Then, you'll learn about JavaScript's ability to make if . . . else decisions (If this happens, do this, or else do this) as well as data types, strings, numbers, and dates, and how and why programming languages treat these types of information differently.

Searches

This lesson will give you some Search My Site code. And as an added bonus, you'll learn how to add drop-down list controls to your pages. Then, you'll learn to use JavaScript to add sound effects, background music, and custom music player controls to your Web pages. You'll also learn how to set HTML attributes and CSS styles through JavaScript and even to test the user's browsers for compatibility with modern HTML5 features.

Carousels

Start on a picture carousel that allows users to click or cycle through thumbnail images, seeing an enlargement of one at a time. You'll learn some tips and tricks for using JavaScript with pictures and some new programming concepts like global variables and string manipulation. Then, you'll learn how to create your own JavaScript arrays and loops and start getting a handle on how you can apply them toward building more interactive Web pages.

Timers

Understand the two main ways you can control speed: JavaScript timers and CSS transitions. You'll also see how you can use JavaScript to trigger and control CSS transitions, which allows you to get some cool effects with minimal coding. Then, learn what jQuery is, where to get it, and how to get started using it in your own websites.

jQuery

Discover how you can use jQuery to create collapsible panel and accordion controls. And finally, you'll learn how to find jQuery plugins and incorporate them into your own site.

Responsive Web Design

Responsive design

In this first lesson, you will take a look at exactly what responsive web design is, why it is necessary, and the basic concepts in building responsive websites. You will examine some models of responsive design and see what you can learn from them. Then you will learn how to apply relative units of measurement to optimize the display of images and text in different viewports and environments.

Menus

In this lesson, you will investigate how menus function differently depending on the browsing environment, and you will find out how to design responsive menus that adapt to full-screen desktop or laptop environments as well as smartphones and tablets. You will learn to apply CSS3's media feature. Then you will discover responsive color schemes and fonts that will ensure visibility and readability in a wide range of viewing environments. You will also learn how to test color schemes for contrast value, and you will explore Google Fonts as a source of downloadable Web fonts compatible with mobile devices.

Frameworks

Explore a basic strategy of applying a 3-2-1 framework with stacked columns. You will learn how to use media queried, HTML5's semantic elements, and logical operators to build pages that are user-friendly in devices of all sizes. Then you will learn a simple way to collapse content into expandable blocks for mobile users, but present an alternate page layout for full-sized viewports. You will use the HTML5 <details> and <summary> tags to make content that users can expand or collapse on a small screen. You will also use media queries to present the content in full-size viewports in columns rather than the expandable and collapsible blocks that work in mobile devices.

Performance

This lesson will show you an array of strategies for making sure photos aren't slowing down your responsive sites. You will learn to compress images to reduce file size while maintaining image quality, build a cache file to make photos download more quickly for users on return visits, and manage image downloads with jQueary widgets. You will also learn what video hosts work best when designing responsive sites. Then you will learn to create and embed SVG (Scalable Vector Graphics) images, and scale them responsively.

Accessibility

Learn design forms that are inviting and accessible in any environment. You will discover how to use HTML5 input types to make forms easier to fill out in mobile environments, and you will use media queries to customize the look and feel of your form depending on the viewport. Then you will begin to understand how JavaScript-based framework, libraries, and widgets work, and how to implement them in your website. You will add custom buttons, navigation menus, and a carousel (automated slide show) using Bootstrap widgets, which are all responsive components.

Mobile users

In this final lesson, you will expand your capacity to provide mobile users with an app-like experience. This means you will integrate more styling and interactive animation. You will do this by connecting with a set of widgets and animated elements from the jQuery Mobile framework. You will employ media queries to keep the full-sized viewport experience friendly. Then you will continue to work with the jQuery Mobile framework to build a Web app welcome page that can serve as a mobile-friendly entryway into your site. You will learn to define and apply a media query so that users coming from laptop or desktop sized viewports see a more traditional navigation bar that works well with large screens. You will build a home page to show off all the projects you have created in this class.

Requirements

Hardware Requirements:

  • This course can be taken on either a PC or Mac.

Software Requirements:

  • PC: Windows 8 or later.
  • Mac: macOS 10.6 or later.
  • Browser: The latest version of Google Chrome or Mozilla Firefox is preferred. Microsoft Edge and Safari are also compatible.
  • Adobe Acrobat Reader.
  • Software must be installed and fully operational before the course begins.

Other:

  • Email capabilities and access to a personal email account.

Instructional Material Requirements:

Introduction to CSS3 and HTML5

  • A text editor (like Windows Notepad)
  • Basic computer skills
  • Familiarity with files, folders, text editing, and copying and pasting.
  • Completion of our online Creating Web Pages course (or equivalent experience with HTML and Web publishing) is recommended.

Introduction to JavaScript

  • A test editor or authoring tools for writing HTML and CSS code, and the knowledge to use that too. Students should also have a good understanding of HTML and CSS prior to taking this course. Successful completion of Introduction to CSS3 and HTML5, and Intermediate CSS3 and HTML5 highly recommended.

Responsive Web Design

  • Some experience creating web pages with HTML and CSS is needed before enrolling in this course.

Instructor

Alan Simpson is an award-winning author, having published over 100 books on computers and the Internet. His books have been published in over a dozen language worldwide. He has covered virtually all aspects of the computer industry, including web development, operating systems, programming, networking, and security. As a seasoned veteran of the computer industry, he is widely regarded as a computer and Internet guru.

David Karlins is the bestselling author of more than a dozen books on web design, including "HTML5 for CSS3 for Dummies." His articles have appeared in publications ranging from Macworld to Business Week. He has taught web, graphic, and interactive design at San Francisco State University and in the Extension program at University of California, Berkeley.