Vlog

Web Developer at Work
Image Source: (thimpress.com)

Video Overview of 10 Great Web Development Tools


Video Transcript Summary of Web Development Tools:

An Overview of 10 Great Web Development Tools

Welcome to my website where I review 10 great web development tools used for front end web development to create your websites.

Basically this website consists of five different pages and a home screen is shown here where we introduce the 10 great web development tools.

Ten of them shown here are the ones that are probably most popular and most useful, but it's not an all-inclusive list.

The second page is where we actually go into the reviews of each of the different web development tools on the website.

I have navigation near the top and also navigation near the bottom.

Here we also have a breakdown comparison of all the web development tools in terms of whether it's open source, free, or proprietary with links to the respective websites to gain further information and details on each tool.

The layout of the website is basically a two column layout...it's a fluid layout and it doesn't take up the entire screen.

It's also a responsive layout so it works in full desktop mode, tablet mode, and also in mobile device mode where everything is stacked and in a single column.

Also have some hot links to get you back to the top pretty quickly and you can get to the reviews page where we also have a forms page.

Here you could fill out contact information if you want to receive more information about various web development tools. I can't cover all the tools within this video so the right side gives additional resources where you can find more information on other web development tools and applications out there.

The fourth page is where we have the video log which is where this video resides. I just have a placeholder here for that right now. I also have a video summary which would be a video transcript of the presentation itself and all the tools that I'm covering in this presentation.

On the right I discuss video captioning with subtitles which is important for accessibility.

I also present video captioning topic here on the right side even though it may not be considered a front end web development tool per se, but it's pretty important if you want to capture a much wider audience, particularly people who are hearing impaired or maybe non-English speaking individuals.

I also provided two open source tools here that allows you to do screen recordings of the computer screen...with OBS or the Open Broadcaster Software and with Web Captioner which works in conjunction with OBS to create subtitles.

Finally, there's a credits page where we show both information credits and image credits because you need to give credit where credit's due for where you find the work out on the internet.

Going back to the reviews page...that's the meat of the of the presentation.

This is where several tools are introduced. I only covered 10 of them.

For text editors I kind of focused on Sublime Text and there's others that can help you build your HTML and CSS. You don't really need an IDE.

You also have Chrome Development Tools available in a Chrome browser to allow you to do web authoring and debugging.

Git and GitHub are very handy tools that most people use for doing web development work. If you want to manage and track your code Git and GitHub are great for that. It allows you to manage your code files out on the internet. GitHub actually runs on top of Git and it lets you manage your Git repositories folders easily on its platform. It's also free.

You have several HTML CSS Frameworks...bootstrap being the most popular. I also mentioned Foundation, Skeleton and the UIkit. Bootstrap, however, is probably more commonly used by developers to create responsive mobile first websites and it provides a range of tools and built-in components. It does focus on responsive front end web development.

You also have several JavaScript type languages or libraries. jQuery is a feature-rich JavaScript library that makes HTML traversal manipulation, animation, and event handling a lot easier with its API. It provides a lot of versatility and extensibility to developers.

Another tool that falls under the category of a JavaScript framework is React. It was first introduced by Facebook and the developer community back in 2013. It's still fairly popular. It's widely used in web development.

AngularJs is another JavaScript framework mainly used for front end web development. It's based on the MVC or model, view, controller pattern for developing projects. It was originally developed by Google. I don't know if it's actually supported with updates currently.

For CSS preprocessors there's a few that fall into this category: SAS, Less, Stylus, PostCSS3. Basically these are scripting languages used in web development to extend CSS default capabilities.

Finally, here you've got Adobe Photoshop which can be used to edit pixel-based images. It can do photo-retouching, editing videos...it's not free or open source.

And finally...you also have the Audacity audio editor. It is free and open source platform that is basically an audio editor and recorder that can record and play sounds. It's been developed by a dedicated community since 1999. You can basically edit sounds...you can cut, copy, paste features. You can mix tracks and apply effects to recordings.

So that pretty much covers the tools. The data table compares all the different front end frameworks.

And that pretty much summarizes the layout of my website and it's content.

I hope you find it useful in the future when it comes time to develop your websites as well and thank you for your time!

Back to the top

Using Video Closed Captioning & Subtitles for Accessibility

Video captioning and subtitle creation tools do not really fall under the umbrella of front-end web development tools, however, many websites include embedded videos which could benefit viewers by providing them with closed captioning and subtitles. Video captioning and subtitles in embedded website videos make them accessible to a wider audience -- especially those who are hearing impaired and non-English speaking. Moreover, they also help viewers understand content that they may not be able to digest with video and audio alone. If a viewer is in a place where the audio portion of the video could be a distraction to others, the volume could be turned off with subtitles turned on. In this way, the viewer can still digest the video content without disturbing others nearby. In addition, captions and subtitles can make your content:

  • Easier to understand
  • Engage your audience everywhere
  • Improve SEO score and searchability
  • Improve language skills
  • Better understand translations
  • Shows respect and awareness for diverse audiences
  • Boost comprehension, retention, engagement, content discovery, and analytics

How to Setup Screen Casting with Subtitles?

Microsoft PowerPoint can now add subtitles to a presentation. Unfortunately, Microsoft PowerPoint is not a freely available tool. In this final project, "An Overview of 10 Great Web Development Tools" video was created using two freely available applications.

How to use OBS for Screen Recording or Streaming - Beginner Tutorial

Video Link

Close Caption Your Live Stream EASY and Free in OBS!

Video Link

Back to the top