Build A Website - Using HTML, CSS, JavaScript, and Node.js

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.

Render the home page by using res.render with home.hbs from the views folder in Node.js, displaying the message 'Hello, welcome to the home page'.

Launch your website live now by building a page with HTML and a Node.js back end, and host it on Google Cloud at any point.

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.

Learn to add Font Awesome icons to a website by linking a stylesheet and using the i tag with Font Awesome classes for a hamburger menu and hover effects.

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.

Learn how to add a CSS animation, specifically a typewriter effect, to a project by updating HTML structure, applying styles, and configuring keyframes and animation delays.

Apply one CSS animation change at a time, ensuring 100% accuracy and avoiding typos or spacing mistakes to master debugging.

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.

Explore how JSON data travels from the front end to the back end, using a Node.js example with body-parser to read post data from a contact form.

Discover how to hide sensitive credentials in a Node.js email form by using a .env file and a .gitignore, and safely integrate Node Mailer with Gmail.

Learn to send emails with Node Mailer in a JavaScript app by reading form data, building mail options, and sending via a transporter.

Debug and diagnose an email feature in a website built with HTML, CSS, JavaScript, and Node.js, including testing with a new email and updating code on localhost.

Fix and test email functionality in a node mailer setup by adjusting transporter placement and correcting password to pass, then verify full name, email, subject, and message fields.

Update the contact page to handle the email response from the back end to the front end and show a thank-you message using a submitted variable.

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.

Create a work page by routing requests, pass JSON projects through handlebars, render project cards with cover photos and overlays, and style interactive category filters.

Learn to filter portfolio projects by category with a JavaScript function that toggles div visibility using display: none and inline-block to show all, creative, or web items.

Create a reusable project page by using a dynamic route with project ID to render the JSON data for each project's title, category, and deliverables.

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.

Explore how to fill unique content into separate partials with helpers in a Node.js and Handlebars setup, wiring views and partials to render distinct pages with tailored styles and media.

Learn how to add an about page route in Express by defining app.get('/about', ...) and rendering the about view.

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.

Upload the Google Cloud Node.js sample project to App Engine with gcloud app deploy, then view the hello world endpoint and learn to host your own files.

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.