Skip to main content

Preface

We Are Web Development at Berkeley

This course was originally created as the internal education intiative of Web Development at Berkeley. WDB is our parent organization and plays an integral role in facilitating this course. You can learn more here

Why Full-Stack Web Development?

The goal of this course is to equip you with the necessary knowledge and experience to confindently build good websites. One of the fundamental questions that this course aims to answer is "What makes a good website." Just like any Berkeley course, we will not only equip you with the tools that you need to succeed in web development, but also try to convey the design mindset. With a fuller understanding of what makes a good website, we hope that you can unlock your potential to build the next generation of websites.

Our Advice

Learning a new skill set, whether you're a seasoned developer or an interested beginner, is daunting. Web development, with its overly specific tools and often esoteric rules, even having years of programming experience may not make learning web development any easier. This is going to be a long journey, but by the end of our curriculum, you'll have a solid grasp of web development and the design principles that underpin the modern Internet. Our goal is to make better web developers, not necessarily software engineers. Whatever your interests, an effective website is an necessary part of the modern workflow.

Much of the time, you will sink hours into debugging, searching hopelessly for the answer that is not easily found. If you ever feel out of place, or that you may not be up to the challenge, I can assure you that you are not alone. We were all there once. Every programmer in their learning journey has had moments where they've wondered if they were cut out for the job. However, what separates the sucessful from the unsuccessful were those that stuck with it and didn't let those thoughts stop them from achieving their goals.

Content Structure

We've structured this course to make web development as intuitive as possible.

  1. Fundamentals: We begin by teaching the basics: HTML, CSS, and Javascript. These three form the fundamental building blocks of the Internet.

  2. Frontend: We proceed by showing you how to build a frontend with React. React is a powerful library for structuring and customizing your frontend, and is the natural and widely adopted sucessor to the traditional HTML, CSS, JavaScript paradigm.

  3. Backend: Once you've learned the frontend, we continue on to the backend. The backend defines the functionality of your website. In this course, we use Node to demonstrate how properly designed and efficient backends can be both powerful and flexible.

  4. Fullstack: As we go through the backend, we will discover the various important components of the backend. The most important of these is the server, for which we use Node, and the database, for which we use MongoDB. Understanding the tradeoffs between different backend technologies is a critical part of the design process and a necessary skill for a software engineer.

  5. UI/UX: Finally, we'll traverse back to the top of the stack to learn UI/UX principles. UI/UX stands for User Interface and User Experience respectively and we use UI/UX principle to design our frontends. You can roughly think of the UI as what you see on a website and the UX is how you interact with it. Both are necessary to make your website intuitive and attractive to the user.

With all of that, you have all of the necessary tools to build full-stack websites.

Evolution of the Web

Web 1.0

Web 1.0, also referred to as Syntactic web or read-only web was the first stage of the Internet. The role of the user was static, meaning that the user only consumed information provided to them in the form of HTML and CSS.

This was before the widespread use of JavaScript (which was created in 1995). JavaScript is what enables much of the interactivity on a website, and without it, users couldn't actually interact.

Today, Web1.0 platforms are still common. Portfolio sites for example, can be completely static HTML and CSS pages with no interaction.

Web 2.0

As JavaScript became more widespread developers quickly moved to add interaction to websites. Thus, Web2.0, also known as the Social Web or Read-Write Web, was created.

In Web2.0, users can produce content and interact with websites more deeply than ever before. Today, most websites like Amazon, Twitter, ore ven this one are Web2.0 websites, and thus, Web2.0 defines much of the way that we use the modern Internet.

Web 3.0

For this course, Web3.0 is fairly out of scope, but essentially, Web3.0 is the Semantic Web or the Read-Write-Execute Web and it is most commonly associated with blockchain technologies. Feel free to read more here

Additional Resources

In addition to this course, there are a rich variety of other sources out there that you can learn from. Hearing or seeing an alternative view is often one of the best ways to understand the content that is hard to grasp the first time. You will find that a majority of the content in this course falls into that category.

  • MDN: The MDN Web Documentation is an open-source, comprehensive set of documentation covering HTML, CSS, and JavaScript, and most of the Internet essentials. We highly recommended MDN as an in-depth complement to this text.
  • CSS Tricks: CSS Tricks is a great resource for interactive and hands-on tutorials and articles about classic issues in basic decelopment.
  • Frontend Masters: Has excellent video tutorials and content, and can provide an alternative view on many of the topics we cover. They also put out an excellent book each year called the Frontend Handbook.
  • Documentation: Always reemember to look at the documentation of the technology you are using. The documentation will always provide the most direct and thorough answer to your questions.

Contributors