User:Vtaylor/Codecraft/Works
f rom sheet 2020.3.12
Contents
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
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.
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
