<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mohammad Sefatullah</title>
    <description>The latest articles on DEV Community by Mohammad Sefatullah (@mosefatullah).</description>
    <link>https://dev.to/mosefatullah</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1226255%2F0cd6bcc8-e564-4fba-9de7-d169de87e61f.jpeg</url>
      <title>DEV Community: Mohammad Sefatullah</title>
      <link>https://dev.to/mosefatullah</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mosefatullah"/>
    <language>en</language>
    <item>
      <title>Web Development All You Need to Learn in 2024</title>
      <dc:creator>Mohammad Sefatullah</dc:creator>
      <pubDate>Sat, 24 Feb 2024 08:27:25 +0000</pubDate>
      <link>https://dev.to/mosefatullah/web-development-all-you-need-to-learn-in-2024-ch0</link>
      <guid>https://dev.to/mosefatullah/web-development-all-you-need-to-learn-in-2024-ch0</guid>
      <description>&lt;p&gt;Web development involves creating websites and web applications. Starting with a JavaScript stack involves front-end and back-end development. Learning depends on your background; basics might take 3-6 months. Proficiency grows with practice and project work. Mastery needs ongoing learning and commitment, varying for each person.&lt;br&gt;
Frontend Development&lt;/p&gt;

&lt;p&gt;UI/UX Design&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Figma/Adobe XD - figma.com, helpx.adobe.com/support/xd.html

Vectors - storyset.com

Mockups - freepik.com/free-photos-vectors/ui-mockup, dribbble.com/tags/ux-ui-mockup
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;HTML - w3.org/html&lt;/p&gt;

&lt;p&gt;CSS - w3.org/Style/CSS&lt;/p&gt;

&lt;p&gt;CSS Architecture&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;BEM - getbem.com,

OOCSS - oocss.org, keycdn.com/blog/oocss

SMACSS - smacss.com, toptal.com/css/smacss-scalable-modular-arch..

ACSS - acss.io, css-tricks.com/lets-define-exactly-atomic-css
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;CSS Preprocessors&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Sass/Scss - sass-lang.com

Less - lesscss.org

Stylus - stylus-lang.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;CSS Frameworks&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Bootstrap - getbootstrap.com

Bulma - bulma.io

Semantic UI - semantic-ui.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;JavaScript - ecma-international.org&lt;/p&gt;

&lt;p&gt;JS Framework&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Vue - vuejs.org
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;JS Library&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React - react.dev

Jquery - jquery.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;TypeScript - typescriptlang.org&lt;/p&gt;

&lt;p&gt;TS Framework&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Angular - angular.io

Svelte - svelte.dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Web Assembly - webassembly.org&lt;/p&gt;

&lt;p&gt;Individual Assembly&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Python - pyscript.net, transcrypt.org

Java - jsweet.org
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Backend Development&lt;/p&gt;

&lt;p&gt;NodeJS - nodejs.org/en&lt;/p&gt;

&lt;p&gt;Framework&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ExpressJS - expressjs.com

NextJS - nextjs.org
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;ORM &amp;amp; ODM&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Sequelize - sequelize.org (ORM for Oracle, Postgres, MySQL, MariaDB, SQLite and SQL Server, …)

Mongoose - mongoosejs.com (ODM for MongoDB)

Prisma - prisma.io (ORM for Postgres, MongoDB, MySQL, MariaDB, …)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;REST Api&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Specification - swagger.io/specification, spec.openapis.org/oas/v3.1.0

Testing - postman.com, insomnia.rest

Auth Token - jwt.io

Auth Tools - passportjs.org

Multiple Auth - oauth.net/2

Realtime Feature - socket.io

Email - nodemailer.com, mailtrap.io, forwardemail.net

2FactorAuth - codevoweb.com/two-factor-authentication-2fa..

Communication - twilio.com, sendgrid.com, pusher.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;GraphQL - graphql.org, apollographql.com&lt;/p&gt;

&lt;p&gt;Storage&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Cloudinary - cloudinary.com

AWS S3 - aws.amazon.com/s3

Vimeo - developer.vimeo.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;TDD - jestjs.io&lt;/p&gt;

&lt;p&gt;Design Patterns - blog.risingstack.com/fundamental-node-js-de..&lt;br&gt;
Advanced&lt;/p&gt;

&lt;p&gt;System Architecture, Infrastructure, Server&lt;/p&gt;

&lt;p&gt;DevOps&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Docker - docker.com

Kubernetes - kubernetes.io

CI/CD Automation - travis-ci.com, circleci.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;System Design, DevOps, Software Engineering&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
