Vanilla JavaScript Angular, React & Vue Node.js Python & Django PHP npm, Gulp & Grunt HTML & CSS Sass & LESS


Add color to your design! You can build off the example below or add to your previous design by selecting My Code from Last Lesson” under the Code” menu below.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

Reminders Set the background color: background(r,g,b); Set the outline color: stroke(r,g,b); Set the interior color: fill(r,g,b);

Don’t forget, you need to call stroke() and fill() before you draw the shape!

r — amount of red, from 0 (none) to 255 (maximum) g — amount of green, from 0 (none) to 255 (maximum) b — amount of blue, from 0 (none) to 255 (maximum) For more, check out the background, stroke and fill pages on

Animate your program using mouseX and mouseY! You can build off the example below or add to your previous design by selecting My Code from Last Lesson” below.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

If you forget the syntax for setup() and draw(), here is a reminder!

void setup() { size(500,400); }

void draw() { background(0,0,0); fill(255,255,255); ellipse(mouseX,mouseY,60,60); } We recommend a maximum canvas size of 500 by 400 pixels for this tutorial, but feel free to experiment your window skinnier or shorter!

For more, check out the mouseX and mouseY pages on

A Self-Learning, Modern Computer Science Curriculum


Frontend Roadmap

Back-end Roadmap

DevOps Roadmap

And you must be deliberate in your approach.

No one becomes an accidental master of anything.

It takes focused effort and a clear vision for what it is that you want to accomplish.For developers, there are two categories of fundamentals that are critical to mastery:

Engineering fundamentals

Language/framework fundamentals

For our purposes, we want to focus on the engineering fundamentals.

What does that include?

Things like:





Understand why a fragment of code does what it does

Programming is fundamentally a problem-solving exercise.

It’s about taking in data, understanding context, and formulating the best possible solution.

Probably the most important part of developing any problem-solving ability is repetition and pattern recognition.Read other people’s code

Programming - Intro Binary   ASCII   CSS   PHP   JS   GIT   Ruby on rails   Markdown   HTML   Ruby   BASIC   How programming works   Python   Programming   Terminal   3D   Autocad   CAD   Photogrammetry   Illustrator   Sketchup   DRY (Don’t repeat yourself)  Basic principles   R   Webflow

Scrum Agile Git APIs SEO SEM Internet Dominios Hosting

All programs use basic instructions as building blocks. Here are a few of the most common ones, in English:

  • Do this; then do that.”
  • If this condition is true, perform this action; otherwise, do that action.”
  • Do this action that number of times.”
  • Keep doing that until this condition is true.”

SEO - Search Engine Optimazation

SEM - Search Engine Marketing

Partes de un ordenador




GIT a version control system for tracking changes in computer files and coordinating work on those files among multiple people

Python Text in Python is considered a specific type of data called a string.


  1. Configurar una VPN

  2. Tener acceso a servidor mediante FTP desde cualquier sitio.

  3. Ubuntu y linux

  4. Programar en HTML, CSS, JS y Python

  5. Introducción

Mobile App Website Web App

  1. Diseñador

Herramientas: Ilustrator + Photoshop + Indesign Color Usabilidad Fuentes Estructura

  1. Desarrollador Front-end

HTML CSS - (Cascading Style sheets)

Javascript -

Herramientas: Sublime, Filezilla

  1. Desarrollador Back-end


Ruby -

Ruby on rails -

Python -

CMS: Wordpress,

  1. Conocimientos generales

Scrum Agile Git APIs SEO SEM Internet Dominios Hosting

Recortado de: HTML5 Text Level Semantics reference: • a element – anchor. useful to provide a link for a block of content. also helpful for cross reference using id. e.g. a text ad that should have a link wherever it is clicked. • em element – emphasis. emphasizing a particular word or p####ase. e.g. you are not welcome!. not to be confused with i element. typically emphasis changes the meaning of a sentence in a subtle way. think about this example. • i element – change of context. voice, thinking, mood, etc. e.g. “i loved it” not really but can i tell the truth? • strong element – represents strong importance of its contents. does not change the meaning of a sentence. e.g. warning: contents are inflammable. • b – content to draw attention. without adding importance or change in mood or voice. e.g. Ragu and Anu are brothers since birth. • mark – part of text highlighted for reference purpose. may not be intended by original author. e.g. searched word highlighted in search results. • small element – small print. disclaimers, caveats, legal restrictions or copyrights. meant for short runs of text only. when legal info becomes main content, it should not be marked as small. also it doesn’t mean low importance. small content can be marked as strong. e.g. violation of this rule is unacceptable • s element – content no longer relevant or accurate. not to be confused with del. e.g. MRP Rs 100; Our price Rs 99.99 • del element – removal from document. e.g. todo list done entries. • cite – citation. title of the quoted content from elsewhere. referred content. not to be confused with quote q element. it is only title. • q – quoting something. should not include quotation marks. it is work of styling. • dfn – definitions. just as in the beginning of formal documents. e.g. MRB • abbr – marks something as abbreviation. title attribute is optional to provide the expanded version of the abbreviation. • data – provides machine readable form of content. e.g. patthu is the tamil word for ten. also see time`. • time – special case of data. date, time, time zone, etc. e.g. . • code – computer source code. e.g. The code element represents a fragment of computer code. • var – variable. placeholder. e.g. Rs 25 x qty = total. • samp – sample program output. e.g. Output: Hello World! • kbd – user input. e.g. Ctrl+F4 or File | Exit • sub and sup – sub and superscripts respectively. not for styling (branding LaTeX). Only to be used if the superscript and subscript meaning is important. e.g. E=MC2 • ruby – nothing to do with ruby language. useful in case of parallel annotation with the content. e.g. english transliteration over tamil words in a sentence. • span – means nothing. used with global attributes such as class, lang, or dir. e.g. In Tamil, we greet with vaanga. Another e.g. def initialize. • br – line break. not actually meant for styling/presentation. again meant for meaning. useful for poetry, address, etc. • wbr – line break opportunity. useful in source code markup. e.g. def a_method(param1, param2, param3) for usage summary look here. Sections reference: • body – main content of the document. just one per page. • section – parts of the document. e.g. home page can be split into intro, news items, contact info, etc. tabbed box can have different section for each tab, chapters. • article – useful for syndication. independently distributable or reusable. e.g. forum post, blog post, etc. article may have sections. sections can have articles. go figure. • nav – navigation. a section with navigation links. special case of section. e.g. table of contents, links to major pages that should appear in all the pages, etc. • aside – content related to and part of main content. special case of section. could contain q quote. e.g. highlight of an article. • h1, h2, …, h6 – headings, subheadings, etc. e.g. 

