[ESP/ENG] Mis primeras página web alojada en internet. // My first web page hosted on the internet.

Diseño sin título.png

Hola comunidad de Desarrolladores, como habrán visto en título, el día de hoy aloje mi primer sitio web a internet, lo cual me ha llenado de mucho orgullo, es un primer paso muy pequeño para este mundo del desarrollo web, hace poco me gane en un sorteo una beca para estudiar por tres meses en una escuela que te enseñan programación y te dan una base de lo que debes saber para luego seguir aprendiendo y estudiando porque de eso se trata este mundo de la tecnología, aún estoy un poco sorprendido, ya que siempre me va mal en los sorteos así que me siento muy afortunado, en el siguiente post les contaré un poco acerca de lo que visto y el proyecto que acabo de terminar de realizar el cual me llena mucho de felicidad.

Hello Developers community, as you may have seen in the title, today I hosted my first website to the internet, which has filled me with great pride, is a very small first step for this world of web development, recently I won in a draw a scholarship to study for three months in a school that teach you programming and give you a base of what you should know and then continue learning and studying because that's what this world of technology is all about, I'm still a little surprised, since I always do badly in sweepstakes so I feel very lucky, in the next post I will tell you a little about what I saw and the project that I just finished which fills me with happiness.

Primera clase de introducción. / First introductory class.

El curso empezó de manera oficial cuando empezamos a ver HTML, en la primera clase vimos un poco acerca de como funciona el internet, como funcionan las conexiones, los URL, las peticiones de internet. Fue una introducción muy interesante, ya que aprendí más cosas de las que ya sabia y pienso que siempre es bueno ampliar los conocimientos un poco más.

The course started officially when we started to see HTML, in the first class we saw a little about how the internet works, how connections work, URLs, internet requests. It was a very interesting introduction, since I learned more things than I already knew and I think it is always good to expand the knowledge a little more.

Segunda clase con HTML. / Second class with HTML.

Llego lo que siempre se suele ver cuando se comienza en el desarrollo web HTML, las clases fueron buenas y ya tenía una base de lo que el profesor estaba enseñando, puesto que desde el año pasado había empezado a estudiar HTML y la mayoría de las etiquetas que estaba enseñando ya las había visto y estudiado, así que por esa parte era un poco más fácil seguir el ritmo de lo que estaba viendo que prácticamente eran las etiquetas más básicas como un h1, p, section, header, nav, footer, que las nombre en mi post sobre aprendiendo HTML, la parte más interesante y donde fue un mundo nuevo es cuando tuvimos que aprender un poco sobre el SEO.

The classes were good and I already had a base of what the teacher was teaching, since last year I had started to study HTML and most of the tags he was teaching I had already seen and studied, so for that part it was a little easier to follow the rhythm of what I was seeing which were practically the most basic tags like a h1, p, section, header, nav, footer, which I named them in my post about learning HTML, the most interesting part and where it was a new world is when we had to learn a little about SEO.

Selección_001.png

Posicionamiento de un sitio web. / Positioning of a web site.

Los mejores sitios web suelen estar posicionados de primero, esto sucede porque tienen un buen seo que en español es posicionamiento en buscadores. Básicamente, si un sitio web fue realizado de una manera limpia y ordena donde se respetaron las reglas de semántica y donde lo más importante usar etiquetas que ayuden al motor de búsqueda como Google a reconocer todo lo que está en tu sitio web, hay muchas etiquetas que nos ayudan a decirle al motor de búsqueda quien es el autor de la página, una breve descripción de la página, el título, también tenemos una etiqueta que seguramente muchos se han dado cuenta de que cuando compartimos un sitio web o enlace por WhatsApp, Facebook, aparece una breve descripción, un título y la imagen todo eso se hace con etiquetas de SEO y existen muchas más que se me haría largo nombrarlas en este post.

The best websites are usually ranked first, this happens because they have a good seo which in Spanish is search engine optimization. Basically, if a website was made in a clean and tidy way where the semantic rules were respected and where the most important thing is to use tags that help the search engine like Google to recognize everything that is on your website, there are many tags that help us to tell the search engine who is the author of the page, a brief description of the page, the title, we also have a tag that surely many have noticed that when we share a website or link by WhatsApp, Facebook, a brief description appears, a title and image all that is done with SEO tags and there are many more that I would be long to name them in this post.

Selección_002.png

Los Schema / The Schema

