Getting Started in Web Dev

These are the top items to look in to if you are interested in getting started in Web Development (mostly front-end).

This page is meant to be a resource of the most common things I end up linking to people as they are learning web dev. It should be short so it doesn’t overwhelm people.

Mandatory Knowledge

  1. 2022 Web Dev Getting Started/Career Guide Video – MANDATORY WATCHING
  2. MarkSheet – HTML/CSS/Sass
  3. JSFiddle – Use this when you are having trouble getting code to work and need help from someone
  4. CodePen – Create an account. Use this for stuff you want to keep track of, or to search for existing examples.
  5. Free Code Camp – Bootstrap, JS, and more
  6. Can I Use – Tells you what browser support specific web features have.
  7. Learn Chrome Dev Tools – Basically the same for other browsers as well.
  8. Why learning to code is so damn hard – important write up

JavaScript Books

  1. JavaScript: The Good Parts – Book. Pay for it on Amazon, pirate it, or just get it from your local library.
  2. You Don’t Know JS – Free online book
  3. Eloquent JavaScript – Free online book
  4. ExploringJS – Several free online books that stick close to the ES spec
  5. – Online JS resource, little easier to read than MDN

Getting Started with Vue.js

  1. Open, then follow the official Getting Started guide.
  2. Vue Mastery (Intro to Vue is free, advanced classes are not, but they have free weekends occasionally you can look out for)
  3. Anything from Maximilian Schwarzmüller is good:
  4. Sarah Drasner is one of the core members of the Vue team, she has a decent course on Intro to Vue, and is an expert in web animation.
  5. – Like JSFiddle but for large webpack based projects.

CSS Fun Time

  1. MarkSheet – HTML/CSS/Sass
  2. CSS Fundementals – Conference Talk from Bootstrap creator
  3. CSS Layout Basics – CSS Tutorial
  4. CSS Sushi – CSS Selector game
  5. Flexbox Game – Interactive CSS Flexbox Tutorial
  6. Flexbox Froggies – CSS Flexbox Game
  7. Flexbox Tower Defence – CSS Flexbox Game
  8. CSS Grid Garden – CSS Grids Game
  9. Grid By Example – CSS Grids Video Tutorials
  10. WTF HTML & CSS – Common issues people run into with HTML/CSS and their solutions

Photo credit:

Source link

Resources to practice web development

Excellence is not an art. It is the habit of practice — Aristotle

Best way to be good at any piece of tech is to practice it. In order to practice the tech , you need challenges , ideas for side projects. In this blog post , I have compiled a list of sites which provides more challenges and ideas for us to practice web development.

Doing more side projects is one way of avoiding tutorial hell.

Let’s dive in.

Front end mentor


Front end mentor has set of challenges to level up your HTML, CSS and Javascript skills . It is one of the best resource which provides design assets and project ideas to build.

Once you are done with project , you can submit and get feedback for your project, also you can review other developer’s work.

You can also join front-end mentor’s slack community to brainstorm and chat with other developers

Challenges can be filtered based on difficulty level and also based on HTML,CSS, JS and API.

From Front end mentor

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 247,155 developers building projects, reviewing code, and helping each other get better.



Freecodecamp is one of the best web dev resource which has 100’s of tutorials and tons of challenges to complete. Once completed , you can test your skills by completing the challenges and once done you will be awarded certification.



Codewell offers real world Figma templates that you can use to improve and level up your HTML, CSS, and Javascript skills. You can even share your solutions and receive feedback on either the website or on the growing Slack community


Another useful resource which provides you with challenges where you can web development, mobile app development, web scraping and also your programming skills.

By Code mentor

Improve your programming skills by working on real-world projects. Join our free community to discuss projects, review code, and learn from peers and mentors.

Daily UI


Once you sign up to daily ui’s newsletter, challenges starts and you will get design challenges each day. once done you can post them in dribble or behance , so that other
designers can give feedback for your designs.

By Daily UI
Daily UI is a series of daily Design ChallengesInspiration and Surprise Rewards!


Useful resource to practice front-end , back-end and full-stack knowledge by building web applications.

CSS Battle


This is one of the fun resource where you can use your CSS skills to battle with other fellow developers.

The battles on there aren’t necessarily going to tell you how to create web layouts, but they will definitely help you tackle some of the intermediate CSS properties.

Codepen Challenges


Each week, you’ll get a new prompt surrounding a monthly theme to work on. The best Pens get picked and featured on the homepage!


image.png lets you create solutions to their challenge right in the browser and compare them with the community.



Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution


That’s pretty much it. Thank you for taking the time to read the blog post. If you found the post useful , add ❤️ to it and let me know if I have missed something in the comments section. Feedback on the blog are most welcome.

Let’s connect on twitter : (

Source link

How I keep up with the latest Front-End Development news, without scrolling my life away

There are very few things I missed when I quit spending time on Twitter, but one of them was keeping up with the latest news and links from the JavaScript/Front-End world.

Thankfully, I found the answer to staying up to date on the latest without having to scroll my life away: email newsletters.

There are multiple really great newsletters that round up all the posts and library news for the week and create a convenient list for you.

Here’s my workflow: I open the email, scan the list, save the links that look interesting to me in my Instapaper, and delete the email. Later, when I have time to read, I go ahead and read the saved articles in Instapaper.

I find this the most efficient way to stay on top of what’s happening in the community without having to expose myself to threads of dev thinkbois fighting about who’s opinion is more problematic.

Here is a list of the newsletters I am subscribed to at the moment:

Source link