Notice : You are now accessing LOOP SIT SERVER. This is not meant for public access. For the actual LOOP Website please visit www.LOOP.sg instead


Responsive Web Design with HTML5 & CSS3


  • Responsive Web Design with HTML5 & CSS3, Singapore SKillsFuture elarning online course
  • Responsive Web Design with HTML5 & CSS3, Singapore SKillsFuture elarning online course
  • Responsive Web Design with HTML5 & CSS3, Singapore SKillsFuture elarning online course
  • Responsive Web Design with HTML5 & CSS3, Singapore SKillsFuture elarning online course
  • Responsive Web Design with HTML5 & CSS3, Singapore SKillsFuture elarning online course
  • Responsive Web Design with HTML5 & CSS3, Singapore SKillsFuture elarning online course

Course Description

Leap into the world of adaptive web design with HTML5 & CSS3 Responsive Web Design! With Geoff Blake as your guide, you'll learn how to build wireframe responsive designs in Adobe Illustrator, apply design and graphics to them in Photoshop, and then rebuild the designs in code. Discover the power of CSS3's media queries to target various devices and resolutions, including mobile, tablet, and desktop browsers. Learn how to extract Photoshop content for use in your designs, insert it with modern HTML5, and control it with a variety of CSS3 techniques. By the end of this VTC course, you'll have three beautiful designs, each one displaying automatically depending on the device being used to view it.

Learn about HTML and its purpose in development.

- Learn from the basics to advanced levels of HTML 5
- Know how HTML 5 applies to development of websites
- Understand how to apply HTML 5 in your projects
- See the difference HTML 5 can do in a web design

This course is SkillsFuture Credit Eligible.


Course Objectives

1. Understand the introduction to Responsive Web Designs 
2. Able to apply HTML 5 into projects 
3. Know how to draw up wireframes in Illustrator and Photoshop 
4. Know how to build HTML page structures 
5. Know how to apply responsive design into page elements


Related Courses

  • Fundamentals in HTML5 & CSS3 - Inclusive of CSS Floating Layouts

    Fundamentals in HTML5 & CSS3 - Inclusive of CSS Floating Layouts

    SGD $99.00

    Course Description

    Get started with a solid foundation in HTML and CSS. From there, learn about handling text, tables, graphics, and hyperlinks. Additonally, Finally, dig into building forms and handling multimedia — all in HTML and CSS Fundamentals! Join award-winning software trainer, Geoff Blake on a journey into HTML, CSS and web design in this information-packed course. Spanning nearly 6 hours, you’ll gain skills with more than 70 casual, easy to follow lessons, hands-on tasks and techniques! Get started with a solid foundation in HTML and CSS and code away with your new found skill!- Learn about the basics of HTML and CSS - Understand how different parts of a web page is designed - Know how to apply these skills into your own designs - Additionally learn and understand more about CSS Floating Layouts

    Read more...

  • WordPress Bundle

    WordPress Bundle

    SGD $99.00

    Course Description

    Often when we think of WordPress, we think of blogging—but WordPress can do so much more! In this short, easy to follow course, you’ll discover everything you need to know to get your WordPress site online, including how to effortlessly register a domain name and set up web hosting, install WordPress, and begin using it to publish your work on the web. You’ll quickly get comfortable in the WordPress environment, and see how straightforward it is to create and format content, including text, images, and video. Then, you’ll find out how to control and extend your WordPress website with themes, widgets, and plug-ins. Once you learn WordPress, the sky’s the limit! Ready to jump into it? Then let’s get started!Deliver your blogging contents with WordPress. - Learn how WordPress can get you started with your first website - Learn different techniques for building themes from scratch - Know how you can make your contents available for people online - Realize your mock-up designs into actual themes in WordPressThis course is Skillsfuture Credit Eligible.

    Read more...

  • Web Design Programming: XML, Coldfusion, Java

    Web Design Programming: XML, Coldfusion, Java

    SGD $99.00

    Course Description

    In this online training series, we will share how to create XML files to structure your data and use the files as data sources for webpages. You will learn how create well-formed XML files and format your XML files using Cascading Style Sheets as well as how to use JavaScript in order to use XML as a data source for your website. Finally, you'll learn how to apply XSL and XPATH to transform your XML files into readable formats.Next you will learn how to program in Adobe's® ColdFusion® Markup Language. You will start by downloading and installing the ColdFusion server and then learn how to configure the server so you can begin writing ColdFusion templates. This training will cover ColdFusion syntax, creating variables, conditional statements, creating data driven templates, and connecting to databases and XML files. Upon completion of this series, you will learn everything you need to know to develop data driven web applications using ColdFusion.Then you'll learn the basics of Java®, the general-purpose programming language designed to have as few implementation dependencies as possible. You'll create Java programs; work with data types, operators and control statements; and will be introduced to classes, access control and strings in this beginner's course. Let's get started.Code web pages with skills right at your fingertips!- Learn how to program in Adobe's© ColdFusion© Markup Language.- Learn how to transform web applications into mobile applications using the PhoneGap Build service.- Learn how to create a mobile app using ColdFusion® within the ColdFusion Builder development environment.- Create Java programs; work with data types, operators and control statements.This course is SkillsFuture Credit Eligible.

    Read more...


