DEV Community: Lucas André

10 LINKS to learn the basics of programming

Lucas André — Thu, 29 Sep 2022 22:45:13 +0000

I made a list of 10 sites where you can learn the basics of programming and boost your studies.

Bonus: Computer Science - Crash Course by Carrie Anne Philbin

ㅤ

DEV ROADMAP - https://roadmap.sh/ ㅤEnglish
Learning trails for those who don't know where to start! This one is REALLY good.
ㅤ

Learn X in Y Minutes - https://learnxinyminutes.com/ ㅤEnglish | several languages
It has the basics of dozens of programming languages, succinctly and directly.

ㅤ
W3Schools - https://www.w3schools.com/ ㅤEnglish | Google translator on the website
Everyone knows this one when researching how to do something with CSS, but did you know that it has tutorials and complete quizzes in it too? JS, SQL, Python and more.
W3Schools is simply legendary!
ㅤ

FreeCodeCamp - https://www.freecodecamp.org/ ㅤEnglish
Learn frontend and backend with exercises. It has a certificate and everything! I learned JS and responsive web design from them <3
ㅤ

SoloLearn - https://www.sololearn.com/home ㅤEnglish
Recommend for all beginners. Its like FreeCodeCamp.
ㅤ

Codewars - https://www.codewars.com/ ㅤEnglish
A lot of exercises, for you to code like a pro. You compete with other users of the platform. I recommend it to everyone, but for those who already know how to program, Codewars will be gold!
ㅤ

Khanacademy - https://www.khanacademy.org/computing/ ㅤEnglish
Computer Science subjects and learning paths to become a dev. All with impeccable teaching. Top notch.
ㅤ

The Odin Project - https://www.theodinproject.com/paths ㅤEnglish
Learn the fundamentals of programming and then choose to become a fullstack JavaScript or Ruby on Rails dev. Great course.
ㅤ

React JS - https://reactjs.org/community/courses.html ㅤEnglish
A list of free courses, made by the community, to get you absolutely PRO in ReactJS. It has a list of paid courses as well.
ㅤ

SQLbolt - https://sqlbolt.com/ ㅤEnglish
Study SQL without fuss, with practical and short exercises. The pinnacle of teaching databases, my confreres!

Send this post to your friend who is kinda lost 😉
-With Love, Lucas.

Github offers more than 100 FREE tools for students

Lucas André — Thu, 18 Mar 2021 19:48:06 +0000

The Github Student Development Pack guarantees you access to various tools, whether for design, game development, infrastructure and APIs, mobile, security and analysis, marketing, IoT and Cloud, productivity, free domains and also has learning platforms, for absolute beginners.

"Is that serious, Lucas?"
Yeah, there is no catch. You can see it on the official website of the program: https://education.github.com/students
In addition to giving you access to so many platforms, you also earn the PRO badge on github, while you are a student!

To qualify for student benefits, you must:

Be currently enrolled in a degree or diploma granting course of study such as a high school, secondary school, college, university, homeschool, or similar educational institution.

Have a verifiable school-issued email address or upload documents that prove your current student status.

Have a GitHub user account.

Be at least 13 years old.

Github's objective in doing so is to empower and improve the community of young developers, who in various corners of the world, are unable to pay for such services out of their own pocket, either because of the political and economic condition of the country in which they reside or financial of their families.

Cool, isn't it? Here is a short tutorial on how to sign up for the program:

First, log in to your Github account, or create one if you don't already have it.
If you want you can follow me here 😄

To see all the tools offered, click here.

If you want to go straight to registration, click here.
Now just fill out this simple form and wait to be approved! It may take a few days, up to 1 month.

Study well and good luck in your new projects!

5 more useful sites for FRONTEND devs!

Lucas André — Tue, 16 Mar 2021 17:24:48 +0000

Hello, here are 5 more great tools to increase your productivity!😉

Codepen

If you program with html, css and Javascript, this site will be very useful.
Just open the online editor and code. You don't even have to link your .css and .js files to the html, Codepen does it for you! Best of all, it has a live preview of the result of your code.

You can also browse other people's projects and see code snippets!

Repl.it

Just wonderful! With Repl.it, you have more than 50 programming languages available, all in the browser. You can also integrate it with your Github account, to deploy and observe changes made to the code.

Canva

This one is a darling of mine. You can create and edit images, mainly for marketing, a very important point for us web designers.
It has hundreds of templates ready to be edited, which will save you time when creating a promotional image for your new project, improving your personal marketing and even when creating a cover image for something, as well as I did for that article!

Gitpod

Gitpod is a development environment with VS Code online, which can be run directly by your browser. Without complications, in seconds you create a fully functional environment, with integration into your Github or Gitlab. You can also download the browser extension, which makes your life even easier.

A great contribution to open source.

Font Awesome

Virtually everyone knows Font Awesome, but for those who don't, it's an extremely easy-to-use icon resource on your sites, you copy a link into your html and that's it, you have access to a multitude of icons to use! Just use the identifier of the desired icon in the element you want and voilà. It is also possible to change the color, rotate, increase or decrease the icons... all without losing quality, as the icons are vectors.

If you liked it, follow me on github!

Mais 5 sites úteis para devs FRONT-END

Lucas André — Tue, 16 Mar 2021 17:02:43 +0000