Luego de ver un poco las etiquetas de SEO aprendí algo nuevo que se llama Schema, esto está muy relacionado también con el posicionamiento de búsqueda, nunca había escuchado o visto sobre esto, una vez lo estudiamos me di cuenta de que es muy importante, ya que si nuestra página web tiene que ver un poco sobre música, película, podcast, los schema digamos que a través de una etiqueta la cual se llama meta y añadiendo algunos atributos podemos agregarle datos sobre, como por ejemplo cuando dura una canción, la fecha que fue lanzada, el autor, entre otras y esto ayuda mucho al posicionamiento del SEO, por eso nuestro primer reto del curso era que hiciéramos una página web que no tenga que ver mucho con el diseño, sino que tenga un buen HTML, con etiquetas que describan el sitio web, y tendríamos que hacerlo sobre alguna canción que nos gustara agregando: el nombre de la canción, el artista, la duración, debíamos subir la canción en audio para que se pueda escuchar y agregar la letra de la canción.

En el siguiente link pueden ingresar a mi primer reto, a simple vista no parece la gran cosa, pero todo lo que lleva dentro, son varias etiquetas de posicionamiento y schema que aprendí durante la clase.
Link

After seeing a little SEO tags I learned something new which is called Schema, this is also very related to search positioning, I had never heard or seen about this, once we studied it I realized that it is very important, because if our website has to do a little about music, movie, podcast, the schema let's say that through a tag which is called meta and adding some attributes we can add data about, as for example when a song lasts, the date it was released, the author, among others and this helps a lot to SEO positioning, so our first challenge of the course was to make a web page that does not have to do much with the design, but has a good HTML, with tags that describe the website, and we would have to do it about some song that we liked adding: the name of the song, the artist, the duration, we had to upload the song in audio so it can be listened and add the lyrics of the song.

In the following link you can access my first challenge, at first glance it doesn't look like a big deal, but all it has inside, are several positioning tags and schema that I learned during the class. Link

Selección_003.png

Selección_004.png

Selección_005.png

CSS, Boostrap y Flexbox

Después de ver CSS algo que ya sabia también, pero nunca está de más volver a repesarlo, la mayoría de las propiedades ya la sabia como el color, margin, padding, propiedades que normalmente se suelen ver al comenzar, lo interesante fue cuando nos enseñaron un poco sobre Boostrap la verdad es que es muy interesante este Framework de CSS que básicamente te trae todo casi listo, son como unas plantillas que con leer un poco la documentación sobre como debes aplicarlas y los estilos que debes dar se pueden hacer cosas muy interesantes, aunque estuve leyendo un poco e investigando y vi que recomiendan usar más Boostrap un poco en el ámbito laboral cuando están trabajando proyectos grandes, y tienen que hacer varias páginas, pero para una persona que está haciendo solamente una página web es mejor usar solo HTML y CSS, así que después de ver un poco y hacer algunos ejercicios de Boostrap, tuvimos una clase de flexbox que es una forma de acomodar todo nuestro contenido de nuestro sitio web, para que quede elegante, lo mejor de todo es que con flexbox podemos adaptar nuestro sitio web a móvil, ya había visto flexbox hace algunos meses de hecho estuve casi un mes practicando para poder entenderlo bien, así que ya estaba preparado para el segundo reto que era construir un sitio web con flexbox.

After seeing CSS something I already knew too, but it never hurts to go back to review it, most of the properties already knew it as color, margin, padding, properties that are usually seen at the beginning, the interesting thing was when they taught us a little about Boostrap the truth is that it is very interesting this CSS Framework that basically brings you everything almost ready, they are like templates that with reading a little documentation on how you should apply them and the styles you should give you can do very interesting things, although I was reading a little and researching and I saw that they recommend using more Boostrap a little in the workplace when they are working on large projects, and they have to make several pages, but for a person who is making only one web page is better to use only HTML and CSS, so after seeing a little and doing some Boostrap exercises, we had a flexbox class which is a way to accommodate all our content of our website, to make it look elegant, best of all is that with flexbox we can adapt our website to mobile, I had already seen flexbox some months ago in fact I spent almost a month practicing to understand it well, so I was already prepared for the second challenge which was to build a website with flexbox.

Segundo reto / Second challenge