How to:

Programming without using hands

You never thought it is possible! Did you?

• hgroup -- heading of a section. used for grouping h1, h2, .... e.g. previous example could be contained with this tag.
• header -- group of introductory or navigation aids. could contain hgroup.
• footer -- represents footer. not necessarily that has to appear in the end. because it is presentation concern. e.g. author, copyright, etc. of an article.
• address -- not meant for postal addresses unless it is related to contact info of the current page or article. could be part of footer.
Content Flow • figure – contains a unit where the main content can flow around. similar to magazine content where the text can flow around an image, side bar, did you know?, etc. • figcaption – provides a caption for the figure. • div – avoid using it whatever it means. this is probably the mostly used tag though. :) Grouping • ul – unordered list • li – list item. need not have closing tag. e.g. 
  • india
  • srilanka
• ol -- ordered list
• dl -- definition list. e.g. <dl><dt>gold<dd>a rare metal<dt>silver<dd>not that rare</dl> where dt is defn title; dd is defn description
• pre -- pre-formatted text. useful for formatting code for example. ascii art. etc.
• #### -- separates content. typically horizontal rule. but again it is the meaning that matters in HTML5; not presentation.

Forms • form — form which contains elements that take input • input — . It has many other types such as textbox, radio, submit, reset. • button — alternative to input when it comes to buttons such as submit or reset. It have more possibilities for styling t####ough CSS. • fieldset — Helps to group related items such as radio buttons, checkboxes, etc. • label — a label to go along with the input controls. e.g.



(Cascading Style sheets)



(Hyper text Markup language)

HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML is the Web’s core language for creating content for everyone to use anywhere.

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags). The <!DOCTYPE> declaration is not case sensitive.

Elementos HTML

Headings - H1, H2,H3,H4,H5,H6 Paragraphs Links Images Buttons Lists - ol, ul


Programming Tools

Abstract -



Graphql -

React -

Docker -

Node.js -

Visual studio -

Postgresql -

Mysql -

Jquery -


MongoDB -

Nginx -


  • API - Application Program Interface
  • Back end/server-side - the data access layer
  • CMS - Content Management System
  • CRUD - Create, Read, Update, Delete
  • CSS - Cascading Style Sheets
  • DNS - Domain Name Service
  • DOM - Document Object Model
  • ES(6) - ECMAScript
  • (S)FTP - (Secure) File Transfer Protocol
  • Front end/client-side - the presentation layer
  • HTML - Hypertext Markup Language
  • HTTP(S) - HyperText Transfer Protocol (Secure)
  • JSON - JavaScript Object Notation
  • MVC - Model View Controller
  • REST - Representational State Transfer
  • SPA - Single Page Application
  • SQL - Structured Query Language
  • SSG - Static Site Generator
  • SSH - Secure Shell
  • SSL - Secure Sockets Layer
  • TLS - Transport Layer Security
  • VCS - Version Control Systems (Git)
  • VM - Virtual Machine


Python -

Variables II

In this video you saw that the following two are equivalent in terms of assignment: x = 3 y = 4 z = 5 and x, y, z = 3, 4, 5 However, the above isn’t a great way to assign variables in most cases, because our variable names should be descriptive of the values they hold. Besides writing variable names that are descriptive, there are a few things to watch out for when naming variables in Python.

  1. Only use ordinary letters, numbers and underscores in your variable names. They can’t have spaces, and need to start with a letter or underscore.
  2. You can’t use reserved words or built-in identifiers that have important purposes in Python, which you’ll learn about t####oughout this course. A list of python reserved words is described here. Creating names that are descriptive of the values often will help you avoid using any of these words. A quick table of these words is also available below. (image/png)3. The pythonic way to name variables is to use all lowercase letters and underscores to separate words. YES my_height = 58 my_lat = 40 my_long = 105 NO my height = 58 MYLONG = 40 MyLat = 105 Though the last two of these would work in python, they are not pythonic ways to name variables. The way we name variables is called snake case, because we tend to connect the words with underscores.


Javascript -





Ruby -


Ruby on Rails, or simply Rails, is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing.

January 1, 2020