Olá, aqui vão mais 5 ótimas ferramentas para aumentar sua produtividade!

Codepen

Se você programa com html, css e Javascript, esse site será muito útil.
Basta abrir o editor online e programar. Não precisa nem linkar seus arquivos .css e .js no html, o Codepen faz isso para você! O melhor de tudo, tem um preview ao vivo do resultado do seu código.

Você também pode navegar pelos projetos de outras pessoas e ver code snippets!

Repl.it

Simplesmente sensacional! Com o Repl.it, você tem mais de 50 linguagens de programação disponíveis, tudo no navegador. Pode também integrar ele à sua conta do Github, para fazer deploy e observar as alterações passadas no código.

Gitpod

O Gitpod é um ambiente de desenvolvimento com o VS Code online, que pode ser executado diretamente pelo seu navegador. Sem complicações, em segundos você cria um ambiente totalmente funcional, com integração ao seu Github ou Gitlab. Você também pode baixar a extensão de navegador, que facilita ainda mais sua vida.

Uma grande contribuição para os softwares open source.

Canva

Esse aqui é um queridinho meu. Serve para criar e editar imagens, pricipalmente para marketing, ponto muito importante para nós web designers.
Conta com centenas de templates prontos para serem editados, o que vai te poupar tempo na hora de criar uma imagem de divulgação do seu novo projeto, melhorar seu marketing pessoal e até mesmo na hora de criar uma imagem de capa para alguma coisa, assim como eu fiz para esse artigo!

Font Awesome

Praticamente todos conhecem o Font Awesome, mas para os que não sabem, é recurso de ícones extremamente fácil de usar nos seus sites, você copia um link para dentro do seu html e pronto, tem acesso à uma infinidade de ícones para usar! Basta utilizar o identificador do ícone desejado no elemento que você quer e voilà. Também é possível mudar a cor, rotacionar, aumentar ou diminuir os ícones... tudo isso sem perder qualidade, pois são vetores.

Se você gostou, me siga no github!

5 useful sites for FRONTEND devs

Lucas André — Tue, 16 Mar 2021 02:08:29 +0000

5 useful sites for you to use in your frontend projects and impress everyone.

Css Grid Generator.

This site allows you to visualize the layout of your grid and modify it, generating html and css that are easy to use.
Grid is basically an invisible mesh, used to align and structure elements or sections of your webpage.

Paletton.

With this website you will never have to worry again if the colors of your website match. It shows the right palettes for each color, with the right tones and also creates multiple color palettes.
Awesome.

Glassmorphism.

Give the effect of transparent or frosted glass to the elements of your page in seconds! The effect is based on background blur with transparency and uses stacked layers to show the depth and context of the interface.

Shortcurts.

This site is a treasure! It basically contains all the shortcuts of dozens of tools that you will use as a frontend developer, which involves a lot of design.

Google Fonts.

Let's close with a classic, which many of the newbies still don't know about.
Here you can find the most varied fonts to use in the text of your website, just select the font you like, paste the link in your html and use it in your css. There, beautiful typography on your website.

If you liked it, follow me on github!

5 sites úteis para devs FRONT-END

Lucas André — Tue, 16 Mar 2021 02:02:36 +0000

5 sites úteis para você utilizar em seus projetos de front-end e impressionar todo mundo.

Css Grid Generator.

Esse site te permite vizualizar o layout da sua grid e modificá-lo, gerando html e css fáceis de usar no final.
Grid é basicamente uma malha invisível, usada para alinhar e estruturar elementos ou seções da sua webpage.

Paletton.

Com esse site você nunca mais vai precisar se preocupar se as cores do seu site combinam. Ele de mostra as paletas adequadas para cada cor, com os tons corretos e também cria paletas de multiplas cores.
Excelente.

Glassmorphism.

Dê o efeito de vidro transparente ou fosco para os elementos da sua página em segundos! O efeito é baseado em desfoque de fundo com transparência e usa camadas empilhadas para mostrar a profundidade e o contexto da interface.

Shortcurts.

Esse site é um tesouro! Contém basicamente todos os atalhos de dezenas de ferramentas que você usará como dev front-end, que envolve muito design.

Google Fonts.

Vamos fechar com um clássico, que muitos dos novatos ainda não conhecem.
Aqui você encontra as mais variadas fontes para utilizar no texto do seu site, basta selecionar a fonte que você gostar, colar o link dela no seu html e utilizar em seu css. Prontinho, linda tipografia em seu site.

DEV Community: Lucas André

10 LINKS to learn the basics of programming

I made a list of 10 sites where you can learn the basics of programming and boost your studies.

Github offers more than 100 FREE tools for students

Study well and good luck in your new projects!

5 more useful sites for FRONTEND devs!

Hello, here are 5 more great tools to increase your productivity!😉

If you liked it, follow me on github!

Mais 5 sites úteis para devs FRONT-END

Olá, aqui vão mais 5 ótimas ferramentas para aumentar sua produtividade!

Se você gostou, me siga no github!

5 useful sites for FRONTEND devs

5 useful sites for you to use in your frontend projects and impress everyone.

If you liked it, follow me on github!

5 sites úteis para devs FRONT-END

5 sites úteis para você utilizar em seus projetos de front-end e impressionar todo mundo.

Se gostou, dá um follow no github!