Skip to content

Commit 2c69d21

Browse files
claudiocoderclaudiocoder
authored
✨ - Add content, add styles and fix files format (#10)
1 parent ee6a5dd commit 2c69d21

File tree

8 files changed

+108
-21
lines changed

8 files changed

+108
-21
lines changed

‎posts/blog/resources_developers.mdx

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,82 @@
11
---
22
title: Mis 5 Sitios Favoritos para Aprender Programación
3-
date: 2023-12-11
3+
date: 2023-12-12
44
description: Mis 5 Sitios Favoritos para Aprender Programación
55
thumbnailUrl: /blog/developer.png
6-
author: claudio_coder
6+
author: Por claudio_coder
77
---
8-
# [Codecademy](https://www.codecademy.com/)
8+
9+
![](/blog/apps.png 'Image generated by OpenAI DALL-E')
10+
11+
<p className="text-xs text-center mx-auto text-gray-600 italic">Image created with OpenAI</p>
12+
<br />
13+
<br />
14+
# [Codecademy](https://www.codecademy.com/) > Gratis y versión de pago | Inglés
15+
<br />
16+
Codecademy fue el primer sitio web donde empecé a aprender a programar. Es un sitio web que te enseña a programar de forma
17+
interactiva, con ejercicios donde tendrás que cumplir retos para poder avanzar al siguiente tema. Codecademy ofrece cursos
18+
de HTML & CSS (Básico e Intermedio), Javascript, Python, Ruby, PHP, Java, SQL, Bash/Shell, Swift, C++, R, C#, Go, Kotlin,
19+
y Sass, y todos los años agregan nuevos temas a su catálogo. Ofrece una versión gratis y una versión de pago. La versión
20+
gratis te permite acceder a todos los cursos, pero no te permite acceder a los proyectos de certificación. En lo personal,
21+
nunca he necesitado pagar la versión de pago para aprender un tema, pero si eres un nuevo programador y quieres mejorar tu
22+
portafolio, la versión de pago te ayudaría a crear proyectos que puedas mostrar a tus futuros empleadores. Una ventaja de
23+
Codecademy es que al terminar cada curso te da un certificado de finalización.
24+
<br />
25+
<br />
26+
27+
# [Frontend Masters](https://frontendmasters.com/)
28+
29+
> Versión de pago | Inglés
30+
31+
<br />
32+
Frontend Masters es la plataforma que actualmente utilizo para mantenerme actualizado en mi carrera profesional y una de
33+
mis favoritas en los últimos meses. Es una plataforma de cursos de programación enfocada en el desarrollo web Frontend, que
34+
abarca temas desde los básicos de HTML, CSS y JavaScript hasta conceptos más avanzados como React, Vue, Angular, Astro, Remix,
35+
GraphQL, entre otros. Dentro de su catálogo, también podrás encontrar cursos de Backend con NodeJS, Python, PHP, etc., así
36+
como cursos de diseño UI/UX. Todos los cursos son impartidos por expertos de la industria que trabajan en empresas como Netflix,
37+
Google, Facebook, etc. Uno de mis cursos favoritos es el de Qwik, impartido por su creador, Misko Hevery. A pesar de que
38+
los cursos se imparten en inglés, son muy visuales y fáciles de entender, incluso con un nivel básico o intermedio de inglés.
39+
Una de las razones por las que recomiendo Frontend Masters es que sus cursos son breves y concisos, lo que te permite aplicar
40+
rápidamente lo aprendido en tus proyectos profesionales al finalizarlos.
41+
<br />
42+
<br />
43+
44+
# [Código Facilito](https://codigofacilito.com/)
45+
46+
> Versión de pago, pero con cursos gratis, ofrece bootcamps y certificaciones | Español
47+
48+
<br />
49+
CodigoFacilito es una de las primeras plataformas de educación en línea en español que conocí. Gracias a CodigoFacilito,
50+
elegi mi carrera profesional como Frontend Developer. Iniciaron como un canal de YouTube donde subían tutoriales de programación,
51+
y ahora son una plataforma de educación en línea con cursos frontend, backend, Mobile y diseño. Codigo Facilito es ideal
52+
para aquellos que quieren aprender desde cero e ir avanzando hasta un nivel intermedio, sufiliente para poder trabajar como
53+
desarrollador junior. Durante todo el año, ofrecen bootcamps de diferentes temas que podrás tomar haciendo un minimo pago.
54+
Al finalizar el bootcamp, obtendrás un certificado de finalización. Excelente si lo que quieres en aprender o reforzar temas
55+
específicos de programación.
56+
<br /> <br />
57+
58+
# [Platzi](https://platzi.com/)
59+
60+
> Versión de pago, pero con cursos gratis | Español
61+
62+
<br />
63+
Platzi es una de las plataformas de educación en línea más populares en Latinoamérica. En Platzi, no solo encontrarás cursos
64+
de programación, sino también de negocios, marketing, diseño, entre otros. Personalmente, he tomado varios cursos de programación
65+
en Platzi y me han parecido muy buenos. Una de las cosas que más me gusta de Platzi es que en la mayoría de sus cursos, irás
66+
construyendo un proyecto al mismo tiempo que aprendes la tecnología. Al finalizar, tendrás un proyecto básico que podrás
67+
mostrar en tu portafolio y mejorar con los cursos siguientes que tomes. Al completar cada curso, tendrás que realizar un
68+
examen para obtener tu certificado de finalización. Esto es muy útil para reforzar los conocimientos aprendidos, y si no
69+
pasas el examen, puedes volver a revisar los temas que aprendiste e intentarlo cuantas veces sea necesario. Personalmente,
70+
he tomado cursos de Inglés, React, JavaScript, Blockchain y diseño, y todos son muy completos y fáciles de entender.
71+
<br />
72+
<br />
73+
# [Treehouse](https://teamtreehouse.com/) > Versión de pago | Inglés
74+
<br />
75+
Treehouse es una plataforma de educación en línea que ofrece cursos de programación y diseño. Aunque no he utilizado la
76+
plataforma por mucho tiempo, he disfrutado mucho del contenido de sus cursos. Treehouse ofrece trayectorias de carrera
77+
ya predefinidas; lo único que debes hacer es elegir el área en la que te quieres especializar, y ellos te proporcionarán
78+
el orden para tomar los cursos. Lo que más me gusta de Treehouse es la calidad de sus cursos: son muy completos y
79+
fáciles de entender, además de contar con una excelente edición. Treehouse cuenta con una versión de pago llamada
80+
Techdegree, que te brinda acceso a proyectos de certificación y asesoría personalizada durante todo tu proceso de
81+
aprendizaje. Si no tienes idea por dónde empezar en el mundo de la programación, Treehouse es una excelente opción para
82+
dar tus primeros pasos.

‎public/blog/apps.png

5.25 MB
Loading

‎src/app/[slug]/page.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,18 @@ const BlogPage = async ({ params }: Props) => {
3838
}
3939

4040
return (
41-
<div className="flex flex-col my-8">
42-
<div className="mb-4 sm:mb-8">
41+
<div className="flex flex-col my-8 sm:px-[5%]">
42+
<div className="sm:pl-[5%] sm:pr-[15%] mb-4 sm:mb-8">
4343
<h1 className="text-2xl sm:text-4xl font-black">{post.title}</h1>
4444
<time dateTime={post.date} className="my-2 block text-sm w-full text-gray-600 text-left">
4545
{format(parseISO(post.date), 'MMMM dd, yyyy')}
4646
</time>
4747
<p className="text-gray-500 italic text-sm">{post.author}</p>
4848
</div>
49-
<div className="h-[70vh] mb-4 overflow-auto">
49+
<div className="sm:pl-[5%] sm:pr-[15%] h-[70vh] mb-4 overflow-auto">
5050
<Mdx code={post.body.code} />
5151
</div>
52-
<div>
52+
<div className="pt-6 pl-[5%]">
5353
<Footer />
5454
</div>
5555
</div>

‎src/app/loading.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export default function Loading() {
2-
// You can add any UI inside Loading, including a Skeleton.
3-
return <div>Loading...</div>
2+
// You can add any UI inside Loading, including a Skeleton.
3+
return <div>Loading...</div>
44
}

‎src/components/Mdx.tsx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
11
import { useMDXComponent } from 'next-contentlayer/hooks'
2-
2+
import Image from 'next/image'
33
interface Props {
44
code: string
55
}
66

77
const components = {
88
a: ({ ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
9-
<a target="_blank" rel="noopener" {...props} className={'text-blue-500 text-xl'} />
9+
<a target="_blank" rel="noopener" {...props} className={'text-blue-700 text-2xl'} />
10+
),
11+
p: ({ ...props }: React.HTMLAttributes<HTMLParagraphElement>) => <p {...props} className={'text-justify'} />,
12+
blockquote: ({ ...props }: React.HTMLAttributes<HTMLQuoteElement>) => (
13+
<blockquote {...props} className={'border-l-4 border-red-400 mt-2 pl-4 italic'} />
1014
),
15+
img: ({ ...props }) => {
16+
return (
17+
<Image
18+
height={500}
19+
width={500}
20+
src={props.src}
21+
alt={props.alt}
22+
{...props}
23+
className={'mx-auto shadow-[0_5px_15px_rgba(0,0,0,0.35)] mb-2 rounded-lg'}
24+
/>
25+
)
26+
},
1127
}
1228

1329
export function Mdx({ code }: Props) {

‎src/pages/api/hello.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ type Data = {
55
name: string
66
}
77

8-
export default function handler(
9-
req: NextApiRequest,
10-
res: NextApiResponse<Data>
11-
) {
8+
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
129
res.status(200).json({ name: 'John Doe' })
1310
}

‎src/utils/fonts.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { Khula, Roboto } from "next/font/google"
1+
import { Khula, Roboto } from 'next/font/google'
22

33
export const _roboto = Roboto({
44
weight: ['400', '700'],
55
subsets: ['latin'],
66
variable: '--font-roboto',
77
})
88

9-
export const _khula = Khula ({
9+
export const _khula = Khula({
1010
weight: ['400'],
1111
subsets: ['latin'],
1212
variable: '--font-inter',
13-
})
13+
})

‎tailwind.config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const { fontFamily } = require('tailwindcss/defaultTheme')
33

44
module.exports = {
5-
content: ['./src/**/*.{js,ts,jsx,tsx}'],
6-
theme: {},
7-
plugins: [],
5+
content: ['./src/**/*.{js,ts,jsx,tsx}'],
6+
theme: {},
7+
plugins: [],
88
}

0 commit comments

Comments
 (0)