Welcome to Roadevmap

The place to learn web development!

We create videos, articles and tips straight to the point about core web technologies and the most used ones in the market.

Our object is to help you to solve the challenges of your job tasks, improve your projects and tech skills right after finishing consuming our content.

person coding

The Founder

Hello, nice to meet you! I am Thiago Nunes Batista. I am a Brazilian Front-end developer, currently working with Front-end on a project with Vuejs on a monolithic architecture with Laravel. During my career, I have worked or studied technologies like:

  • Frameworks (React, VueJS, and NextJS).
  • JavaScript Libraries (Axios, Jquery, Storybook, etc).
  • CSS extensions (Sass and Styled Components).
  • Headless CMS (Storyblok).
  • Agile methodologies (Scrum)
  • And many others ...

I started studying web development in high school in 2015 and started working in 2020 as a Front-end developer. During this journey, I studied a lot of technologies and with Roadevmap, I would like to help developers to enhance their skills and achieve success on their journey. I want to do this by creating videos and articles about interesting topics I had to learn during my career.

If you have suggestions for Roadevmap or would like to talk to me, you can contact me on LinkedIn.

Thiago Nunes Batista

Do you like to read? You could take a look at our 6 last posts

Your time is valuable. Because of that, we write articles straight to the point, with examples, so you can start using the learned matter on your challenges just after finishing the reading.

Creating a custom error page in NextJS

Creating a custom error page in NextJS

Updated at

Sometimes errors occur on the pages and we want to handle that and show a better experience for the user.

How to disable Picture in Picture and download on HTML video

How to disable Picture in Picture and download on HTML video

Updated at

Video tag has some built-in functionality like download and the picture in picture mode. Sometimes we need to remove these behaviors.

How to create a simple CSS Loader

How to create a simple CSS Loader

Updated at

hello world

Understanding Scope in JavaScript

Understanding Scope in JavaScript

Updated at

Scope in JavaScript defines the visibility of variables.

How To Create VS Code Workspace Extension Recommendations

How To Create VS Code Workspace Extension Recommendations

Updated at

The Workspace Extension Recommendations let maintainers of a project recommend extensions for others developers to install.

How to Setup Prettier - Step by Step tutorial - Vscode

How to Setup Prettier - Step by Step tutorial - Vscode

Updated at

It's a code formatter for many languages like JavaScript and technologies like React and Vue. The main reason to use is to define formatting patterns.

Do you prefer watching videos? We have that on Youtube

Where you will find tips and tutorials. The majority of the videos are connected with articles here on the website. So you can learn something new on a video and keep the article as a quick reference for future consultations.

Technologies

Our articles and videos focus on the web development field. We especially want to help you with the following technologies:

JavaScript

It's the implementation of the ECMAScript Language Specification. It's one of the most popular programming languages on the market and the technology responsible for creating dynamic interfaces.

  • Interpreted language
  • Object-oriented programming support
  • Platform independent

NextJS

It's an open-source framework developed by Vercel that brings a great Developer Experience and very useful tools to help. It's self-titled as The React Framework for Production.

  • SSR - Server-side rendering
  • SSG - Static Site Generation
  • ISG - Incremental Static Regeneration

CSS

Cascading Style Sheets - It's a formatting language that adds styling for the pages. We can customize backgrounds, fonts, size, spacing, and other decoratives on the elements of the page.

  • Adaptive styles for different screen sizes
  • Progressive implementation
  • Easy maintenance

HTML

HyperText Markup Language - It's responsible for defining the meaning and structure of the content on web pages. With HTML, we will describe what part of the content is text, images, links, etc.

  • Markup language
  • Essential for webpages
  • Easy to learn

Tools

It's a great deal to master the tools you use during your development journey. We will bring some tips and tricks on the most commonly used tools. We will focus on VS Code, the most popular text editor in the industry.

  • Cross-platform
  • Rich ecosystem of extensions
  • Lightweight code editor