DEV Community: IEEE MACE SB

A Curated List of Resource to Build Website and Apps Without Code!

abhiram-ar — Sat, 22 Jan 2022 14:10:59 +0000

Are you a beginner to programming? or do you want to build a website or an App without learning to code or NO CODE?

Here are some list of platforms available to build responsive websites and applications

Web development without Coding

1.Bootstrap studio
Link : https://bootstrapstudio.io/

Bootstrap Studio is an app for creating beautiful websites. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. It is built on top of the hugely popular Bootstrap framework, and exports clean and semantic HTML.

If you need a component which doesn't exist in our library, just click the Online tab in the Component Panel. There you will find thousands of components built and shared by the community. You can also upload your own.

If you have a website that you've developed previously, you can import it. Just drag and drop the HTML, CSS, JS files and images into Bootstrap Studio and they will be added to your project.

2.Bravostudio
Link : https://www.bravostudio.app/

Bravo Studio is an app builder for designers. It makes it possible to turn Figma prototypes into native iOS and Android app instantly without writing any code

3.Quest.ai
Link : https://www.quest.ai/

Convert your designs into responsive, live websites automatically. Add interactions, motion graphics, video, audio without writing any code. Connect to data and content source and build fully-functioning websites, landing pages, product pages, or business applications easily. With Quest, anyone can build what they envision without being constrained by their engineering bandwidth.

4.Wix website builder Link : https://www.wix.com/

Wix is totally beginner friendly.Wix is a free web-based website builder based.You can build responsive website just by drag and drop feature,, so you don't need coding skills, .

Free version has all the tools you need for development.And you have thousands of templates of different category to begin with

There are many modules that you can add-on in the wix store and you can publish the website for free(though .wix will be added in the domain address in the free version).And there are build in option for search engine optimisation

5.Webflow
Link : https://webflow.com/

With Webflow you can build a prototype that is already a finished product. How cool is that?

Webflow is a powerful, web-based design tool that gives you the superpower of designing, building, and launching responsive websites without the use of code. It’s an all-star level design platform that allows you to go from the initial idea to ready-to-use products.

It fills the gap between software like Squarespace, Wix, and the world's most popular CMS WordPress. Webflow's design flexibility, lightning speed performance, and ease- of-use make it quite a success story as I find Webflow referred to as the next-generation tool for building and launching websites by newcomers and professionals across the web.

App development without Coding

In the past you had to be a programmer to make an app, which would likely take weeks, months or even years. Now, however, there are numerous app - building platforms you can use to create an app in minutes. We’ve put

together some of our favorites for you here.

1.MIT App Inventor
Link : https://appinventor.mit.edu/

MIT App Inventor is great for beginners! ... The layout is visual, and relies on drag and drop which helps users understand the components needed for an app. It also clearly has features of Android programming in Java which makes the transition to written code for Android easier

2.AppyPie
link: https://www.appypie.com/app-builder/appmaker

AppyPie has helped more than 3 million creators to build a fully functional mobile app with nothing but visual building blocks.

On top of support for Android and iOS, AppyPie also offers full-on PWA (Progressive Web Apps) functionality. So, your mobile app will be viewable in a web browser like a regular website. This pretty much solves two issues at the same time

3.Adalo
Link :https://www.adalo.com/

Adalo helps you design new apps ,without any coding skills. You will be capable of completely controlling your design by using drag and drop components.

With Adalo, you have the freedom to add database configuration and interactions automatically. If you have an existing API, then Adalo will integrate with the same. With a single click, you will be able to launch the true version of your mobile apps on the application stores for Android and iOS.

In conclusion, know what features you’re looking for in your mobile/Web application. This will help you narrow down the platforms which can
best serve your needs.

And that concludes our list.
Happy Building!




    ❤️ Website  |  📷Instagram   |  💼LinkedIn   |  🐥Twitter

Create a Website Without Code

boomcatalyst — Thu, 20 Jan 2022 15:44:09 +0000