Content

Getting Started

Preview Available

+

Welcome

Understanding Responsive Design

Resolutions We Will Be Targeting

A Look at What We Will Build

Wireframing Layouts in Illustrator

Preview Available

+

Setting Up the High Resolution Wireframe

Building the Header

Setting Up the Navigation and Slideshow

Constructing the Content Boxes

Creating the News Feed Area

Finishing Up with the Footer

Starting the Medium Resolution Wireframe

Building the Header and Navigation Area

Building the Slideshow and Content Boxes

Constructing the News Feed

Finishing Up with the Footer

Setting Up the Low Resolution Wireframe

Wireframing the Header Area

Constructing the Main Navigation Menu

Building the Content Boxes

Setting Up the News Feed Area

Finishing Up and Final Thoughts

Building the Designs in Photoshop

+

Setting Up the Wireframe for Import

Opening the High Resolution in Photoshop

Breaking Apart the Wireframe pt. 1

Breaking Apart the Wireframe pt. 2

Breaking Apart the Wireframe pt. 3

Formatting the Header

Setting Up the Site Logo pt. 1

Setting Up the Site Logo pt. 2

Updating the Logo

Formatting the Navigation Menu

Inserting the Menu Items

Building the Slideshow

Setting Up the First Content Box

Inserting the Content Box Title

Building the Second Content Box pt. 1

Building the Second Content Box pt. 2

Building the Second Content Box pt. 3

Setting Up the Third Content Box

Inserting the Content Box Photo

Placing the Content Box Title

Inserting Placeholder Text

Finishing Up the Design

Setting Up for the Medium Width Design

+

Preparing the Wireframe for Import

Bringing the Wireframe Into Photoshop

Extracting the Header

Pulling Out the Menu and Slideshow

Finishing Up the Wireframe BreakUp

Formatting the Header

Building the Navigation Menu

Formatting the Slideshow

Setting Up the First Content Box

Finishing Up the Content Boxes

Formatting the Footer

Setting Up for the Low Width Design

+

Bringing the Wireframe into Photoshop

Extracting the Header and Menu

Pulling Out the Content Boxes

Finishing Up the Wireframe Breakup

Formatting the Header

Building the Navigation Menu

Readjusting the Layout

Setting Up the First Content Box

Formatting the Second Content Box

Finishing Off the Design

Getting Set Up for Responsive Design

+

Setting Up the HTML Page

Setting Up the External Style Sheet

Testing the External Style Sheet

Building the Three Media Queries

Testing the Media Queries

Using Commenting to Simplify the View

Building the HTML Structure

+

Building the Main Layout Structure

Wrapping the Code into a Container Div

Building the Main Navigation Menu

Structuring the Content Boxes

Building the News Feed Area

Setting the Footer Structure

Constructing the High Res Layout

+

Getting Started with the High Res Layout

Formatting the Layouts Header

Formatting the Menu pt. 1

Formatting the Menu pt. 2

Formatting the Slideshow

Setting Up the Content Boxes

Applying Formatting to the News Feed

Finishing Off with the Footer

Building the Medium Res Layout

+

Formatting the Navigation Menu

Applying Formatting to the Slideshow

Setting the Content Box Formatting

Adjusting the News Feed

Finalizing with the Footer

Setting Up the Medium Resolution Layout

Formatting the Header

Constructing the Low Res Layout

+

Getting Started with the Low Res Layout

Formatting the Header and Nav Menu

Formatting the Content Boxes

Applying Formatting to the News Feed

Finishing Up with the Footer

Initial High Resolution Formatting

+

Getting the Design Underway

Formatting the Header

Formatting the Main Nav Menu

Settings for the Content Boxes

Applying Formats to the News Feed

Final Thoughts on the Design

Starting the Medium Res Formatting

Formatting the Header and Nav Menu

Formatting the Content Boxes

Setting Up the News Feed and Footer

Initial Low Resolution Formatting

Quickly Finishing the Low Res Design

Adding Graphics

+

Extracting the Logo from Photoshop

Inserting the Logo into the Code

Extracting the Slideshow

Getting the Slideshow Inserted

Pulling Out the First Content Box

Extracting the Remaining Content Boxes

Formatting the Content Box Images

Formatting the Medium Resolution Images

Styling the Low Resolution Images

Conclusion

+
Resource Files

Course Wrap Up

Credits

+

About the Author

SkillsFuture Credit Eligible
SGD $49.00
(Price excludes GST)
GET ACCESS NOW
Convince your boss email
This site is best viewed using the latest versions of Google Chrome, Apple Safari, Mozilla FireFox, Microsoft Internet Explorer 11 and Edge which supports HTML5/Webkit technologies.