Quick Contact

Close x

Request Video

Close x

Our Spiders Web

Close x

Sorry this bit isn't ready yet, keep checking, or let me know if you are interested in me helping you do a web-site with video tutorials 

Placeholder Picture

Foundation Framer Tutorials

Hello From Sunny Bali

Welcome To Foundation Framer Tutorials

My Name Is Wayan & I Can Help You With Starting : Building : Developing A Responsive Web-Site Using
Responsive Site Designer (RSD) Or Foundation Framer (RFF) From COFFEE CUP SOFTWARE

There is an evergrowing selection of Video Tutorials Available & In The Making: Scroll on down a bit to see whats showing Now  
There is lots more to see and find out about 
Go Take A Look Around 

HAVE A GREAT DAY WHEREVER IN THE WORLD YOU ARE

Placeholder Picture
Move on Down A Bit
Videos Showing Now
Placeholder PicturePlaceholder PicturePlaceholder PicturePlaceholder PicturePlaceholder PicturePlaceholder PicturePlaceholder Picture

Custom Made Videos

If You Can't Find What You Are Looking For Or You Want something Specific Fire Off A Request & I will See What I can Do,,
It Might Take A couple Of Days, But I will Do My Best.

Yes Please Wayan Make Me A Custom Video
Placeholder Picture
Move on Down A Bit

Past Present & Future Projects

I have helped many people with their web-sites, from simply helping solve particular problems, to designing & building full blown sites. If you find yourself stuck or in need of a bit of guidance, ideas, or building one for you from scratch I am here to help in anyway I can.

Past Projects I Have Been Involved With
Placeholder PicturePlaceholder PictureReview Elliot CaravansPlaceholder PicturePlaceholder Picture
Click Image To See Review & Testimonials
Present Projects I Am Currently Involved With
Placeholder PicturePlaceholder Picture
Placeholder Picture
Move on Down A Bit
Don't Get Left Behind The Eight Ball
Responsive Designs

You cannot plan for and design a responsive, content-focused, mobile-first website the same way you’ve been creating websites for years—you just can’t. There are a good number of front-end editors out there when it comes to responsive design. Some are based on Bootstrap, others on different frameworks, and so on. However, most of them suffer from the same problem — they lack absolute control and originality.  As such, most responsive design webpages tend to look similar in nature. If you have ever experienced the same problem, consider it solved.
Meet RESPONSIVE SITE DESIGNER with RFF Wireframe
a unique solution by CoffeeCup that gives you have absolute control over your design and at the same time it helps you create intuitive and responsive design without coding. There is still however a bit of a steep learning curve which can make actually starting to use Responsive Foundation Framer a bit daunting.
Meet Foundation Framer Tutorials
ready made easy to follow video's starting at the beginning and taking you right through to a finished responsive design. I also have a BESPOKE SERVICE which includes One To One: up front & personal videos made especially for you & your specific requirements. Bespoke Project: Your project directed by me starring you. Finally my ultimate service for those who get stuck, don't have the time or just need someone to DO IT FOR YOU, visit my bespoke page for more details

Placeholder Picture
Move on Down A Bit

Our Spiders Have Been Busy Spinning Their Webs For You, There are sample site pages with videos to follow along, They have also produced a couple of stunning full blown web-sites for you to follow along with at your own pace.  Fully customisable, or build them the same it's up to you. 

Go Take A look At What They Have Done
Placeholder Picture
Move on Down A Bit

Components

There is also a selection of Components available for download

Download Center
Placeholder Picture
Move on Down A Bit
Links To Other Tutorial Sites

There Are Other Tutorials Components & Building Blocks From Members Of The Coffee Cup Forum That have made Available  Go Take A Look If You Can't Find What You Want Here, Maybe They Will Have Something

Placeholder Picture
Move on Down A Bit
Helping Me To Help Others Help Themselves 
Please Note The Videos & Other Things I Do To Help, Are Free Always Will Be,
The Donations Are Totally Up To You Whether You Wish To Help Please Don't Feel Obliged In Any Way Shape Or Form

