How To Learn Web Development 🖥️

Web development is often one of the most rewarding roles in a software engineering company. Being able to instantly see your changes develop into a fully fledged website is not only fun but very satisfying. This blog will walk you through several basic steps on how to learn web development (and build your own websites!)

Learn how to create designs#

No matter how prepared you think you are when diving into a new web dev project, it is always good practice to start with a design file, such as on Figma. Creating a design allows you to see what the final product SHOULD look like and also enables you to give your client an idea of what you're going to create. This preview allows the client to send feedback and make adjustments before you are already deep into something that the client doesn't want, saving you a lot of time.

• 7 key principles of designing visually appealing websites
• 9 Principles of Good Web Design
• 10 Highly Effective Web Design Tips Backed by Research

Learn HTML/CSS#

HTML and CSS are the backbones of ALL websites. Even though in a larger company you probably won't be directly writing HTML and CSS, knowing the foundation allows you to learn frameworks such as React.js and Next.js faster!

Learn JavaScript#

JavaScript is what makes your websites dynamic and respond to user inputs. For now, just learn vanilla javascript and the DOM API and how to interact with it. This will build your foundation later on when you try to learn various frameworks such as React and Next.js

Create your first website!#

This could be ANYTHING! If you want to create a prank website that yells at you for clicking the mouse, go for it. However, make sure to utilize all the materials that you've learned up to this point: first, create a design and show it to someone else to see what they like/dislike about it, and make changes accordingly. Once the design is made, then go ahead and code it out!

Learn Bootstrap or another CSS framework#

Most websites nowadays use CSS that someone else has already written, so being able to incorporate Bootstrap into your plain HTML and CSS sites is good practice. This course was amazing for me when I was learning Bootstrap.

Learn React#

This was one of the biggest hurdles for me. Learning what state is and how to use it effectively in a web app is always challenging. However, I've found several courses that I really liked when I was learning React.

• freeCodeCamp
• Coursera

Learn Next.js#

Next.js is a "wrapper" around React that allows for dynamic page creation and routing. I learned about Next.js by building the Bit Project website! Feel free to explore the Next.js docs.

Start looking for an internship/job#

The best way to become an expert at website creation is PRACTICE. Keep building websites and you'll soon learn techniques that can only be acquired through repetition. Reach out to local nonprofits, software engineering companies, and even small businesses and offer them to create a website!