Convert your designs into responsive, live websites automatically. Add interactions, motion graphics, video, audio without writing any code. Connect to data and content source and build fully functioning websites, landing pages, HTML emails, product pages, or business applications easily. There are many platforms that allows you to build responsive websites without a single line of code. One such platform is Quest
With Quest, anyone can build what they envision without being constrained by their engineering bandwidth.

How to start

Go to quest.ai. Then signup for free using Build For Free button. Make sure to select The new quest tile during sign up.

After signup, you’ll be directed to a page shown below

Quest is more of like a web hosting. For design of the web page, you can use either Adobe XD or Figma. Select the Quest plugin for Figma on top middle of the page. Now you will be directed to Figma plugin page as shown below.

Click on the Download button

and you will be directed to a page where you can select Install for installing the plugin.

You will be asked to sign up to Figma. Complete the process

After login you will be directed to a page where you can start creating your design by selecting New design file. To learn more about how to design in Figma, use **resource section at the bottom of the Figma home page or help.figma.com

After completing the design in Figma, you need to connect Figma and Quest using a plugin. For that go to plugin option on the dropdown menu and select manage plugin under plugins.

Click on the Browse plugin on community and search for Quest

Now, go back to the design space and select Quest under plugin.

This will show up a box as shown below. Give a name for the design and select the layers that has to be imported to quest and click export.

You can now see you design in quest work window just by selecting View in Quest.

Inside Quest you can make you design adjustable to different screen sizes like laptops, tablets, smartphones etc. You can also launch your design into a custom domain if you had bought one already.

To know more on how to work with Quest visit the resource section at the top of Quest homepage or visit www.quest.ai/docs




    ❤️ Website  |  📷Instagram   |  💼LinkedIn   |  🐥Twitter

Introduction to Git

Sourab N — Sun, 16 Jan 2022 15:41:02 +0000

Git is an open-source, version control tool created in 2005 by developers working on the Linux operating system; GitHub is a company founded in 2008 that makes tools which integrate with git. You do not need GitHub to use git, but you cannot use GitHub without using git. There are many other alternatives to GitHub, such as GitLab, BitBucket, and “host-your-own” solutions such as gogs and gittea. All of these are referred to in git-speak as “remotes”, and all are completely optional. You do

not need to use a remote to use git, but it will make sharing your code with others easier.

Step 1: Create a local git repository

When creating a new project on your local machine using git, you'll first create a new repository (or often, 'repo', for short).

To begin, open up a terminal and move to where you want to place the project on your local machine using the cd (change directory) command.

To initialize a git repository in the root of the folder, run the git init command:

Step 2: Add a new file to the repo

Go ahead and add a new file to the project, using any text editor you like or running a touch command. touch newfile.txt just creates and saves a blank file named newfile.txt.

Once you've added or modified files in a folder containing a git repo, git will notice that the file exists inside the repo. But, git won't track the file unless you explicitly tell it to. Git only saves/manages changes to files that it tracks, so we’ll need to send a command to confirm that yes, we want git to track our new file.

After creating the new file, you can use the git status command to see which files git knows exist.

An interlude: The staging environment, the commit, and you

One of the most confusing parts when you're first learning git is the concept of the staging
environment and how it relates to a commit.

A commit is a record of what changes you have made since the last time you made a commit. Essentially, you make changes to your repo (for example, adding a file or modifying one) and then tell git to put those changes into a commit.

Commits make up the essence of your project and allow you to jump to the state of a project at any other commit.

So, how do you tell git which files to put into a commit? This is where the staging environment or index come in. As seen in Step 2, when you make changes to your repo, git notices that a file has changed but won't do anything with it (like adding it in a commit).

To add a file to a commit, you first need to add it to the staging environment. To do this, you can use the git add command (see Step 3 below).

Once you've used the git add command to add all the files you want to the staging environment, you can then tell git to package them into a commit using the git commit command.

Step 3: Add a file to the staging environment

