search

dwyl / tachyons-bootstrap

👢Bootstrap recreated using tachyons functional css
http://tachyons-bootstrap.dwyl.com
48 stars 4 forks source link

Create Video introduction to Tachyons Bootstrap #9

Closed Cleop closed 6 years ago

Cleop commented 7 years ago

Video ScreenCast / Workshop to teach the UI framework to other people (to be tested on F&C people and then taught to NHS/MWV/SL etc.)

iteles commented 7 years ago

Added dependency label as this can only be completed once the guide has taken some form and has had some of the issues closed and tested (i.e. when there is something to video).

iteles commented 7 years ago

Not sure whether to open this as a separate issue, but I would like the video to include views of:

Cleop commented 7 years ago

@iteles @nelsonic and anyone else with views on good video intros:

What? 2 TB intro videos featuring a presenter and screenshots.

Why 2?

  1. Will be a short introduction to what TB is, it will be most accessible to people who may have already heard of bootstrap or functional css.
  2. Learn-TB will be an introduction to TB for someone who may not know what bootstrap is / or how to use it. It will demonstrate how to use / edit a component. Duration?
  3. Intro (1 - 2mins)
  4. Learn-TB (5mins)

Who is our primary target audience?

How?

Content INTRO VIDEO Why was TB created?

LEARN-TB Show end result first and say, this video will show how we got there.

Check out the 'Try Elixir Intro video': https://www.codeschool.com/courses/try-elixir It's got parallels with our intro video as it's both presented and featuring code, only lasts 30 seconds and is about introducing a project, not going into great depth about a concept.

Cleop commented 7 years ago

INTRO VIDEO

This script takes 1 min 5 sec to read but will probably expand to 2mins with pauses and intro/ outro etc. So I wouldn't encourage more content if possible.

AUDIO VISUALS
(WELCOME)- Hello, my name is Cleo and I'm a developer at dwyl. This is an introduction to tachyons-bootstrap. Presenter to camera (full screen) followed by intro transition with dwyl project title
(WHY) tachyons-bootstrap has been created to give you access to a wide range of components that you can reuse in your own applications, quickly and painlessly. Giving you the opportunity to have consistent styling that can also be easily customised or scaled for bigger teams. (?) Presenter in small / Screen scrolling through TB components slowly or list of bullets of benefits of TB
(WHAT) tachyons-bootstrap is a responsive component guide inspired by twitter bootstrap. It's been built using tachyons and functional css in order to encourage you to understand the code you're implementing. Presenter in small / Screen scrolling through TB components slowly
(HOW) Check out the guide at http://tachyons-bootstrap.dwyl.com Include the tachyons stylesheet link in the <head> of your app, then simply copy and paste the code for the components you wish to use. That's all it takes! If you want a more detailed introduction, checkout our learn-tachyons-bootstrap video linked below Presenter small Show adding script, adding code and then code displaying
(CONCLUSION)- We hope you enjoyed this video please subscribe and check out our other resources on github using the link below. Presenter to camera (full screen) followed by outro transition with dwyl project title and links to next video / the site
Cleop commented 7 years ago

@iteles @nelsonic

@iteles said - assume not watched first. Mention other content and give a 2 sentence intro to TB for a little context.

Cleop commented 7 years ago

LEARN-TACHYONS-BOOTSTRAP VIDEO

This script takes 1min 45secs to read but is likely to expand to approx 3 mins with demonstrations of the various actions involved.

AUDIO VISUALS
(WELCOME) Hello, my name is Cleo and I'm a developer at dwyl. This video will teach you how to use tachyons-bootstrap. Presenter to camera (full screen) followed by intro transition with dwyl project title
(WHAT) tachyons-bootstrap is a component guide inspired by twitter bootstrap. It's been built using tachyons and functional css. To watch our tachyons-bootstrap introduction video or to learn more about the other topics mentioned in this video, see the list of resources in the description below. Presenter in small / Screen scrolling through TB components slowly or navigating by clicking on the contents
(WHAT) So let's build something! Go to http://tachyons-bootstrap.dwyl.com, and select the Forms section in the contents. We're going to create our own basic form. Presenter in small / Screen view of zoomed in form
(HOW) Step 1 - In your preferred text editor, using a basic html page set up, add the tachyons link in the <head> of your app. This stylesheet link gives you access to all of the tachyons classes. Presenter small - Show adding script in atom
Step 2 - Let's create a<div> which will contain our form. You'll notice that I'm adding classes that will center it, give it a width of 20% and give it a little top padding. Copy and paste the code from the component on the tachyons-bootstrap site into your html file. The components are made up of standard html with tachyons classes added to them. Presenter small - Show copying code from TB site and then pasting into atom.
Step 3 - Open your file in your browser to take a look at your new component! Presenter small - Show opening file in browser
Step 4 - Make any edits or customise the component to suit your needs, try adding or removing the tachyons classes. Presenter small - Show customising component and new look
(CONCLUSION)- That's it! Simply copy and paste the code for the components you want and you're ready to go. We hope you enjoyed this video please subscribe and check out our other resources on github using the link below. Presenter to camera (full screen) followed by outro transition with dwyl project title and links to next video / the site

Need:

Cleop commented 7 years ago

@iteles @nelsonic @sohilpandya @markwilliamfirth.... presenting the Introduction to Tachyons Bootstrap and How to use Tachyons Bootstrap videos: https://drive.google.com/open?id=0ByzPFwE23Wu2Y1lfQW1WVGV1Z3c https://drive.google.com/open?id=0ByzPFwE23Wu2ZnBHUHNWSndLRHc Particularly interested in feedback on:

Once I have some feedback I can make any possible amends and following that, we can pop them on YouTube. Then TB will be ready and simply awaiting the dwyl-site redesign before we publicise!

nelsonic commented 7 years ago

Darn it! I started writing a reply to this on the day you posted but it did not send/save ... 😢 I think both videos are superb and should go on YouTube ASAP! (Monday morning?!)

iteles commented 7 years ago

Can't believe I didn't see these at the time.

@Cleop I love them so much! The stuff going on in the background is just perfectly matched. Amazing!

Cleop commented 6 years ago

These have now been uploaded to YouTube and are ready to be made public whenever we launch.

Cleop commented 6 years ago

@iteles - are you happy to close this? Putting the videos live on YT is a checkbox on issue #43