Les Paso Los Links Sobre Lo Visto en Clase

Les paso los links sobre lo visto en clase
Están los links que compartió el profe, los tutores por el chat y otros, también el pdf
del plan de estudio de desarrollo web:
Videos - tutoriales para instalaciones
Videos - tutoriales coder
Carpeta - drive de la camada
Proyectos finales de alumnos coder
Beneficios coderHouse¿Front-end y Back-end: qué diferencias tienen?
Principios de Arquitectura de la Información
Introducción básica a HTML y CSSQue tengan una linda tarde!
-- Links con Lista de RECURSOS y HERRAMIENTAS de DESARROLLO ---

RECURSOS
https://www.notion.so/Repositorio-de-Contenidos-Desarrollo-
301736845df840af918a1830eb0d3f88HERRAMIENTAS
https://perpetual-curve-199.notion.site/Prototipado-y-Desarrollo-
b4a997f5ec0e4bf09737d76e181638fe--- Link con Lista de RECURSOS y
HERRAMIENTAS de DESARROLLO ---
Coderhouse on Notion
Repositorio de Contenidos Desarrollo
Material ampliado compartido por la Comunidad (254 kB)
Dario's Notion on Notion
Prototipado y Desarrollo
Listado de Herramientas, bienvenidos! (34 kB)
Les paso links sobre lo visto en clase
 Introducción a HTML
 HTML Basic Examples
 Conceptos básicos de HTML
 Qué es HTML y CSS: los básicos del desarrollo web
 Organizando un sitio web-estructura para sitios pequeños
Para inspirarse:
 Proyectos-CoderHouse
Coder:
 Clase-1
 Carpeta compartida
-----comparto ESQUELETO HTML ----<!Doctype html>

<html>
<head>
<title>
Este es mi titulo/ se muestra en pestania
</title>
</head><body>
<h1>Este es titulo principal</h1>
<h2 Vertebrados </h2>
<h3> Mamiferos </h3>
<h4> Bipedos </h4>
<h4> Cuadrúpedos </h4>
<h3> Aves </h3>
<h4> Voladoras </h4>
<h4> No voladoras </h4>
<h3> Reptiles </h3>
<h3> Peces </h3>
<h3> Anfibios </h3>
<h2> Invertebrados </h2>
<h3> Insectos </h3>
<h4> Voladores </h4>
<h4> No Voladores </h4> <hr> <p>Esto es un parrafo <br> corto</p></body>
</html> (editado)
Les paso links sobre lo visto en clase
 Listas HTML - ordenadas, desordenadas, atributos y tipos

 Etiquetas semánticas
 Tablas - explicación breve + ejemplo
 Formularios - form / input y sus distintos type / label etc ..
 Desplegables y sus atributos
 Enlaces HTML - atributos de destino/ titulos / sintaxis etc
 Diferentes tipos de enlaces
 Anidar correctamente etiquetas
Coder:
 Carpeta correspondiente clase 2

 Drive del curso
atajos de teclado
para Windows https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
para Mac https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
para Linux https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
Sitio que mostró el profe Darío en la clase: https://www.w3schools.com/html/html5_video.asp

https://www.w3schools.com/colors/colors_names.asp
Bancos de svg y png gratuitos
clipartmax.com
stickpng.com/es
pngimg.com
pngpix.com
favpng.com
Banco img jpg gratuitos
morguefile.com
littlevisuals.co
picography.co
unsplash.com
splithire.com
lifeofpix.com
allthefreestock.com
footer.com
https://www.pexels.com/es-es/ (Tiene videos también) (editado)
w3schools.com
HTML Video
Well organized and easy to understand Web building tutorials with lots of examples of how to
use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
w3schools.com
HTML Color Names
Well organized and easy to understand Web building tutorials with lots of examples of how to
use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
Pexels
Banco de Imagenes Gratis, Imagenes sin Copyright, Imagenes Libres de Derechos · Pexels
Banco de imágenes gratis y vídeos de archivo gratis que puedes utilizar donde quieras. ✓ Alta
calidad ✓ 100 % gratuito ✓ Sin necesidad de mencionar la fuente (419 kB)
Les dejo links sobre lo visto en clase
 Audios - formatos admitidos

 CSS - principales propiedades
 CSS - resumen de propiedades y sus valores
 Generador de paleta de colores
Coder:
Diapositivas de la clase

Material complementario

INCLUYE Menu con Submenu[Estructura]
 Box Model
 Display
 Position
 CSS-Tricks
 The CSS Box Model
 At the risk of over-repeating myself: every element in web design is a rectangular
box. This was my ah-ha moment that helped me really start to understand
 1 jun. 2009 (140 kB)
 w3schools.com
 Tryit Editor v3.7 (7 kB)

 [Tutora]Wanda Scarpato 12:06
 Envio links mencionados en el after:etiquetas semanticas