Add a file to the staging environment using the git add command.

If you rerun the git status command, you'll see that git has added the file to the staging environment

Step 4: Create a commit
It's time to create your first commit!

Run the command git commit -m

Step 5: Create a new branch

Now that you've made a new commit, let's try something a little more advanced.

Say you want to make a new feature but are worried about making changes to the main project while developing the feature. This is where git branches come in.

Branches allow you to move back and forth between 'states' of a project. Official git docs describe branches this way: ‘A branch in Git is simply a lightweight movable pointer to one of these commits.’ For instance, if you want to add a new page to your website you can create a new branch just for that page without affecting the main part of the project. Once you're done with the page, you

can mergeyour changes from your branch into the primary branch. When you create a new branch, Git keeps track of which commit your branch 'branched' off of, so it knows the history behind all the files. Let's say you are on the primary branch and want to create a new branch to develop your web page. Here's what you'll do: Run git checkout -b . This command will automatically create a new branch and then 'check you out' on it, meaning git will move you to that branch, off of the primary branch.

After running the above command, you can use the git branch command to confirm that your branch was created

Step 6: Create a new repository on GitHub

If you only want to keep track of your code locally, you don't need to use GitHub. But if you want to work with a team, you can use GitHub to collaboratively modify the project's code.

To create a new repo on GitHub, log in and go to the GitHub home page. You can find the “New repository” option under the “+” sign next to your profile picture, in the top right corner of the navbar

After clicking the button, GitHub will ask you to name your repo and provide a brief description

When you're done filling out the information, press the 'Create repository' button to make your new repo.

GitHub will ask if you want to create a new repo from scratch or if you want to add a repo you have created locally. In this case, since we've already created a new repo locally, we want to push that onto GitHub so follow the '....or push an existing repository from the command line' section

Step 7: Push a branch to GitHub

Now we'll push the commit in your branch to your new GitHub repo. This allows other people to see the changes you've made. If they're approved by the repository's owner, the changes can then be merged into the primary branch.

To push changes onto a new branch on GitHub, you'll want to run git push origin yourbranchname. GitHub will automatically create the branch for you on the remote repository

Step 8: Create a pull request (PR)

A pull request (or PR) is a way to alert a repo's owners that you want to make some changes to their code. It allows them to review the code and make sure it looks good before putting your changes on the primary branch.

This is what the PR page looks like before you've submitted it

You might see a big green button at the bottom that says 'Merge pull request'. Clicking this means you'll merge your changes into the primary branch..

Sometimes you'll be a co-owner or the sole owner of a repo, in which case you may not need to create a PR to merge your changes. However, it's still a good idea to make one so you can keep a more complete history of your updates and to make sure you always create a new branch when making changes.

Step 9: Merge a PR

Go ahead and click the green 'Merge pull request' button. This will merge your changes into the primary branch.

When you're done, we recommend deleting your branch (too many branches can become messy), so hit that grey 'Delete branch' button as well.

You can double check that your commits were merged by clicking on the 'Commits' link on the first page of your new repo.

This will show you a list of all the commits in that branch. You can see the one I just merged right up top (Merge pull request #1).

You can also see the hash code of the commit on the right hand side. A hash code is a unique identifier for that specific commit. It's useful for referring to specific commits and when undoing changes use the git revert command to backtrack.
Step 10: Get changes on GitHub back to your computer

Right now, the repo on GitHub looks a little different than what you have on your local machine. For example, the commit you made in your branch and merged into the primary branch doesn't exist in the primary branch on your local machine.

In order to get the most recent changes that you or others have merged on GitHub, use the git pull origin master command (when working on the primary branch). In most cases, this can be shortened to “git pull”.

This shows you all the files that have changed and how they've changed. Now we can use the git log command again to see all new commits.

(You may need to switch branches back to the primary branch. You can do that using the git checkout master command.)

    ❤️ Website  |  📷Instagram   |  💼LinkedIn   |  🐥Twitter