How to start with WEB?
Are you fascinated by the power of WEB? Do you often desire to do wonders through such development? This article is about the basics of “How to start with Front End Web Development and resources to enhance the same.”
We often see beautiful websites being developed and tend to get attracted towards it, but did you ever think of the most important thing?
Rudiment Phase of learning any tech is the most important!
The upcoming content isn’t from any other similar page or some big google searches. This is my journey, how I blended myself into Web Development, and how others can get on the right track to do so!
I would divide this journey of being web developer in small tasks:
- The very first task should be to take any sort of tutorials or courses and take the most out of it. (Courses along with project / practice development are recommended).
- Your certificate earned isn’t only to get uploaded on LinkedIn, so take new tasks weekly to practice the skills you have learned.
- Finally, when you feel confident, either do an internship to solve real world problems or take projects as a freelancer.
The above tasks seem very naive when read, but each in it has their part of complexity.
Sometimes, it happens that even after taking online courses or developing one website you don’t get that level of confidence which was expected.
So, below is my approach to such situations!
- Make sure your HTML, CSS, JavaScript basics are clear. (Clear in the sense, you can simply interpret meaning and syntax of code.)
- Try replicating templates available online to test and implement your understanding. Eg. w3schools templates.
- Explore frameworks such as Bootstrap, Bulma,etc to enhance your development.
- Level up your learning by JQuery and JQueryUI.
- Make use of plugins like Owl Carousel, Swiper, Animate, Wow, Particles, etc. This will make your website much more better during the phase of Beginner.
- Use a lot of Google DevTools, because this is going to help you incline each granular details of your website.
- Use Google extensions related to web development to help you reach the gap between hand made design and digital design.
Links to useful Resources :
- Sometimes, one would wish to trial and check various fonts on a webpage and decide one. Google Font Previewer for Chrome extension allows one to change font on any local or live web page by which suitable font can be finalized.
- Sometimes, one would desire to measure the gaps between components, or space left for margins while developing or replicating a web page, Page Ruler Redux acts as a ruler for it.
- Sometimes, one would like to retrieve colours from random web pages. ColorZilla acts as a colour picker.
- Many times, selecting the correct colour combination becomes a tedious job. Coolors can help generate colour palettes at a click.
- Choosing fonts becomes easy if all are visible with preview at the same time. Google Fonts gets this task done.
- Many times, the need to convert colour codes from hex to rgb will arrive. Use WebFx Hex-to-Rgb to convert them with preview.
- Images play a very important role in web pages. Unsplash, Pixabay, etc can be used for stunning quality pictures.
- Icons too, play an important role in web pages. Use Flaticon, Font Awesome for cool icons.
- At times, large images result in slowing down of web pages. Compress images at TinyPNG.
The best thing about all these resources is, they are super free to use!
This was the overall blend of tips, tasks and references of resources for beginners to enhance Web Designing.
Declaring this article with a quote by Milton Glaser!
There are three responses to a piece of design — YES, NO and WOW!
Wow is the one to aim for.
