Useful Resources To Learn Web Development & To Create Your Website
Tags: webdev, codenewbie, javascript, beginners
Published: 2021-04-16 17:16:45

![Coding is FUN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qh0da0ov3tw3tniylnkz.gif)

# Introduction

Learning web development is like learning to drive a car. No matter how much you do not enjoy it, learning these skills sometimes can help you a lot and can even act as a great skill to put on your resume.

It's been over 3 years since I last touched anything related to HTML, CSS or any Javascript front-end framework but recently I happen to come across all of them at once.

I needed to create some landing pages, custom logos and mockups.

So I decided to go through all these technologies once again and during that process I **found several interesting resources that helped me and will be useful for you as well** 😃

I am sure if you're someone who is just starting out (or even if you are at intermediate level), these resources can come pretty handy 🔽

# Learning Javascript 💻

Because I previously have experience working on Javascript, therefore I didn't spend much time revising my old concepts.

Still during the process, I found these two amazing github repositories to refresh your JS concepts 👇

### [33 Javascript Concepts](https://github.com/leonardomso/33-js-concepts)

{% github leonardomso/33-js-concepts no-readme %}

This is an amazing repository for you to master your JavaScript concepts.

From basic topics like Call Stack, Primitive types to Message Queue & event loop to concepts like async/await, High Order Funtions and Clean Code conepts, this repo contains everything you need.

> *It is even considered by GitHub as one of the top open source projects of 2018*

### [Web security basics](https://github.com/vasanthk/web-security-basics)

{% github vasanthk/web-security-basics no-readme %}

This is for a quick review of basic web security concepts. It covers following topics:

*   SSL/TLS
*   CORS (Cross-Origin Resource Sharing)
*   Cross-site Scripting attack
*   CSRF (Cross-Site Request Forgery)
*   Access and Refresh Tokens

# Learning CSS 🖥

Honestly, the reason why I don't enjoy web development is because I suck at CSS.

So, the first thing I did this time was to look for online resources to start learning and practicing my CSS skills from scratch.

Here are the 3 courses that turned out to be really helpful 👇

* [![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug8u908k9oqwjhj8lv1t.png)](https://css-tricks.com/)
 

* [![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yws96ps1fvoncukreqq0.png)](https://codecollege.ca/p/css3-coding-challenge?affcode=1078_mvbrzys0)
 

* [![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3mewopqvz3thol3kmu7.png)](https://www.freecodecamp.org/news/tag/css/)
 

# Learning HTML 💻

Although for my project, I didn't go back to learn HTML but just for the sake of this blog post, I found this FreeCodeCamp's video on youtube that I feel gives a very nice introduction to learn the basics of HTML5.

{% youtube pQN-pnXPaVg %}

⭐️ It covers following topics -

*   Basic Tags
*   Comments
*   Style & Color
*   Formatting a Page
*   Links
*   Images
*   Videos & Youtube iFrames
*   Lists
*   Tables
*   Divs & Spans
*   Input & Forms
*   Frames
*   Meta Tags

# E-Book 📖

### [HTML To React: The Ultimate Guide](https://gumroad.com/a/316675187/dvfyN)

I am a huge fan of books (both eBooks and Paperbacks) and I found out this amazing course of gumroad.

This ebook is a comprehensive guide that teaches you **everything you need to know to be a web developer through a ton of easy-to-understand examples and proven roadmaps**

It contains 👇

✅  Straight to the point explanations

✅  Simple code examples

✅  50+ Interesting project ideas

✅  3 Checklists of secret resources

✅  A Bonus Interview prep

You can even check out [a free sample from this book](https://drive.google.com/drive/u/0/folders/1GJECqmBUbOwgg5eQvGlMwHcDShqxKISJ)

and here's the [link](https://gumroad.com/a/316675187/dvfyN) to the complete book, if you want to buy it for yourself 👇
[![Html.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618289289910/D--w2qaO3h.png)](https://gumroad.com/a/316675187/dvfyN)

> UPDATE: If you can't afford to pay for this book, DM me on [twitter](https://twitter.com/apoorv__tyagi). I might have a limited time discount offer for you :)

# Create Professional Mockups 🌟

If you want to create mockups of your application, `Shotsnapp` will help you create beautiful device images for your app or website designs:

* [![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u5nsjbe1ima5zkx0jnn.png)](https://shotsnapp.com/)
 
> Checkout [Screely.com](https://www.screely.com/) as an alternative for Shotsnapp.

# Icons and Logos ➿

If you're looking to add icons and logos then here are some good websites that offer well optimized, most popular icons and logo sets -

* [![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9uoc4mj8200n3fmh7qo.png)](https://uxwing.com/)
 
* [![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyjx7n22wmgz6tw8ef8w.png)](https://www.iconfinder.com/)

* [![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx24oybsfd1yciym2v58.png)](https://logosear.ch/search.html)
 

# Conclusion

This blog post was a brief guide for Web Developers. You can share it with your friends who want to start their careers as a Web Developers, too.

There are plethora of both free and paid online web development courses and  hopefully one of the above resource can help you to get started or to improve your skills.

In case I missed any awesome web development resource or tool, Let me know in the comments below!

Thanks for reading :)

***

**Enjoyed what you read?** 

You can show some love by buying me a coffee☕

<a href="https://www.buymeacoffee.com/apoorvtyagi" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>