Programming School

Mohamed Ehab

Sample, Advanced Web And Mobile Development Practice

51 Cool Web and Mobile Project Ideas for 2022


## Build A Blog with Astro

<h1>Hello Everyone 👋 </h1>

# Repository
Now Go to [My GitHub Repository](https://github.com/Programing-School/Astro-Blog)

And Go to ```src/pages/posts/``` and Add Some Your files with end with ```[Your Name of the file here].md``` and add this structure:
```md
---
setup: |
  import Layout from '../../layouts/BlogPost.astro'
  import Cool from '../../components/Author.astro'
title: [The title of the post here]
publishDate: [The data is here]
name: [The name of the author here]
value: [The value here]
description: [Just the description here]
---
```

If you want to add a link Add this code:
```md
<Cool name={frontmatter.name} href="https://twitter.com/n_moore" client:load />
```

The frontmatter is the value you type it in ```name``` field

# Run the App
1. Run ```npm i```
2. Run ```npm start```
3. Go to [https://localhost:3000](https://localhost:3000) And see the website

# create a repository
> If you don't what is git and how to create a github account and host your site and upload your files in it [Check out our blog](https://programing-school.hashnode.dev/learn-git-and-github)

1. go to github and create a new repository and then copy the commands and paste it in the terminal in visual studio code or terminal on mac or command prompt and don't forgot to paste it at your directory you want to upload
2. Run ```git add .``` to add the files to commit it in the next line
3. Run ```git commit -m "Deployment"```
4. Run ```git push``` to push all the code to github
5. Now Go to the repository in github and see what is there

If your code is there now Go to deployment

# Deploy the app
If you have a netlify account go [there](#there)
1. Go to [Netlify](https://app.netlify.com) and Create an account

## <h2 id="there">Deploy the app to netlify</h2>
After Creating an account let's create a new Site
Then Connect to your GitHub Account and search for the repository you create before (The name of it) Then Keep all the fields and go down and click ```Deploy Site```

Wait for minutes and see your site live

If you want to any questions Go down an comment

%%[socials]

Build A Astro Blog


## Auto Type

![channels4_profile.jpg] 
(https://cdn.hashnode.com/res/hashnode/image/upload/v1641057637283/vpZGPiOZq.jpeg)

# Hello

## **How to make A Auto Typing with JavaScript !!???**

1- In Your Project or website but any class name in span like this:
> ```<span class="auto"></span>```

2- insert this script tag 
>```<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>``` 


3- open your JavaScript File
4- past this code in your JavaScript File :

> 
 ```
var typed = new Typed(".auto", {
  strings: Your Text or list like ["Mohamed Ehab", "Fantastic website"] and etc...,
  typeSpeed: 100,
  backSpeed: 100,
  loop: true,
});
```


5- If the code not working ⚒ check your script tag to connect your html file to JavaScript file !!!

### Thank you for reading out blog

Auto Typing Using JS


## How to Make Auto Typing in React or Next JS ?

Hello Everyone in a new article 👋 

In this article we will Make A Auto Typing Effect with A Package called ```typewriter-effect```

if you want to start reading, start from <a href="#install">There</a>

# <h1 id="install">Installing Packages</h1>
Go to Your Command Prompt in windows or terminal in mac or termainal in visual studio code and write the following:
```bash
// With NPM
npm i typewriter-effect
// With YARN
yarn add typewriter-effect
```

# Writing Code for the auto typing
You can now in your component like about section in portfolio make a new file called ```Type.js``` and write the following code:
## In Next JS:
```js
import React from "react";
import Typewriter from "typewriter-effect";

function Type() {
  return (
    <Typewriter
      options={{
        strings: [
          "Developer",
          "Web Developer",
          "Front-End Developer",
          "Back-End Developer",
          "Full-Stack Developer",
          "UI/UX Designer",
        ],
        autoStart: true,
        loop: true,
        deleteSpeed: 70,
      }}
    />
  );
}

export default Type;
```
## In React
```js
import React from "react";
import Typewriter from "typewriter-effect";

const Type = () => {
  return (
    <Typewriter
      options={{
        strings: [
          "Developer",
          "Web Developer",
          "Front-End Developer",
          "Back-End Developer",
          "Full-Stack Developer",
          "UI/UX Designer",
        ],
        autoStart: true,
        loop: true,
        deleteSpeed: 70,
      }}
    />
  );
}

export default Type;
```
## explain the code
### Option one
option one ```strings``` have all the words you want to auto typing
### Option two
option two ```autoStart``` it is a boolean value ```true or false``` true for auto start the typing while false for don't start
### Option three
option three is ```loop``` it is a boolean value ```true or false``` true for loop on the words in option ```strings```
### Option Four
option four is ```deleteSpeed``` it is a number value that set the speed of the delete word
> The lower the number is Faster, the higher the speed is slower


Auto Typing React or Next JS


## Learn CSS and its Syntax

![Learn CSS and its Syntax](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Funsplash%2F_yMciiStJyY%2Fupload%2Fv1641832773220%2Fft7WRbjIO.jpeg%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75)![](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105763974/v__OK2lsH.json)

Photo by

[Maik Jonietz](https://unsplash.com/@der_maik_?utm_source=Hashnode&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=Hashnode&utm_medium=referral)

Learn CSS and its Syntax
========================

[![Programing-School's photo](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1645823553390%2FoHcqD2UHc.png%3Fw%3D200%26h%3D200%26fit%3Dcrop%26crop%3Dfaces%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=640&q=75)](https://hashnode.com/@Programing-School)

[Programing-School](https://hashnode.com/@Programing-School)

·[Jan 10, 2022](https://programming-school.hashnode.dev/learn-css-and-its-syntax)·2 min read

Subscribe to my newsletter and never miss my upcoming articles

Subscribe

Hello All 👋
============

Today We will learn CSS Syntax
------------------------------

### CSS Definition

**C**ascading **S**tyle **S**heets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

### CSS Uses

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

### CSS Syntax

CSS Syntax as follow:

    
    selection {
    
    }
    

> This is not CSS Code this is CSS Syntax

### CSS Selectors

There are many Selectors as {body: mention the body tag, \*: this mention all the tags, html: mention the html tag, h1: mention h1 tag, etc...}

### Mention one or two or three tags

There are two ✌ words in html and we mention it in css and this words is {id, class} We write . to mention the class We write # to mention the id

Id is for one tag but Class is for any number of tags

we write id and class in code as follow: Html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Learn CSS</title>
    </head>
    <body>
              <h1 class="logo">Programing-School</h1>
              <h2 id="sublogo">Learn CSS</h2>
              <ul class="main-links">
                        <li>CSS Definition</li>
                        <li>CSS Uses</li>
                        <li>CSS Syntax</li>
              </ul>
    </body>
    </html>
    

CSS:

    .logo {
        font-size: 20px;
        color: black;
    }
    
    .sublogo {
        font-size: 15px;
        color: blue;
    }
    
    .main-links {
        list-style: none;
    }
    

### How to write CSS and style Html

1.  Create Your html file like `index.html`
2.  Create Your CSS File like `style.css`
3.  Create Some Html code like this:
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
               <meta charset="UTF-8">
               <meta http-equiv="X-UA-Compatible" content="IE=edge">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <title>Learn CSS</title>
        </head>
        <body>
               <h1>Programing-School</h1>
               <h2>Learn CSS</h2>
               <ul>
                         <li>CSS Definition</li>
                         <li>CSS Uses</li>
                         <li>CSS Syntax</li>
               </ul>
        </body>
        </html>
        
    
4.  As we learn about css syntax but we will learn css arguments as follow:
    
        body {
         background: black;
         color: white;
        }
        
    

Congratulations 🎊 you write CSS Code

Please Don't forgot to follow me and like the post(article) to support me !!!

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643688456%2FnznpsvvJs.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

[1](https://programming-school.hashnode.dev/#comments-list)

[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Flearn-css-and-its-syntax&text=Learn%20CSS%20and%20its%20Syntax%0D%0A%7B%20by%20%40Program39300266%20%7D%20from%20%40hashnode%0D%0A)

Share this[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Flearn-css-and-its-syntax&text=%20%40Programing-School)[](http://www.reddit.com/submit?title=Learn%20CSS%20and%20its%20Syntax&selftext=true&text=%20https%3A%2F%2Fprogramming-school.hashnode.dev%2Flearn-css-and-its-syntax)

Learn CSS & Its Syntax 💪


## Learn Git & GitHub

![Learn Git & GitHub](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1643451400712%2FdHEknLTho.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75)

Learn Git & GitHub
==================

Learn Git and GitHub from experts 😎
------------------------------------

[![Programing-School's photo](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1645823553390%2FoHcqD2UHc.png%3Fw%3D200%26h%3D200%26fit%3Dcrop%26crop%3Dfaces%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=640&q=75)](https://hashnode.com/@Programing-School)

[Programing-School](https://hashnode.com/@Programing-School)

·[Jan 29, 2022](https://programming-school.hashnode.dev/learn-git-and-github)·4 min read

Subscribe to my newsletter and never miss my upcoming articles

Subscribe

### Table of contents

*   [What is Git ?](https://programming-school.hashnode.dev/#heading-what-is-git)
*   [Installing Git](https://programming-school.hashnode.dev/#heading-installing-git)
*   [Configure Git](https://programming-school.hashnode.dev/#heading-configure-git)
*   [Login To GitHub](https://programming-school.hashnode.dev/#heading-login-to-github)
*   [Login To Git](https://programming-school.hashnode.dev/#heading-login-to-git)
*   [Initialize Your First Project](https://programming-school.hashnode.dev/#heading-initialize-your-first-project)
*   [Now Create Your Files in your project](https://programming-school.hashnode.dev/#heading-now-create-your-files-in-your-project)
*   [Publish Your Repository on GitHub](https://programming-school.hashnode.dev/#heading-publish-your-repository-on-github)
*   [Thank you for reading 📖 😁😁](https://programming-school.hashnode.dev/#heading-thank-you-for-reading)
    *   [🌍 Find me at:](https://programming-school.hashnode.dev/#heading-find-me-at)

**Git & GitHub is A Version Control for beginners and experts**

Git and GitHub are two technologies that every developer should learn, irrespective of their field.

If you're a beginner developer, you might think that these two terms mean the same thing – but they're different.

Prerequisites In order to complete this tutorial, you'll need the following:

*   A Command Interface like cmd
*   A Text Editor of your choice (I Will use Visual Studio Code)
*   A GitHub account.

What is Git ?
=============

What is Git? Git is a version control system which lets you track changes you make to your files over time. With Git, you can revert to various states of your files (like a time traveling machine). You can also make a copy of your file, make changes to that copy, and then merge these changes to the original copy.

For example, you could be working on a website's landing page and discover that you do not like the navigation bar. But at the same time, you might not want to start altering its components because it might get worse.

With Git, you can create an identical copy of that file and play around with the navigation bar. Then, when you are satisfied with your changes, you can merge the copy to the original file.

You are not limited to using Git just for source code files – you can also use it to keep track of text files or even images. This means that Git is not just for developers – anyone can find it helpful.

Installing Git
==============

In order to use Git, you have to install it on your computer. To do this, you can download the latest version on the [official website](https://git-scm.com/). You can download for your operating system from the options given.

You can also install Git using the command line, but since the commands vary with each operating system, we'll focus on the more general approach.

Configure Git
=============

I will assume that at this point you have installed Git. To verify this, you can run this command on the command line: `git --version`. This shows you the current version installed on you PC.

Login To GitHub
===============

If you have The Account before, Go to this [Section](https://programming-school.hashnode.dev/#heading-login-to-git)

1.  Go to [GitHub Official Site](https://github.com/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105717901/S1HEz3Ov1.jpeg)

1.  Write Your Information ℹ

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105719360/ocu7aucpq.jpeg)

Congrats Your GitHub Account Created Successfully 🎉

Login To Git
============

The next thing you'll need to do is to set your username and email address. Git will use this information to identify who made specific changes to files.

To set your username, type and execute these commands: git config --global [user.name](http://user.name/) "YOUR\_USERNAME" and git config --global [user.email](http://user.email/) "YOUR\_EMAIL". Just make sure to replace "YOUR\_USERNAME" and "YOUR\_EMAIL" with the values you choose.

Initialize Your First Project
=============================

We are finally done with installing and setting up Git. It is now time to create our project.

1.  Create A Folder for Your Project
2.  Go to the bar in the top and write `cmd` ✍:

![Screenshot 2022-01-29 131002.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105720725/mY2onn81_.jpeg)

1.  A Window will opened like this:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105722115/bv7H1kk27.jpeg)

1.  Write in this command prompt `git init` to Initialize New Git Repository:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105723463/7e6NBbo4p.jpeg)

1.  New Folder in Your Project Created Called `.git`

Now Create Your Files in your project
=====================================

If you want to Create A Website create all files like `index.html, Images Folder, style.css(main.css), Main.js and etc...`

Publish Your Repository on GitHub
=================================

If you don't have an account in GitHub Go to [this section](https://programming-school.hashnode.dev/#heading-login-to-github)

1.  You can click on the `+` symbol on the top right corner of the page then choose "New repository".

![Screenshot 2022-01-29 131901.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105724785/xwA_TDeNW.jpeg)

1.  Give your repo a name then scroll down and click on "Create repository".

![Screenshot 2022-01-29 131927.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105726123/b9lEL_52h.jpeg)

1.  Give the repository name Don't Choice anything click on `Create Repository`
    
2.  Let's Copy This Commands and paste it in our command line:
    

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105727384/Dfb66O9p7.jpeg)

1.  Go to the command line and commit our files
2.  Write in the command line `git add .`
3.  Write in the command line `git commit -m "Git Tutorial"`
4.  Write in the command line `git push`

Now go to Your Repository and refresh it Now your files you are push it Successfully pushed and Your Code in the web

Now if you want to host your site in github go and see this [video](https://www.youtube.com/watch?v=NgAy_1JEtTA)

Thank you for reading 📖 😁😁
=============================

🌍 Find me at:
--------------

[Twitter](https://twitter.com/Program39300266) [Instagram](https://www.instagram.com/mohamedehab2463/) [Tweet A thanks](https://twitter.com/intent/tweet?text=Thank%20you%20@Program39300266%20for%20writing%20this%20helpful%20article.%0A%0A%0A%0Ahttps://programing-school.hashnode.dev/learn-git-and-github) [GitHub](https://github.com/Programing-School)

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643688456%2FnznpsvvJs.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643755644%2F40RNtU1Zj.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643783311%2FZ4fzAt9ln.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643793473%2FwxrlC2BFn.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643804463%2F703oh6Yci.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643814744%2F9iXxz71TL.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643825482%2FByM5eIxJW.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643839183%2FCvUptN73c.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643854601%2FcP8rWFP9I.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)2

![Post reaction](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1594643772437%2FFYDU5k2kQ.png%3Fh%3D64%26w%3D64%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=128&q=75)1

[2](https://programming-school.hashnode.dev/#comments-list)

[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Flearn-git-and-github&text=Learn%20Git%20%26%20GitHub%0D%0A%7B%20by%20%40Program39300266%20%7D%20from%20%40hashnode%0D%0A)

Share this[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Flearn-git-and-github&text=%20%40Programing-School)[](http://www.reddit.com/submit?title=Learn%20Git%20%26%20GitHub&selftext=true&text=%20https%3A%2F%2Fprogramming-school.hashnode.dev%2Flearn-git-and-github)

Learn Git & GitHub


## Navbar with flexbox

![Navbar with flexbox](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Funsplash%2FMI9-PY5cyNs%2Fupload%2Fv1642002894210%2FpbXRt9A_L.jpeg%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75)![](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105758633/cKs06Jpmh.json)

Photo by

[Markus Spiske](https://unsplash.com/@markusspiske?utm_source=Hashnode&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=Hashnode&utm_medium=referral)

Navbar with flexbox
===================

[![Programing-School's photo](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1645823553390%2FoHcqD2UHc.png%3Fw%3D200%26h%3D200%26fit%3Dcrop%26crop%3Dfaces%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=640&q=75)](https://hashnode.com/@Programing-School)

[Programing-School](https://hashnode.com/@Programing-School)

·[Jan 12, 2022](https://programming-school.hashnode.dev/navbar-with-flexbox)·2 min read

Subscribe to my newsletter and never miss my upcoming articles

Subscribe

### Table of contents

*   [Hello 👋](https://programming-school.hashnode.dev/#heading-hello)

Hello 👋
========

Today we will create a responsive navigation bar with flexbox

1.  Create Files  
    

Create a new html file for html code  
Create a new CSS File for CSS Code or use style tag `<style></style>` and we but style tag in html file in head tag

1.  Html
    
2.  Default Html Tags
    

There is A Default Html Tags must but it in your html file as follow:

    <!DOCTYPE html>
    <html>
    <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Navigation bar with Flexbox</title>
    </head>
    <body>
    
    </body>
    </html>
    

1.  Header Tag

There is a Header tag `<header></header>` we put all header components to form header in the end

    <!DOCTYPE html>
    <html>
    <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Navigation bar with Flexbox</title>
    </head>
    <body>
              <header>
    
              </header>
    </body>
    </html>
    

1.  But All header components

We will put all header components as logo in the left and some links in the right

    <!DOCTYPE html>
    <html>
    <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Navigation bar with Flexbox</title>
    </head>
    <body>
              <header>
                        <h1> Programing-School </h1>
                        <br>
                        <ul>
                                <li><h4>Home</h4></li>
                              <li><h4>About</h4></li>
                              <li><h4>Products</h4></li>
                        </ul>
              </header>
    </body>
    </html>
    

1.  But All classes and ids

There are classes and ids to style it only:

    
    <!DOCTYPE html>
    <html>
    <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Navigation bar with Flexbox</title>
    </head>
    <body>
    
        <header class="flex-container">
           <h1 class="logo"> Programing-School </h1>
           <br>
           <ul>
                <li class="hoverli"><h4>Home</h4></li>
              <li class="hoverli"><h4>About</h4></li>
              <li class="hoverli"><h4>Products</h4></li>
           </ul>
         </header>
    </body>
    </html>
    

1.  Put CSS in the Website
    
2.  Put the flex-container style
    

    .flex-container {
      display: flex;
      flex-wrap: wrap;
      background-color: DodgerBlue;
      height: 70px;
      top: 0;
      margin: 0;
      padding: 0;
    }
    

We change the display `display` to flex to use flexbox and but the other styles as previous

1.  Put Unordered list style
    
        .flex-container ul {
        list-style: none;
        display: flex;
        margin-top: 3px;
        position: relative;
        flex-direction: row;
        margin-left: 700px;
        }
        
    
2.  Put Unordered list item
    
        .flex-container > ul li {
        cursor: pointer;
        height: 50px;
        background-color: #f1f1f1;
        width: 75px;
        margin: 10px 20px;
        text-align: center;
        font-size:  15px;
        flex-direction: row;
        float: left;
        transition: 1s;
        list-style: none;
        }
        
    
3.  Put logo style
    
        .logo {
         margin: 20px;
         color: #f2f2f2;
         font-size: 25px;
         max-width: 100%;
         height: auto;
         flex-direction: row;
        }
        
    
4.  Put All Hovers
    
        .hoverli:hover {
        background-color: burlywood;
        }
        
    
5.  Put Code who make the navbar responsive (Media Queries)
    
        @media (max-width: 668px) {
        .flex-container ul {
           margin-left: 0px;
        }
        }
        
    

Want to learn [html](https://programing-school.hashnode.dev/learn-html-create-your-first-html-web-page) and [CSS](https://programing-school.hashnode.dev/learn-css-and-its-syntax) Follow the previous links

Like

[](https://programming-school.hashnode.dev/#write-comment)

[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Fnavbar-with-flexbox&text=Navbar%20with%20flexbox%0D%0A%7B%20by%20%40Program39300266%20%7D%20from%20%40hashnode%0D%0A)

Share this[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Fnavbar-with-flexbox&text=%20%40Programing-School)[](http://www.reddit.com/submit?title=Navbar%20with%20flexbox&selftext=true&text=%20https%3A%2F%2Fprogramming-school.hashnode.dev%2Fnavbar-with-flexbox)

Create A Navbar with Flexbox


## 17 best UI/UX design tools

![17 best UI/UX design tools](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Funsplash%2F1_CMoFsPfso%2Fupload%2Fv1641480608084%2FcMFGCXV0W.jpeg%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75)![](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105775527/xzMzHeL8-.json)

Photo by

[Joanna Kosinska](https://unsplash.com/@joannakosinska?utm_source=Hashnode&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=Hashnode&utm_medium=referral)

17 best UI/UX design tools
==========================

[![Programing-School's photo](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1645823553390%2FoHcqD2UHc.png%3Fw%3D200%26h%3D200%26fit%3Dcrop%26crop%3Dfaces%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=640&q=75)](https://hashnode.com/@Programing-School)

[Programing-School](https://hashnode.com/@Programing-School)

·[Jan 6, 2022](https://programming-school.hashnode.dev/17-best-uiux-design-tools)·5 min read

Subscribe to my newsletter and never miss my upcoming articles

Subscribe

### Table of contents

*   [17 best UI/UX design tools](https://programming-school.hashnode.dev/#heading-17-best-uiux-design-tools)
    *   [17 useful tools for UI/UX designers](https://programming-school.hashnode.dev/#heading-17-useful-tools-for-uiux-designers)

17 best UI/UX design tools
==========================

17 useful tools for UI/UX designers
-----------------------------------

In this list, the first 11 tools mentioned are great for UI design, while 12-17 are great for UX. Let’s dive into each one and learn how you can craft beautiful projects.

1.  [Sketch](https://www.sketch.com/)

![60107fc68712a24a60ef658a_6002086f72b72732c401e097_Sketch%20-%20The%20digital%20design%20toolkit.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105776866/AnnLYRgex.jpeg)

If you have any UI design experience, you've heard of [Sketch](https://www.sketch.com/) . And there are quite a few reasons why it’s one of the design tools that’s so revered.

Being able to make universal changes — whether it's through their library of symbols, layer styles, or text styles, or its smooth resizing and alignment features — saves designers time to deliver consistent prototypes. It takes out what’s tedious and lets designers jump in and create. And with a multitude of third-party plugins that integrate without problems, there’s no shortage of tools out there that can be used with Sketch.

1.  [InVision Studio](https://www.invisionapp.com/studio)

![60107fc6d5209b94cde57a47_6002086f72b7273f7301e095_InVision%20%20%20Digital%20product%20design%20%20workflow%20%20%20collaboration.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105778238/pP08oY7N2.jpeg)

With a full suite of applications, [InVision](https://www.invisionapp.com/) gives designers all of the UI design tools they need to create fully realized and functional prototypes with dynamic elements and animations.

Along with these easy-to-use UI design tools, they also make communication easy — with collaboration features that let developers share their work as they design it, receive feedback, and make documented changes at each step. Another useful aspect of InVision is the digital whiteboard that allows team members to get their ideas out there, interact, and get that all important sign-off before moving forward.

1.  [Axure](https://www.axure.com/)

![609acb5b7981e3d2130c0533_Axure.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105779700/ggasHDWbX.jpeg)

[Axure](https://www.axure.com/) functions in prototyping and keeping track of the workflow. It features a smooth interface to document as you go. High fidelity drives this app, resulting in prototypes full of details.

Axure offers many of the other features of popular prototyping and UI design tools. It allows for testing of functionality and puts everything together for an easy developer handoff. This, combined with an emphasis on communication, ensures that everyone on a project is kept up-to-date with progress and changes as they happen in real time, making Axure a solid choice for UI design.

1.  [Craft](https://www.invisionapp.com/craft)

![60107fc6d5032e6545ab5267_6002086f72b727919701e089_craft.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105781951/zT-3aetGh.jpeg)

[Craft](https://www.invisionapp.com/craft), a plugin from InVision, works right alongside what you might be doing in Photoshop or Sketch, with a sync function that updates what you’re working on. Along with this time-saving feature, Craft offers everything you need for prototyping and collaboration. Changes in styling, edits, and other tweaks are updated across the board so that everyone is referring to and working from the same version of a project.

Craft sets itself apart from other UI design tools with its placeholder content. You get access to both Getty and iStock photos, letting you fill your layout with better visuals. And if there’s data in your layout, you can use your own or bring it in from other sources. Not many UI design tools let you fill your mockups with more meaningful content. This special feature of Craft gives your mockups a more accurate representation of what a final design might look like.

1.  [Proto.io](https://proto.io/)

![60107fc6b50b91405c65e1f7_6002086f72b7275e4301e092_Proto%20io%20-%20Prototypes%20that%20feel%20real.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105783412/oDJAvplbg.jpeg)

1.  [Adobe XD](https://www.adobe.com/products/xd.html?sdid=12B9F15S&mv=Search&ef_id=EAIaIQobChMI1vf__r6G5gIVUxitBh3SMgj0EAAYASAAEgJr3_D_BwE:G:s&s_kwcid=AL!3085!3!315233774139!e!!g!!adobe%20xd) (Pro)

![60107fc61b6e6f66176adfd7_6002086f72b72770f101e08d_adobe-xd.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105785298/YWx826OXW.jpeg)

It's hard to knock Adobe off of their status as royalty in design software — their kingdom of design products reigns in the creative cloud. [Adobe XD](https://www.adobe.com/products/xd.html?sdid=12B9F15S&mv=Search&ef_id=EAIaIQobChMI1vf__r6G5gIVUxitBh3SMgj0EAAYASAAEgJr3_D_BwE:G:s&s_kwcid=AL!3085!3!315233774139!e!!g!!adobe%20xd) offers vector-based user interface tools for creating prototypes and mockups with an interface that’s familiar to anyone who has used other Adobe products. This, along with real-time collaboration, makes it a go-to for many UI designers.

Adobe XD has many sophisticated tools for UI designers, but it is also stocked with what designers need to whip up interactions and other dynamic elements that can be integrated into prototypes or mockups. It’s one of the rare design platforms that can combine different disciplines together, without anything lacking.

1.  Marvel

![60107fc6d5209b1912e57a49_6002086f72b72778d701e096_Marvel%20-%20The%20design%20platform%20for%20digital%20products.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105787109/l2J-vI6q0.jpeg)

Whether you've been a UI designer for a while or if you're just stepping into the role, Marvel's design platform makes things easy. With the ability to create both low fidelity and hi-fi wireframes, interactive prototypes, and do user testing, it gives a UI designer everything they need — all wrapped into an intuitive interface. Marvel also has a feature called Handoff that gives developers all the HTML code and CSS styles they need to start building.

1.  [Figma](https://www.figma.com/)

![60107fc61e35ce51a159ca6f_6002086f72b727390701e093_Figma%20%20the%20collaborative%20interface%20design%20tool%20.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105788486/dXTUzrLRm.jpeg)

Figma is A Perfect Editor for UI UX Developers !!

[Figma](https://www.figma.com/) lets designers build dynamic prototypes and mockups, test them for usability, and sync up all of the progress. Figma allows for a collaborative environment where multiple people can work on a project at the same time, much like Google Docs — letting you see who has it open for real-time collaboration. You’ll see who’s working and what they’re doing. It’s also browser-based, making it accessible to everyone in an instant. And as an added bonus, it’s free for individual use so you can check it out and get familiar with how it works.

1.  [Framer X](https://www.framer.com/)

![60107fc73faee481ae00b68d_6002086f72b727741001e091_Framer%20-%20A%20lightning%20fast%20interactive%20design%20tool%20%20(1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105789962/DGPJqH61R.jpeg)

[Framer X](https://www.framer.com/) has evolved from its early days as a code-only prototyping application. Today it offers a host of UI design tools for building functional prototypes and testing for usability. Its ability to work with React makes it ideal for UI designers who like to stay on top of the newest web design innovations.

Framer X also offers a variety of plugins in their store, giving UI designers features such as UI kits for integrating social media channels like Snapchat and Twitter, players for embedding a variety of media, grids, and other useful components that can be easily integrated. It's a great interface design tool with a fairly east learning curve.

1.  [Origami Studio](https://origami.design/)

![60107fc6fca64966486c7ec5_6002086f72b727541501e099_Origami%20Studio%20%E2%80%94%20Design%20Prototyping.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105791388/PjPrliJYx.jpeg)

With a Facebook pedigree (it was built by and for Facebook designers), Origami Studio packs in more complexity than something like In Vision Studio or Sketch — which are a bit easier for beginners in design. For those who need a more advanced prototyping tool as a part of their design system, Origami Studio has a lot to offer.

This platform has the tools you need to build complete prototypes that are powered by a sophisticated patch editor, giving designers the opportunity to integrate advanced functionality. Prototypes end up looking and working like a real app or webpage.

Origami Studio also integrates well with Sketch. If you’re working in parallel with Sketch, it lets you brings in layers and copy and paste them directly without any hang-ups.

1.  [FlowMapp](https://flowmapp.com/)

![60107fc62368c2bbafab4e8d_6002086f72b7272e3a01e08f_Jg_sDQnGXC26SOPlUlD08p41oyx62Imsyoj3wcj1ozDHZlk_9y_HrIHb-WR0GJNJ0X2urWYhcDLMtTB6Wz84qNEyz42gPPRZ1Z4CdCoZPj2uCJtC04Np7mDQXoDqsp9Mk1XRy.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647105792856/4oJ5n9VmG.jpeg)

When developing a user experience strategy, designers need to pay attention to structure, flow, and corresponding sitemaps, which are all at the foundation of UX design.

Where so many tools out there try to combine UI and UX together into one platform, [FlowMapp](https://flowmapp.com/) dedicates itself to the discipline of UX design. Building user flows and constructing visual sitemaps are indispensable for UX, and these are the pillars of FlowMapp’s UX design app.

Like

[](https://programming-school.hashnode.dev/#write-comment)

[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2F17-best-uiux-design-tools&text=17%20best%20UI%2FUX%20design%20tools%0D%0A%7B%20by%20%40Program39300266%20%7D%20from%20%40hashnode%0D%0A)

Share this[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2F17-best-uiux-design-tools&text=%20%40Programing-School)[](http://www.reddit.com/submit?title=17%20best%20UI%2FUX%20design%20tools&selftext=true&text=%20https%3A%2F%2Fprogramming-school.hashnode.dev%2F17-best-uiux-design-tools)

17 Best UI/UX Design Tools


## Deploy an app on vercel

## **Hello**

How are you today ?

1. Create A Vercel Account at vercel.com
2. Then Create A New Project

3. Choose your own method 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646679670287/Ph_gBZmbI.png)

In my case I choose github

Then choose your repository and click ```import```

Then choose your own name of the production deployment

Then choose your own build like the package manager ```yarn or npm``` and the build directory and others

Then If you have ```.env``` file he will don't work, add your own in the environment variables section and then click ```deploy```

Wait for a moment and congratulations 🎊You have deployed your app 

<div class="wm">
    I also have a YouTube channel! Do not forget to subscribe <a href="https://www.youtube.com/channel/UC1YTVmV31RZV2oie1kKpJkw" target="_blank">here</a>.
</div>

<h1>Find Me In</h1>
<a href="https://www.linkedin.com/in/mohamed-ehab-164193208/" target="_blank">Linkedin</a>
<a href="https://www.instagram.com/mohamedehab2463/" target="_blank">Instagram</a>
<a href="https://twitter.com/Program39300266" target="_blank">Twitter</a>
<a href="https://dribbble.com/Programming-School" target="_blank">Dribbble</a>
<a href="https://mohamed-ehab-portfolio.vercel.app/" target="_blank">My Portfolio</a>
<a href="https://github.com/Programing-School" target="_blank">GitHub</a>
<a href="https://www.youtube.com/channel/UC1YTVmV31RZV2oie1kKpJkw" target="_blank">YouTube</a>
<a href="mailto:mohamed9919698@gmail.com" target="_blank">Mail Me</a>

<h3>Don't forgot to follow me on Hashnode and GitHub </h3>

<h1>Thank you for reading</h1>

Deploy an app on Vercel


## Visual Studio code

# Hello


## Visual Studio code is the best code editor and there are many editors but visual studio code is the best use in 2021


![unnamed.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641138109499/GffU2zQUM.png)


### Visual Studio code have a good user interface that have all you need


![hero.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641138342692/kNEcAp-af.png)

#### the visual Studio code have :

1. Status bar
2. Group of tabs for all your files
3. Side bar for all files in your project folder
4. Color of your code !!!
5. Many  [Extensions](https://programing-school.hashnode.dev/7-helpful-visual-studio-code-extensions) are available to use
6. Many Themes
7. Many Themes for icons

# If you want to download  [visual studio code](https://code.visualstudio.com/)

see this video <iframe width="560" height="315" src="https://www.youtube.com/embed/CgTeTudMXlA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

1. Go to this  [link](https://code.visualstudio.com/)
2. Click to download for windows
3. Follow the instructions in the video or read the  [article](https://programing-school.hashnode.dev/how-to-install-visual-studio-code-and-write-python-html-css-javascript-with-it)



Best Code Editor For Web Development and React Native

Visual Studio Code


## 40 Best YouTube Channels,  Arabic and English

Hello Developers 👏👋

How are you Today ?

In this Article we will show you the best youtube channels to learn anything and make projects like { Programming, Office and etc... }

Your YouTube suggestion tells who you are. I believe we will become like people whom we follow and watch. When I was in my college my brother suggested me some YouTube to channels to learn new technologies until then I don't know that YouTube is having such a good quality education content for free. In this blog I wanted to share some of best YouTube channels you need subscribe now as a developer.

# English And Arabic Channels
- [Programming-School](https://www.youtube.com/channel/UC1YTVmV31RZV2oie1kKpJkw) : In short This is my channel i make videos with arabic and english languages for All of Programming

Programming-School, All of Programming

# English Channels
- [FreeCodeCamp](https://www.youtube.com/c/Freecodecamp) : This channel is the best among all. It has tons of videos which are free and also delivered from the experts. Choose one video according to your interest and start watching.

- [Fireship](https://www.youtube.com/c/Fireship) : Don't be dumb when people talk about new technologies this channels helps you to keep updated with the new technologies in the market. This channel is famous for its 100sec explanation videos.

- [CleverProgramming](https://www.youtube.com/c/CleverProgrammer) : If you want to make Full Stack Applications (Web 3.0 Applications) using JavaScript Frameworks like Twitter, Uber and etc...

-  [Clear Code](https://www.youtube.com/c/ClearCode) : Learn Python libraries Like pygame and create a games with python In short ```Master Python```

- [Programming With Mosh](https://www.youtube.com/c/programmingwithmosh) : If you want good introduction to new technology this channel is there for you. This videos are developed by keeping the beginners in mind.

- [Kevin Powel](https://www.youtube.com/kepowob) : CSS Tutorials

- [Full Stack Nirja](https://www.youtube.com/c/FullStackNiraj) : Build A Full Stack Websites like Blog with React or React Native or A MERN Stack App

- [Bro Code](https://www.youtube.com/c/BroCodez) : Learn Python, Java, C++, C#, C, Html, CSS And JavaScript and tutorials with them

- [Coding Napel](https://www.youtube.com/c/CodingNepal) : Full Stack Tutorials

- [JavaScript Matery](https://www.youtube.com/c/JavaScriptMastery) : Full Stack Tutorials With The Full Source Code with JavaScript and Back-End Sites Like Sanity.io, Honestly, I like his videos

- [True Code](https://www.youtube.com/c/TrueCoder) : Web Development & Design Tutorials

- [Dark Code](https://www.youtube.com/c/DarkCodeOnline) : Web Tutorials

- [Web Dev](https://www.youtube.com/c/WebDevelopment) : Web Tutorials, No Source Code

- [Academind](https://www.youtube.com/c/Academind) : Online Education

- [CodingLab](https://www.youtube.com/c/CodingLabYT) : Web Tutorials

- [Online Tutorials](https://www.youtube.com/c/OnlineTutorials4Designers) : Online Tutorials

- [Coding with Elias](https://www.youtube.com/c/CodingwithElias) : Full Stack Tutorials

- [{RhymBil}](https://www.youtube.com/c/RhymBil) : Full Stack Tutorials

- [Lines of Design](https://www.youtube.com/channel/UCno6nQho0ifTVhKyvJqxCmw) : Web Tutorials

- [Alan Becker](https://www.youtube.com/c/noogai89) : Many And Many Gaming

- [Traversy Media](https://www.youtube.com/c/TraversyMedia) : Learn And Build Web Projects

- [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified) : For Advices and some tutorials

- [ILW Yennefer](https://www.youtube.com/channel/UC5XDHSUoBC11Kj-iIpx7QkA) : Big Designing Tutorials and some full stack

- [Coding with Basir](https://www.youtube.com/c/CodingwithBasir) : Full Stack Projects

- [Neso Academy](https://www.youtube.com/c/nesoacademy) : C++ And Data Structure

# Arabic Channels

- [Arabic Competitive Programming](https://www.youtube.com/c/ArabicCompetitiveProgramming) : هذه Data Structure and languages like c++القناه لل

- [yapoey](https://www.youtube.com/c/yapoey-tech) : لمشاريع الويب

- [راكوان للبرمجة - learn coding](https://www.youtube.com/channel/UCIKDaj_tCR7ntiwM71DfaBg) : Web Projects and Learn Web

- [Mohamed Abusrea - محمد أبوسريع](https://www.youtube.com/c/MohamedAbusrea) : Web And Other Things

- [Abdelrahman Gamal](https://www.youtube.com/c/AbdelrahmanGamal) : Web and cs50

- [Elzero Web School](https://www.youtube.com/c/ElzeroInfo) : For Web

- [Codezilla](https://www.youtube.com/c/Codezilla) : For Some Web and learn python

- [اتعلم فى ساعة ](https://www.youtube.com/channel/UCs8PwUcH93uchrEZkB8ltNw) : Frameworks like Flutter and Nodejs and Learn Web