Bali & all of Indonesia for that matter, still has an enourmouse gap between the "Have & the Have Not", Education & Health care being of a particular problem for the "Have Nots". It is one of my passionate beliefs that both of these are a basic requirement for a sustainable socially aware system, especially in developing countries. I have lived in Indonesia now for a long time now and during that period have experienced the good & the bad of some organisations (which abound here in Bali) all puporting to being " Doing something To Help", some of which were complete scams. I finally have chosen 2 to support & become part of this venture. I believe them to be the "Genuine Article" and also they fit in with my belief for an Educated & Socially Aware Healthy society, which given the right support and werewithal, can eventually develop and start
"HELPING THEMSELVES"

Beating Poverty Through Learning 
Education Is The Key
Education Is The Key
Beating Poverty Through Vision  
A Sight For Sore Eyes
Free Cararact Surgery
copyright
Close x
Placeholder Picture

The breakpoint toggle is a really useful tool for those of you starting out and can't yet get into working at mobile first.

Toggle allows you to start the design with a large view, then come down to the mobile point and start styling.

But it shouldn't become a crutch, use it to learn to visualise your site for mobile first

Let's go Watch The Video
Please Note Sometimes Youtube doesn't start the video in HD, don't ask me why,, so if it's a bit fuzzy, go to the settings on the Youtube bar, select the thingy that looks like a COG, choose Quality,, hit the highest one shown, & there you are clear as a bell
Close x
Placeholder Picture

Getting Your Head Around The Grid,Rows & Columns is hard for the newby, or even the experienced coder who did it the old fashioned way.
Once you can get your head around how it all works things get that much easier, when you get that
EUREKA moment (and you will), everything becomes crystal clear.

Let's go Watch The Video
Please Note Sometimes Youtube doesn't start the video in HD, don't ask me why,, so if it's a bit fuzzy, go to the settings on the Youtube bar, select the thingy that looks like a COG, choose Quality,, hit the highest one shown, & there you are clear as a bell
Close x
Putting It All Together With Foundation Framer Tutorials

Learning & understanding the flexible GRID and how the rows/columns etc fit together is all well & good, it takes a leap of faith after that to get down & dirty with putting it all together into something tangible that starts to look like a web-site.

This video shows a basic style nothing fancy but gives a good starter for 10 to get you on the way to producing something cool

Let's go Watch The Video
Please Note Sometimes Youtube doesn't start the video in HD, don't ask me why,, so if it's a bit fuzzy, go to the settings on the Youtube bar, select the thingy that looks like a COG, choose Quality,, hit the highest one shown, & there you are clear as a bell
Close x
Get Into Orbit With Foubdation Framer Tutorials

Although Orbit has been brough back from the dead, by Foundation, the ORBIT Component has still not by Coffee Cup, hovever it still has it's uses, and is a quick & simple slider, easily customised, ideal to get you going, I use it for displaying my customer stories, I think it does the job splendidly. The videos takes you through some very easy steps to get something looking & working great.

Let's go Watch The Video
Please Note Sometimes Youtube doesn't start the video in HD, don't ask me why,, so if it's a bit fuzzy, go to the settings on the Youtube bar, select the thingy that looks like a COG, choose Quality,, hit the highest one shown, & there you are clear as a bell
Close x
A Responsive Menu With Foundation Framer Tutorials


Many people want a good clean easy to do responsive menu, shouldn't be too much to ask should it. Well folks here is one for you to follow along with, and you can also download it as a component if you want to. Now how cool is that

Let's go Watch The Video
Please Note Sometimes Youtube doesn't start the video in HD, don't ask me wqhy,, so if it's a bit fuzzy, go to the settings on the Youtube bar, select the thingy that looks like a COG, choose Quality,, hit the highest one shown, & there you are clear as a bell
Close x
A Responsive Menu With Foundation Framer Tutorials

Death Watch Beetle 
This was a new project by David Huntley the author of the novel. Being from the old school of coders so to speak, he was having just a little bit of problem with getting the pages centered & responsive. Working together using video tutorials which I sent direct to him, due to that he couldn't always spend 100% of his time working on the project he preferred to be able to watch them when he wanted to. Over a couple of months we sorted it out, got it looking good, and the book started flying off the shelves. Well done David.

