Basics of Web Development ......!!!!
Welcome to all front end developers, I am glad that you reach here and I will make sure you will come to know the basic of front end development at the end of the episode.In this episode we will learn following contents.
Content Of Episode 001
- What is Front End Development ?
- Why it is essential ?
- Languages use in front end development
- Editors and tools use for End development
- Drag and Drop Tools
- Jobs, lifestyle and salary of Front End Developers.
What is Front End Development?
Ok as like from all other tutorial websites, we will not describe bookish knowledge. Take example of the page you reading now. Did you get something ??
In web till date whatever application is their it is having front end. So development or may say designer regarding visual or view of application is called as front end developer.
Image Creadit From https://www.simpalm.com/services/front-end-web-developers
" Whatever you can see on the web (internet, application, apps) is called as front end which may be text, image, graph, table, clickable buttons, colours, links, embedded video. "
In web till date whatever application is their it is having front end. So development or may say designer regarding visual or view of application is called as front end developer.
Image Creadit From https://www.simpalm.com/services/front-end-web-developers
Why it is essential ?
From Above description of the
What is Front End Development ?
you may come to know that for every application front end is their which is responsible for the user interaction and experience to our businness. So in order to catch users or (client) view toward our bussiness, product, services or any other marketing thing we should have our good representation to user. It is as essential as facial expression of a actor in a movie.
We can take example of Amazone online product seller. Suppose if they don't have images of products.Do you think number of users buying product from amazone will remain same ? Of course a big "NO". Thats the importance of a front end to catch user towards us.
We can take example of Amazone online product seller. Suppose if they don't have images of products.Do you think number of users buying product from amazone will remain same ? Of course a big "NO". Thats the importance of a front end to catch user towards us.
Languages use in front end development
In short we can say three main language are their.
<div style="background: yellow; height: 300px; width: 300px;">
</div>
You Can see in above code code starts with <div>
and followd by some code after at end
is called as a tag. Html5 (Hypertext Markup Language )(now called as html5 )
This is called as markup language and it responsible for creating a view for front end. It's having predefine syntax for creating view. Suppose you wanted create a box of length 300px by 300px and background color of yellow then
No Code
CSS(Cascading Style Sheets or css3)
CSS is use providing styling to the html view. Take an example a text is their in paragraph and you need to change color of text and letter spacing to 2px per word then css is used as a.
This is green Color Paragraph and letter spacing is 2 px
Their are so many css properties to change appearance and behaviour of html element or (view). How to apply that we will study letter. For now just remember that css for styling or may call designing web application.
JS (JAVA Script)
Till time you here , you come to know that what is html and css. Now we will move to functionality of htnl elements. Now suppose you wanted to do some prompt or alert by clicking html element or more precisly on click of a button you want prompt of alert of "hii, this is my first function in JS".In order to provide funtionlity of click we need to add some html tag inside button tag like
Editors and tools use for End development
In order to start front end development, you can direct start by using the simple Notepad in windows or Text Editor in Mac. Just create a file and ass extension to the file as a html. Then open that file in text editor, now you are ready to code the front end.
But in order to have more efficient in working with front end I strongly recommended you to use one of following editor.
- 1. Sublime Editor
- 2. Visual Code Studio
- 1. Sublime Editor
- 3. Notepad++
- 4. Atom Editor
Drag And Drop Tools
Their are many tools in the market which give you flexibilty of designer by dragging components. My point of view
webflow is the best tool for front end designer. We have many options of drag and drop
tool but i can assure you without having knowledge of html and css you can'd do anything.
1. Carrd Simple, responsive, one-page sites for pretty much anything. A free service for building and hosting simple, responsive, one-page websites for anything and everything. There are a bunch of other sites that help you build out one-pagers, but the biggest differentiator here is the simplicity and easy of use, while not compromising on your ability to create a functional and beautifully designed website.
2. Template Stash Curated collection of best free themes & website templates A curated collection of the best free website templates. Each one is evaluated based on: visual appeal, ease of customization, and functionality. You can search for what you’re looking for by category, keyword, and creator, which makes it easy to find exactly what you’re looking for. Bonus: There are also collections dedicated to specific design trends, like “material design” and “modern portfolio.”
3. Bubble Build a fully functional web app without any code. Without any code knowledge, this tool helps you build web and mobile applications. The intuitive drag and drop builder allows you to easily add page elements like: text, videos, maps, icons, images, buttons, and more. Everything is customizable, down to font colors, icons, and the visibility of various elements based on what’s going on in the app you design.
4. HTML to WordPress Convert HTML website to WordPress theme in seconds. This tool converts static HTML websites into WordPress. If you’re looking to switch your site over, this will help you automate a lot of the manual work. Just upload a website into the tool and after a few seconds, it’ll convert into a fully functional, premium quality WordPress theme—activated and installed. All of the designers and developers, rejoice!
5. Tilda Publishing Build beautiful websites and tell stories without any code. A website building platform geared toward content-oriented sites. There are over 170 pre-designed blocks that enable you to drag and drop your way toward a fully customizable website. All pages you create with this tool are built to look great across all devices, which is a nice thing to not have to worry about if you’re not a coder. This is a fantastic option for those looking to build blogs, lookbooks, event reports, and more.
6. XPRS Free website builder — making web design like Lego™. No code. If you’ve ever been frustrated with the process of building a website because it was too complicated, confusing, and/or expensive, this product will make it so much easier (and fun). Use a collection of premium web designs, reliable hosting, and a simple editing environment to get your next web project up in no time. What’s special about this tool is that you build your site with polydoms (smart content blocks), allowing for endless customization. It really is like playing with digital Legos™.
7. Grav Modern open source flat-file CMS to build faster websites. A more complex tool, built for developers with some experience. This open source flat-file CMS allows you to build faster websites. The idea: With static HTML pages, you can’t do anything dynamic like query data, edit content via an admin interface, process forms, etc. Grav is “processed at runtime,” allowing you to do the same things you could do with Drupal, Joomla, or WordPress. There are countless features, including: site-wide and per-page routing and redirection, a visual debug panel, multi-language support, flexible taxonomies, a built-in asset manager, and much more.
8. Pivot Drag and drop real-time HTML page building. This block-based, multi-purpose HTML 5 template allows you to choose from over 70 uniquely styled content blocks for incredible customizability. You can build web pages in minutes and manage site navigation, sliders, images, text, maps, color schemes, and more—all from your browser. Great for multiple uses, from a product launch to a personal portfolio website.
9. Hype 3.0 Create beautiful HTML5 web content, no coding required. This keyframe-based animation system makes your content come alive. Just click “record” and Hype watches your every move, automatically creating keyframes as needed. You can also add, remove, and rearrange keyframes manually if you want more control. This is an incredible tool if you’re looking to animate anything from web pages and infographics, to eBooks and presentations. Prepare to be wowed.
10.OnePager One page theme builder for WordPress. This open source theme builder allows you to quickly edit everything on your web page on the fly. It’s effortless to build out a fully responsive, SEO-friendly site with built-in presets to kickstart your site development. Just about everything is customizable, allowing you to tailor the look and feel of your site exactly the way you want it. A great tool for anyone looking to build a WordPress site quickly.
11. Webydo 2.0 Seamless web design platform for professionals, code-free. This product is geared toward empowering designers to create responsive websites using all of their designs even if they don’t have any coding experience. There are a number of similar tools on the market, but this one is built with design in mind. The integrated B2B solution also helps with direct client billing, a neat dashboard to manage countless sites/clients, and a robust CMS. Worth looking into, particularly if you’re a designer.
12. Bootstrap Studio Create responsive websites using the Bootstrap framework. A desktop application that helps web developers and designers create responsive websites using the Bootstrap framework. The clean, intuitive interface and makes it easy for anyone to create a beautiful web page with drag and drop functionality. The platform itself is quite intuitive, and the rich collection of components allows you to tailor every little detail on your site. The company promises this tool will product beautiful HTML and CSS that is as good as hand-written code. We can get behind that!
1. Carrd Simple, responsive, one-page sites for pretty much anything. A free service for building and hosting simple, responsive, one-page websites for anything and everything. There are a bunch of other sites that help you build out one-pagers, but the biggest differentiator here is the simplicity and easy of use, while not compromising on your ability to create a functional and beautifully designed website.
2. Template Stash Curated collection of best free themes & website templates A curated collection of the best free website templates. Each one is evaluated based on: visual appeal, ease of customization, and functionality. You can search for what you’re looking for by category, keyword, and creator, which makes it easy to find exactly what you’re looking for. Bonus: There are also collections dedicated to specific design trends, like “material design” and “modern portfolio.”
3. Bubble Build a fully functional web app without any code. Without any code knowledge, this tool helps you build web and mobile applications. The intuitive drag and drop builder allows you to easily add page elements like: text, videos, maps, icons, images, buttons, and more. Everything is customizable, down to font colors, icons, and the visibility of various elements based on what’s going on in the app you design.
4. HTML to WordPress Convert HTML website to WordPress theme in seconds. This tool converts static HTML websites into WordPress. If you’re looking to switch your site over, this will help you automate a lot of the manual work. Just upload a website into the tool and after a few seconds, it’ll convert into a fully functional, premium quality WordPress theme—activated and installed. All of the designers and developers, rejoice!
5. Tilda Publishing Build beautiful websites and tell stories without any code. A website building platform geared toward content-oriented sites. There are over 170 pre-designed blocks that enable you to drag and drop your way toward a fully customizable website. All pages you create with this tool are built to look great across all devices, which is a nice thing to not have to worry about if you’re not a coder. This is a fantastic option for those looking to build blogs, lookbooks, event reports, and more.
6. XPRS Free website builder — making web design like Lego™. No code. If you’ve ever been frustrated with the process of building a website because it was too complicated, confusing, and/or expensive, this product will make it so much easier (and fun). Use a collection of premium web designs, reliable hosting, and a simple editing environment to get your next web project up in no time. What’s special about this tool is that you build your site with polydoms (smart content blocks), allowing for endless customization. It really is like playing with digital Legos™.
7. Grav Modern open source flat-file CMS to build faster websites. A more complex tool, built for developers with some experience. This open source flat-file CMS allows you to build faster websites. The idea: With static HTML pages, you can’t do anything dynamic like query data, edit content via an admin interface, process forms, etc. Grav is “processed at runtime,” allowing you to do the same things you could do with Drupal, Joomla, or WordPress. There are countless features, including: site-wide and per-page routing and redirection, a visual debug panel, multi-language support, flexible taxonomies, a built-in asset manager, and much more.
8. Pivot Drag and drop real-time HTML page building. This block-based, multi-purpose HTML 5 template allows you to choose from over 70 uniquely styled content blocks for incredible customizability. You can build web pages in minutes and manage site navigation, sliders, images, text, maps, color schemes, and more—all from your browser. Great for multiple uses, from a product launch to a personal portfolio website.
9. Hype 3.0 Create beautiful HTML5 web content, no coding required. This keyframe-based animation system makes your content come alive. Just click “record” and Hype watches your every move, automatically creating keyframes as needed. You can also add, remove, and rearrange keyframes manually if you want more control. This is an incredible tool if you’re looking to animate anything from web pages and infographics, to eBooks and presentations. Prepare to be wowed.
10.OnePager One page theme builder for WordPress. This open source theme builder allows you to quickly edit everything on your web page on the fly. It’s effortless to build out a fully responsive, SEO-friendly site with built-in presets to kickstart your site development. Just about everything is customizable, allowing you to tailor the look and feel of your site exactly the way you want it. A great tool for anyone looking to build a WordPress site quickly.
11. Webydo 2.0 Seamless web design platform for professionals, code-free. This product is geared toward empowering designers to create responsive websites using all of their designs even if they don’t have any coding experience. There are a number of similar tools on the market, but this one is built with design in mind. The integrated B2B solution also helps with direct client billing, a neat dashboard to manage countless sites/clients, and a robust CMS. Worth looking into, particularly if you’re a designer.
12. Bootstrap Studio Create responsive websites using the Bootstrap framework. A desktop application that helps web developers and designers create responsive websites using the Bootstrap framework. The clean, intuitive interface and makes it easy for anyone to create a beautiful web page with drag and drop functionality. The platform itself is quite intuitive, and the rich collection of components allows you to tailor every little detail on your site. The company promises this tool will product beautiful HTML and CSS that is as good as hand-written code. We can get behind that!
Comments
Post a Comment
Comment