User:Vtaylor/Codecraft/Works

f rom sheet 2020.3.12

Overview

 * Codecraft Works platform app lms ? codecraft works online web editor live
 * CodecraftWorks project works view panel customer student

Live:0
 * Welcome to Codecraft Works Online Web Editor https://codecraft.live/home

live:what
 * CodecraftWorks is an easy to use web-based editor to creating web projects with html, css, and javascript. These are the coding languages use to make web pages and web based applications.

live:fromCCW
 * From the CodeCraftWorks home page, pull down the Learn menu and select Web Editor.

k on program projects with your instructor

live:direct
 * Enter the web address https://codecraft.live/home

Look around. Check out the sample projects created by others. You
 * see the source code - html, css and javascript

Once you are signed up and have your own Codecraft account you can
 * copy and modify projects created by others. This is a good way to get started. You see the code that is required, change it a little or a lot and make it your own project as you like.
 * create new projects
 * learn more by working on the program challenges. Some are easy to follow step-by-step guides. Others are harder and you figure out it out on your own.

Learn more ...

There are plenty of great online resources to help you learn about everything you can do with the CodecraftWorks Web Editor. Here are just a few. Find some you like and bookmark them so you can go back to them when you need to.

Codecraft:0		https://www.codecraftworks.com/

codecraft:mission		https://www.codecraftworks.com/

codecraft:about		https://www.codecraftworks.com/about/

== Getting started == first:0 ? tutorials / guides		first look - what is this? what am i supposed to do here?

first:webDevExperience		web developer - know what all this is, may need some guidance to use

first:basics		?? start from zero / walk thru

first:html		some html knowledge can start here with guidance / instuctions

first:intro		what is this why

Login
Login:0	Logging in to Live / How do I login in to Live?

login:singlesignin
 * CodecraftWorks makes it easy to get coding right away. Just login with our SingleSignin feature - no special account or extra password required.

Most kids have a school issued email account (usually Microsoft or Google) or a personal email address. Use which every you use most as your Codecraft Works account and login. For your protection and convenience, Codecraft does not store your password for any accounts.

There are 3 ways to sign in – with you Google or Microsoft account, or with a web address that we will sent to your email account

login:google
 * Enter your Google account

login:microsoft
 * Enter your Microsoft account

login:email
 * If you have an email address but don't have a Microsoft or Google account to use with SingleSignin, that works too.

Enter your email address. Check your email for an email from ** It will include a link that is your personal access to CodecraftWorks web editor. Click on the link provide in the email. This takes your to the CodecraftWorks main page and you are automatically logged in.

You will have to do this every time you use CodecraftWorks. We don't keep the login information of this link for your protection and privacy.

login:fail
 * Check your account information. If you are using Google or Microsoft, check that you have logged into your account first. This is "single sign on" - * is piggy backing on your account so you only need one account login and password. * does not keep any of the login information..

Program
Program:0
 * Groups are organized into programs with an instructor and a regular meeting schedule to work on courses and activities.

program:no
 * ? join program without program code / programs that don't require a code

program:yes
 * If you need a code for your program, contact *. Some programs have a fee to get an access code.

program:code
 * Buy Program Codes to join. For some programs, there is a fee. Pay the fee, get a code to get access to the program

program:codeRedeem
 * Enter the program code and press / select / click Redeem

program:afterschoolClub		?
 * program code for each club

program:list
 * lists of My programs that you are signed up for, and Available programs - other programs you may be able to sign up for. Select a program ? tile to see the details.

== Web Editor ==
 * project
 * views
 * edit panel / pane
 * setting

Using the web editor

 * context html css js

Project / Work
Project:0		A Project is the app or web site. You can your own or you can copy an existing one to get started. Use the web editor to add and edit your code.

project:existing		Many projects are shared so you can see the code. You can clone or make a copy of a project as a basis for your own project.

project:explore		It is always helpful to look at the work of others. Look at the projects and the code to see examples of the work of others.

project:new		To create a new emply project, select Create New Project.

project:list		My Projects is the list of your own projects if you have any. Then there is a list of Shared projects. These are the work of others and can be viewed or cloned.

Settings
Setting:0		project edit settings

setting:project
 * Public / Private / Lock / Unlock

setting:public
 * Public projects can be seen and cloned by anyone. They are included in the Projects lists

setting:private
 * private projects can only be viewed by you, the author.

setting:lock
 * ?? Locked projects can not be edited. To edit a locked project, switch to unlocked, then edit.

setting:unlock
 * Unlocked projects can be edited. Switch to locked to prevent editing.

setting:delete
 * Delete Project ?? confirm delete

README.ms menu
setting:readme		Project README.md - code

setting:rmPreview
 * Project README.md Preview

setting:metadata
 * Author / Date created / Last edited

View / screen / window

 * browser window

View:0		editor screen windows options

view:cssOnly
 * Drag the CSS color bar to the top of the edit window to hide the html editor

view:htmlOnly
 * Drag the CSS color bar to the top of the edit window to hide the html editor