El reto era construir un sitio web de un podcast, debía tener una barra de navegación, la parte principal con algo de texto y un reproductor del capítulo del podcast el cual podíamos sacar de un sitio web de podcast, luego debía tener otra sección donde debíamos hacer unas tarjetas que tuviera la foto del podcast, el título y un breve resumen y además un enlace que nos llevara a la página oficial para escuchar el podcast, y por último un footer o pie de página. Acá pueden ir al link del sitio web Link

The challenge was to build a podcast website, it had to have a navigation bar, the main part with some text and a player of the podcast chapter which we could take from a podcast website, then it had to have another section where we had to make some cards that had the photo of the podcast, the title and a brief summary and also a link that would take us to the official website to listen to the podcast, and finally a footer or footer. Here you can go to the website link Link

Selección_006.png

Selección_007.png

Les recomiendo que para una mejor experiencia visiten el sitio web, tuve que hacerle algunas modificaciones como el tipo de letra, ya que cuando lo estaba revisando desde el teléfono lo notaba lento, así que le cambie el tipo de letra, del resto sé que no es el mejor diseño que podrán ver mi parte como diseñador aún me falta mucho por mejorar, pero me siento muy feliz de que mis proyectos que estoy realizando estén alojados en internet y de una manera gratuita, ya que Google tiene una plataforma que se llama Firebase que la estuvimos viendo el curso la cual nos da acceso a subir nuestros proyectos, páginas web de manera gratuita no te asegura que tu página estará en los primeros puestos ya para eso es mejor pagar un plan de hosting, sin embargo, es muy bueno para personas que estamos empezando y queremos subir nuestros proyectos para compartirlos.

I recommend that for a better experience visit the website, I had to make some modifications such as the font, because when I was reviewing it from the phone I noticed it slow, so I changed the font, the rest I know it is not the best design that you can see my part as a designer I still have much to improve, but I am very happy that my projects I am doing are hosted on the internet and in a free way, since Google has a platform called Firebase that we were seeing the course which gives us access to upload our projects, web pages for free does not ensure that your page will be in the top positions and for that it is better to pay a hosting plan, however, it is very good for people who are starting and we want to upload our projects to share them.

El próximo reto seguramente será de JavaScript, algo que nunca he visto, así que estoy muy emocionado por aprender dicho lenguaje de programación, si todo va bien les estaré enseñando el reto una vez publicado, hasta acá llego el final de este post espero les haya gustado y cualquier sugerencia que tenga respecto al sitio web pueden decirme para ir mejorando poco a poco aunque ya les digo que mi Don como diseñador no es el mejor, pero hago el intento, nos vemos en el próximo post, Un Saludo!!!!

The next challenge will surely be JavaScript, something I've never seen, so I'm very excited to learn this programming language, if all goes well I'll be showing you the challenge once published, so far I reach the end of this post I hope you liked it and any suggestions you have regarding the website can tell me to improve little by little although I tell you that my gift as a designer is not the best, but I try, see you in the next post, Greetings !!!!

Recursos. / Resources.

  • LanguageTool
  • Deepl
  • Canva
  • Shutter

Links imagen/ Links image

Link img
Link img
Link img



0
0
0.000
8 comments
avatar

Muchas felicidades amigo de #hive, por haber alcanzado la beca, y por el trabajo que hicistes, me gusto mucho tu post, muy original, saludos
👏👏👏👏👏👏🥳🥳🥳🤗🤗

0
0
0.000
avatar

Muchas gracias por tus palabras un saludos.

0
0
0.000
avatar

Congratulations @doomforge! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You distributed more than 400 upvotes.
Your next target is to reach 500 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Check out the last post from @hivebuzz:

The Hive community is in mourning. Farewell @erikasue!
Level up your NFTs and continue supporting the victims of war
Support the HiveBuzz project. Vote for our proposal!
0
0
0.000
avatar

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support. 
 

0
0
0.000
avatar

I've checked your website and I am impressed, it is responsive and mobile friendly.

Javascript might be a bit difficult at first but once you get how it works it is fun and can even be addicting. 🙂

Congratulations on what you already have accomplished and good luck in your studies.

!1UP


You can earn passive income by delegation of tribe tokens to "The Cartel".


Click this banner to join "The Cartel" discord server to know more.

0
0
0.000
avatar

thank you very much I'm very happy, javascript I've seen a little in some videos I hope I can understand it well although I'm sure at first it won't be easy as everything is a matter of a lot of practice and effort so that things go well

0
0
0.000
avatar

You can learn it. Just don't lose hope. Keep on going. 🙂

0
0
0.000