
Download the full code files for the website we're building from the downloadable materials.
Learn how to build a multi-page website with a JavaScript focus, covering front-end and back-end basics, a form that sends emails via Node, and deploying the site live.
Set up your development environment by installing Node.js and npm, learn to use the terminal to verify installations, and leverage JavaScript packages to speed website development.
Create a Node.js server using Express, initialize a package.json, install Express, and write app.js routes to serve the homepage. Run locally on a port and prepare for cloud hosting.
Add an html page to your node.js project by installing express handlebars, configuring the views folder, and wiring the hbs view engine to render home.hbs with a basic html structure.
Create a public folder, configure express to serve static files, and link styles.css to the home view to apply a yellow background.
Learn a basic method to add an image to a website by placing a photo in the public folder under photos, then sample, then jpeg, and inserting an image div.
Learn to add custom fonts to a website by linking font files (Brandon Grotesque, Futura) via @font-face, organizing fonts in a fonts folder, and applying them with font-family in CSS.
Discover how to reuse content with express handlebars partials by creating a partials folder and a main.hbs, then include it in home.hbs with the partial syntax, confirming styling loads.
Learn to build a navigation bar with divs and anchor links, linking to home, and style it with CSS, including position fixed, top, z-index, and a subtle box shadow.
Create a sliding menu using HTML, CSS, and JavaScript by building the structure, styling, and interactive open and close functions with DOM methods and an overlay.
Create a footer partial with HTML links and a LinkedIn button, then style it with CSS and hover effects to produce a clean gray links footer.
Build the HTML for a contact page with a form featuring full name, email, subject, and a note text area, posting data to the back end and styling with CSS.
Create a projects.json data file as a local data store, populate multiple projects, and access it in Node.js by requiring the file and logging titles and banner photos.
Learn to render page-specific content by creating and including unique partials with express handlebars, using a helpers module to select the correct post, caption, or snapshot for each project page.
Build an about page using HTML and CSS, including header, headshot, and sections describing your work and skills like web development, JavaScript, Java, digital design, user experience design, and branding.
Learn to implement mobile styling with a CSS media query using max-width 600px to switch background colors from light green to light blue and place mobile rules at the bottom.
Set up Google Cloud to host your website by creating a project, enabling App Engine for a Node.js app, and initializing the Google Cloud SDK for deployment.
Use the gcloud terminal to initialize the sdk, create and switch configurations, choose your account and project, update components, and prepare to deploy your code to Google Cloud.
Modify and deploy a Node.js project to Google Cloud, configuring package.json, deploying with gcloud app deploy, and launching a live website hosted on Google Cloud Storage.
Celebrate finishing the course and launching your first website live online, and share your projects with family, friends, clients, and future employers to explore new opportunities.
Did you see the simple, clean portfolio website in the introduction video?
What if you knew how to code and design a website just like that one completely from scratch? Wouldn’t that be amazing?
That’s where I come in. I’m here to teach you HTML, CSS, JavaScript, and Node.js step-by-step so you can build that website and more.
What if you want to build a completely different website - maybe for a client or a personal venture? No problem! This course will teach you the skills to build clean, simple websites at the drop of a hat and host them online.
I studied computer science at university, learning to code countless algorithms and data structures, which is extremely intellectually rigorous, and I can still say learning to build and launch a website in less than a few hours is the single most empowering skill that I’ve learned as a developer.
In order to become an empowered web developer who is capable of building websites in the future, these are the skills this course will help you master:
Setting up your computer to code
Setting up a website project with a front-end that users will see and a back-end for processing data
HTML fundamentals
CSS fundamentals
JavaScript fundamentals
Styling for desktop, mobile, and varying screen sizes
Launching your website live online through Google Cloud hosting (one the most professional ways to host your website files online)
Adding images
Adding unique fonts
Adding icons
Building a sliding menu
CSS animations for added design
Input forms for collecting user input data
Sending data from the back-end to the front-end as JSON
Working with Node.js packages (very valuable skill)
Building re-usable components, so you don’t retype the same code more than once (good developer practices)
JavaScript functions
All the skills necessary to interpret your learning and build your own websites
Are you ready to begin or do you want to know more? If you need more reasons to learn to build websites, then read on…
Why should you learn HTML, CSS, and JavaScript?
Building websites allows you to do creative work from anywhere in the world, and with improvements in skill, it can become a lucrative career. HTML, CSS, and JavaScript are the most practical and modern languages to begin learning if you want to become a web developer.
This course will take you from knowing nothing about computer science to building and launching your very own website in under 6 hours. After seven years of coding, I designed a course that I think is the most useful, practical, and simple introduction to learning how to code.
2) Why should you choose this course?
Reason #1: You’ll learn by building a portfolio website
I believe the best way to learn is by doing. This course teaches the essential web development languages of HTML, CSS, JavaScript, and Node.js by having you build a highly practical project - a portfolio website.
By the end of the course, you’ll have a live portfolio website where you can showcase your own work as a web developer, designer, photographer, product manager, painter, or any other theme you can think of! You can change the fonts and text to fit your personal style and have something tangible to show to the world.
Reason #2: I’m the right teacher for you
I struggled A LOT when I was learning to code. I am not the smartest person on Earth. For that reason, I explain things simply and carefully. I am good at explaining things in a way that anyone can understand. Coding is hard! Debugging (solving errors in your code) can be frustrating and take tons of hours of Googling! I empathize with my students because I was there once too, learning to code just like you.
I have a Bachelors degree from Brown University in Computer Science and Visual Art. I’ve worked as a software engineer and as a user experience designer for over seven years.
Learning to easily build websites has been one of the biggest breakthroughs I’ve made as a developer, so I want to share that knowledge in an accessible format with new developers.
3) This course is for you if…
… you’re a complete beginner and you want to learn to build websites
… you already checked out some free resources online on HTML and CSS, but you’re struggling to build a full website with best practices and launch it live
… you are a designer who wants to expand your skills into HTML, CSS, JavaScript, and Node.js
… you are a professional who is tired of Squarespace, Wix, and other web builder tools and want to easily and simply build a website yourself from scratch
… you’re an an aspiring software engineer and you want to take a course that will be a great introduction to coding