organizar el sitio web
iconos redes sociales
 Medidas en
css: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/
Values_and_units
 developer.mozilla.org
 Valores y unidades CSS - Aprende sobre desarrollo web | MDN
 Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de
valores que esa propiedad admite, y echar un vistazo a cualquier página de
propiedades en MDN te ayudará a comprender qué valores admite una
propiedad en particular. En este artículo veremos algunos de los valores y
unidades más comunes en uso.
https://codepen.io/santiagoav-the-bashful/pen/YzPqOBL
CodePen
Grids - justify-self y align-self
... (5 kB)
https://codepen.io/santiagoav-the-bashful/pen/WNbwXYy
CodePen
Grids - justify-content y align-content
... (4 kB)
Recuerden que lo mejor es siempre ir jugando con lo visto, luego van definiendo que
aplicarán y dónde.Gradient
 Gradient - resumen
 Gradient - linear-gradient()
Generador de gradient
 Gradient - generator
Transiciones
 Mozilla - Uso de transiciones

 Mozilla - ejemplos transiciones
 Introducción - Transiciones
 Ejemplos - transiciones
Generador de transiciones
 CSS 3.0 - Transition Generator

Transformación
Mozilla - uso de transformaciones

Transformaciones - ejemplos divertidos
Transformaciones - en relación al espacio que ocupan
w3schools - transformaciones
Generador de Transformaciones
CSS 3.0 - Transform Generator
Transformaciones - ejemplos modificables
Animaciones
 Mozilla - uso de animaciones

 Mozilla - ejemplos de animaciones
 Introduccion - Animaciones
 Animación - ejemplo interactivo
 @keyframes
 @keyframes2
 Libreria de animaciones con guía de instalacion y uso
Slider (solo css y html sin JS)
 Automatico 1
 Automatico 2
 Manual
de GRID y el código de Animaciones de hoy lo subí a Codepen, una plataforma para
probar el codigo en vivo.(agregue algunas cositas que me han preguntado: crear una
flecha para volver arriba que quede siempre visible y estilizar barra de navegacion del
navegador) https://codepen.io/oiradsollabec/pen/zYdxBRe (editado
)
Hola Kevin! Te dejo link de freepik ahi podes buscar https://www.freepik.es/

Freepik
Freepik| Recursos gráficos para todos
Descubre millones de vectores, fotos y PSD gratis y libres de derechos. (252 kB)
https://www.freepik.es/
Kevin oviedo hace 1 día

gracias kathe
Les dejo un par de links útiles

Sitio oficial
 Bootstrap
 Documentación
 Ejemplos
No oficial:
Bootstrap All Classes

Bootstrap Cheatsheet
iWeb.co.uk
Bootstrap Themes (paid AND free)
Tutorial
 Desarrollo web boostrap

getbootstrap.com
Introduction
Get started with Bootstrap, the world’s most popular framework for building
responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
Examples
Quickly get a project started with any of our examples ranging from using parts of the
framework to custom components and layouts.
1
Añadido a tus elementos guardados
Dario Ceballos 12:12
---- comparto codigo de clase Bootstrap ---
les dejo links útiles sobre lo visto en la clase de hoy

SASS----
 Instalación
 Manual
 Guía instalación
 Guía SASS
 Documentación
 Variables
 Funciones
 PLAYGROUD SASS : para ver como se transforma el scss a css.
BEM----
 Introducción a metodología BEM es una explicación super simple con

ejemplos, super recomiendo verlo aún si ya creen haber entendido
 aca va codigo SCSS de clase y un codigo de ejemplo para BEM ---EJEMPLO de
BEMAnimo!! que el mundo del desarrollo los pone a prueba con desafios, siempre
para mejorar...
 Zip

 scss1.zip
 3 kB Zip
 3 kB — Haz clic para descargar

 CodePen
 BEM example
 An example for CSS-Tricks that explains how the Block, Element, Modifier