"His help, advice and patience gave me the opportunity to finish my web-site and he continues to help whenever I need something."
David Huntley ~ Dallas ~ Texas ~ USA Sept 2016
Close x
A Responsive Menu With Foundation Framer Tutorials

Elliot Caravan & Storage S.A
A Project to help Tony get his first venture into web-design & building, he knew his war around a bit, but was struggling with it. using a mix of my bespoke video tutorials & readymade one's the new site came along nicely. Tony was a good student, always attentive and quick to learn. In the end Tony was happy, His client was happy, and his clients visitors were estatic.

"He showed me how to turn my tired old web-site.into a FERRARI"
Tony S.A June 2016
Close x
A Responsive Menu With Foundation Framer Tutorials

Ezorb Calcium Medical Grade Herbal Suppliments
What started out as a helping hand to fix a slider problem tutned into a full blown bespoke web-design. With Larry's unique approach to having ALL pages on the site appear in a modal window (except the home page) it became a bit of a challenge to get the responsiveness right. A few design changes were implemented on the way but eventually we got the one that Larry decided was the one. It was a long labour of lovfe, design & sometimes sheer frustration. But the web-site is sucessfull with on-line orders  increasing month on month.

"A delight to work with Wayan who made our website look great, and he always went the extra step or two to make sure everything was nice & neat."
Larry Penny ~ Midland ~ Texas ~ USA Sept 2016
Close x
A Responsive Menu With Foundation Framer Tutorials

Maxim Shoenen Belgium
Another full custom built site, this one for a shoe shop in Antwerp Belgium. Dominiyek (the designer) didn't have the time to do this himself so he asked me he wanted a specific clean design, with no fancy stuff going on, except for a "Gallery" showcase using the modal window, each and every shoe on each page had to open in a modal window, and on the "Braned" pages he needed it as a slide-show type of thing, with links then to the actual shoe details. This entaile over 2,500!!! modal windows on the site. What a job. All done & dusted, All happy. 

"A very patient & understanding man, he gave us exactly we wanted."
Doniniyek ~ Antwerp ~ Belgium Nov 2016
Close x
A Responsive Menu With Foundation Framer Tutorials

Sabbaticals Over Switzerland
What started out as a helping hand to fix a slider problem tutned into a full blown bespoke web-design. With Larry's unique approach to having ALL pages on the site appear in a modal window (except the home page) it became a bit of a challenge to get the responsiveness right. A few design changes were implemented on the way but eventually we got the one that Larry decided was the one. It was a long labour of lovfe, design & sometimes sheer frustration. But the web-site is sucessfull with on-line orders  increasing month on month.

"I am having a blast learning from Wayan, I love the way he teaches and the videos he makes."
Karen @ sos  ~ Switzerland Jan 2017
Close x
A Responsive Menu With Foundation Framer Tutorials

Practical Home Maintenance S.A
Another one from the house of Tony Holden Design, this one is a little more ambitious than the first one with background images, hover effects on service cards & a slider. Once again with the help of a few video's he has got himself a really good & great looking home page. More to go yet as it is still very much a Work in Progress. 

"~~."
Tony Holden ~ S.A ~ Oct 2017
Close x
A Responsive Menu With Foundation Framer Tutorials

Foundation Framer Tutorials
This is one I am doing for me & anybody wishing to buils a web-site using RSD with the Foundation wireframe. I am calling it
~BUILDING A WEB SITE STEP BY STEP ~ 
It is still developing, it will have all sorts of information on it, not only about how to but also the why's and wherefores, the thinking about it, preparing to build, and much much more.  

there are some examples of individual pages including ~ 
HOME PAGES   
CONTACT US PAGES
PARALLAX SCROLLING PAGES   
with more planned, sort of a pick & mix you never know there might be something that grabs your eye and you feel you can use either as it is or customize it a bit further. 

There are a couple of full blown web-site examples with different pages, and other stuff going on.  

When it's closer to being ready I will put it up, in the meanwhile if you are interested in taking a sneak peak, let me know by completing the form & I will give you a sneak preview.  
Wayan