Walking through logical flow from first task, write out the top-level functions necessary to get this done. Don't worry about details or specific properties/methods, just finish the prompt, "Okay, then I'll need a function to do ___" for every step. In the end, you'll have a skeleton to flesh out in the next steps.

Footer too tall on iPhone 11, covers down arrow on home tab and menu tab links.

Could be solved by splitting address and phone number left and right, instead of 2 lines, but I get the feeling that it won't fit horizontally.

A better solution might be to replace it with a "contact us" button that takes you to an "about us" tab (which will have to be added). Added bonus: embedding Gmaps would look good.

Problem-solving time!

Iterate over the pseudo outline, getting more specific with each pass.

If you don't know how to solve a specific challenge, mark it for the next pass or get to googling, but DO NOT skip things without making a note. That leaves unpleasant surprises for later.

This step should take a while, since it's actually several rolled into one. It ends when you run out of abstract ways to describe the steps and the pseudo is half JS anyway.

Lessons from past projects:

• Event delegation can solve issues with dynamically created elements like buttons
• Template literals are great for element.innerHTML; you don't have to create and append so many things.

• Grab real logo and replace the current "AE"

• npm install webpack webpack-cli --save-dev && touch webpack.config.js
• Paste in config:

const path = require("path");

module.exports = {
	mode: "development",
	entry: "./src/index.js",
	output: {
		filename: "main.js",
		path: path.resolve(__dirname, "dist"),
	},
};

• Add to scripts section of package.json:

"build": "webpack",
"watch": "webpack --watch"

• Refer to the Webpack Guides for additional features.

No more than is necessary to capture main elements from the hand-drawn UI.
Do not get fancy yet!!!

Since I'm recreating Asset's website, I'm skipping this step

The logo, reservations link, and arrow aren't well positioned anymore. Probably because devtools mobile height and actual iPhone height are different. Will need to test on more devices/screens.

Arguably the easiest part. If you've iterated enough in the last step, this should be mostly changing syntax to turn pseudo into JS - putting brackets in the right spots, etc.

Pseudo modules:

• index
• home
• sidebar
• menu
• events
• sign-up form modal

User story:
As a < type of user >, I want < some goal > so that < some reason >

Logical flow:
A few sentences on general functionality and the steps necessary to do all those things.

Go back thru Asset Management and Output Management guides on Webpack so that only the dynamically created index.html and main.js are the only things in dist/.

• Create new branch
• CSS loaded
• Fonts loaded
• HTML created
• dist/ cleaned

Black / white only, basically just do the borders and minimally acceptable spacing to make it look like the hand-drawn UI.

Don't get fancy, and DO NOT make any big design decisions yet!!