syntax works. Forked from [Robin Rendle](http://codepen.io/robinrendle/)'s
Pe... (8 kB)
Constanza Martinez Benegas Hoy a la(s) 11:16

Hola a todos! les queria consultar qué banco de imagenes pago recomiendan para
utilizar como diseñadora grafica
12 respuestas
Mercedes Mulet hace 6 horas
Hola @Cony! Te paso algunos:
https://burst.shopify.com/
https://stocksnap.io/
https://www.pexels.com/es-es/
https://pixabay.com/es/
https://unsplash.com/
StockSnap
Free Stock Photos and Images - StockSnap.io
The best source for free, CC0, do-what-you-want-with stock photos. Browse and
download thousands of copyright-free stock images. No attribution required. (184 kB)
https://stocksnap.io/
Pexels
Banco de Imagenes Gratis, Imagenes sin Copyright, Imagenes Libres de
Derechos · Pexels
Banco de imágenes gratis y vídeos de archivo gratis que puedes utilizar donde
quieras. ✓ Alta calidad ✓ 100 % gratuito ✓ Sin necesidad de mencionar la fuente (419
kB)
https://www.pexels.com/es-es/
pixabay.com
Pixabay - Más de 1 millón de Imágenes Gratis para Descargar
Encuentra las mejores imágenes gratis para descargar. ✓ Gratis para fines
comerciales ✓ Sin atribución requerida ✓ Imágenes en Alta Resolución. (8 kB)
https://pixabay.com/es/
Unsplash
Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project.
Better than any royalty free or stock photos. (218 kB)
https://unsplash.com/
Carla Bruno hace 6 horas
Hola Constanza , acá en mi trello tengo varias
páginas https://trello.com/b/ARFwuFDG/dise%C3%B1o-gr%C3%A1fico
Constanza Martinez Benegas hace 6 horas

muchas gracias a ambas!!!! y lo que es vectores o iconos usan freepik y flaticon?

u otras?

en ese caso estoy buscandi gratuitas

Es para ux?

en realidad tanto para mi curso de UX como para trabajos personales freelance de
diseño grafico

https://trello.com/b/gPO63Wkp/ux-ui

Ahí hay paginas de iconos gratis

gracias @Carla y @Mercedes Mulet

De nada! Espero que te sirvan
uego fijate de pasar tu pagina por aqui:https://gtmetrix.com/
te realiza un reporte de performance de tu pagina y como solventarlo. Por lo que veo el
principal problema de tu sitio es el peso de las imagenes
gtmetrix.com
GTmetrix | Website Performance Testing and Monitoring
GTmetrix is a free tool to test and monitor your page's performance. Using Lighthouse,
GTmetrix generates scores for your pages and offers actionable recommendations on
how to optimize them. (46 kB)
Codigo de ejemplo ----por aca dejo el codigo de ejemplo de hoy SASS2
Zip
sass2.zip
33 kB Zip
33 kB — Haz clic para descargar
Soporte Coder 13:25

La grabación de la clase SASS II ya está disponible!, ver grabación
[Tutora]Wanda Scarpato 13:41
Les dejo unos Links útiles
Operaciones aritméticas

@if and @else

@if @else @while @each

@for

@maps

@extend

@mixin

Compilación de SASS con VSC
 Tutorial
 Plugin para VSC
(editado)
sass-lang.com
Sass: @if and @else

Syntactically Awesome Style Sheets
tutorialsteacher.com
Sass Control Directives - @if, @else, @while, @for, @each
Learn about Sass control directives here such as if, else if, while, for to, each.
sass-lang.com
Sass: @for
sass-lang.com
Sass: Maps

Les Paso Los Links Sobre Lo Visto en Clase

Cargado por

Información del documento

Título original

Derechos de autor

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Les Paso Los Links Sobre Lo Visto en Clase

Cargado por

Copyright:

Les paso los links sobre lo visto en clase

-- Links con Lista de RECURSOS y HERRAMIENTAS de DESARROLLO ---

Les paso links sobre lo visto en clase

-----comparto ESQUELETO HTML ----<!Doctype html>

Les paso links sobre lo visto en clase

 Listas HTML - ordenadas, desordenadas, atributos y tipos

 Carpeta correspondiente clase 2

Sitio que mostró el profe Darío en la clase: https://www.w3schools.com/html/html5_video.asp

Les dejo links sobre lo visto en clase

 Audios - formatos admitidos

 Mozilla - Uso de transiciones

 CSS 3.0 - Transition Generator

Mozilla - uso de transformaciones

 Mozilla - uso de animaciones

Hola Kevin! Te dejo link de freepik ahi podes buscar https://www.freepik.es/

Kevin oviedo hace 1 día

Les dejo un par de links útiles

Bootstrap All Classes

 Desarrollo web boostrap

les dejo links útiles sobre lo visto en la clase de hoy

 Introducción a metodología BEM es una explicación super simple con

Constanza Martinez Benegas Hoy a la(s) 11:16

Constanza Martinez Benegas hace 6 horas

Constanza Martinez Benegas hace 6 horas

Constanza Martinez Benegas hace 6 horas

Carla Bruno hace 6 horas

Constanza Martinez Benegas hace 6 horas

Carla Bruno hace 6 horas

Carla Bruno hace 6 horas

Constanza Martinez Benegas hace 6 horas

Constanza Martinez Benegas hace 6 horas

Carla Bruno hace 6 horas

33 kB — Haz clic para descargar

Soporte Coder 13:25

Les dejo unos Links útiles

Sass: @if and @else

Sass Control Directives - @if, @else, @while, @for, @each

Syntactically Awesome Style Sheets

Syntactically Awesome Style Sheets

También podría gustarte