view:jsOnly
 * Drag the JS color bar to the top of the edit windoe to hide the html and css edit windows

view:readMe

view:split
 * On the left are 3 windows - one for each editor - html, css and javascript (js). On the right is the preview of the app. Use the edit and preview menu buttons to switch between views.

view:webPreview
 * To see what the user will see, switch off the edit to hide the code windows

z 	view:webDivAreas
 * Show / Hide the yellow rectangale around each object that is controlled by a div in the css code.

view:editOnly
 * select preview to switch off the right preview window, leaving just the edit windows

view:show
 * To show hidden editor windows, hover over the top top of the color bar until your cursor turns into a horizontal line with up and down arros. Use this to resize the window so you can see the other editor windows.

menu options navigation
shortcut:0		? most / all of the standard browser shortcuts work

shortcut:save		*-s save - must have cursor in an active edit panel. The works saved dialog box will confirn that your project has been saved. This works in any web editor panel in the web editor view.

Confirm:0

confirm:done		That's it. Thanks.

confirm:else		You're all set. Anything else?

menu:0		upper left "hamburger" edit project / editor navigation

menu:home
 * Return to the CodeCraft Live home page with links to lists of projects, programs, login/logout and user settings. For logged in users, your projects and programs are listed. Includes reedem program code and create new project options.

menu:webProjects
 * My projects, Shared projects, Create new project

menu:clone
 * Do you want to grab a copy of this project and make it your own?! * makes a copy of this project and saves it to your account. It will be in My Projects list now, ready for you to remix.

menu:settings
 * Project settings include project name, sharing, author, date created and last updated along with the project description ReadMe

menu:previewon
 * The code for editing is in the left window / frame. A preview of how your project looks is in the right window.

menu:previewoff
 * Editor view has windows for html, css, and javascript coding

menu:editon
 * There are 3 resizable windows for html, css, and javascript code for your project. Adjust the size of the windows by draging the color header bar.

menu:media

menu:save
 * Works < saved. Your project is safe ? if you don't save your project ??

menu: editoff
 * Full screen preview. This is how your project looks to others. Click the Edit button again to switch back to edit view

menu:?
 * 3 columns of windows - readme view, editor stacked, preview

== CodecraftWorks Accounts ==

Maillist:0		request subsribe

Kid:0		participant ? must have notkid associated permissions payment sponsor

kid:schoolAccount

kid:program

Notkid:0		kid relationship payer custody leader sponsor

notkid:teacher

notkid:parentGuardian

notkid:organization

notkid:account		https://www.codecraftworks.com/my-account/

notkid:settings

notkid:password		https://www.codecraftworks.com/my-account/lost-password/

Course
Course:0		courses ? may contain projects / other resources / teaching materials / sample projects

course:introCSeng		https://codecraft.live/courses/r6YXmgWfPBLy3fhrOjWc

slides:0		within course

slides:link		link - pull down list

cProject:0		course projects - may be * web projects / scratch / ?

cProject:link		link - pull down list

scratch:0		project within course

scratch:project		https://scratch.mit.edu/projects/149733254/embed

scratch:signin		https://scratch.mit.edu/#

scratch:join		https://scratch.mit.edu/join * Don't use your real name.

Challenges:0		coding challenges curriculum teach material

challenges:file		web address of coding challenge description

== Resources == Resources:0		reference / lessons / session guides

resources:independent		instructions / guidelines for do-it-yourself

resources:facilitated		facilitator / instructor / teacher materials

resources:html		w3schools https://www.w3schools.com/html/ is a good online resource for HTML

resources:css		See w3schools https://www.w3schools.com/css/default.asp CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.

resources:javascript		https://www.w3schools.com/js/default.asp

== notes ==

help bot DialogFlow

Oops:0		conversation - dialogflow text

Oops:yes

oops:no

oops:again

oops:noMatch

End:0		conversation - dialogflow text

end:thanks

end:goodbye

Ask:0		conversation

ask:more		Do you need more help?

ask:select	Learn more …	Here are some links to more detailed information

How to ... conversations

login

join a program
 * program is > program code > list of program > get code from organizer / buy code > redeem program code > program courses > facilitaor > meeting information

make a project
 * project > explore available > ? look at code ? > clone existing project / create new project > edit

clone a project

edit a project
 * web pages /apps > html / css / js windows / preview > editor > save > settings > readme > web address to share

issues	change or explain


 * edit windows - colapse css into javascript - not clear where css went - just top half of white bar over js to get it back. - gray bar at bottom with just html showing


 * names - overall, editor, windows, screens, views, buttons, click, select, toggle, switch,


 * tutorials, resources - links ? generlize with parameter in dialogflow


 * save - auto save or shortcut


 * self-directed courses - steps challenges


 * what is lock / unlock for ? looks like i can edit my locked project ? can others clone this?


 * "learning" html - only display - not any of rest of html structure ? expand view to include entire source ? hide therefore can't edit