Early personal website concepts recap and walkthrough

Things to get clear on

• What are all the key things that really matter to know?
• Which things are foundational and will come back to bite you if you take for granted?
• Which things can you learn as you’re going?
• Let’s note all the main concepts as we go

Not in the cloud! Well… not in the Google or Apple or Teams types of cloud, OK? Your files need to be stored in a non cloud-synced place – and bigger picture, it’s importnat you know how to tell what’s synced and what isn’t and where your files are and why – and have confidence in how that stuff works. It’s YOUR computer. Make sure you don’t let it be a mystery (at least for these parts).

(If you already are 100% sure you’ve got your files system stuff down – and totally know which areas of your computer are cloud-synced and which aren’t – then you can skip this one)

Things to get clear on

• The computer! The finder is the main application that lets you interact with the file system (graphical interface)
• You can also interact with the file system through the terminal/command-line interface (textual interface)
• New computers/operating systems will often opt you in to syncing your files to the cloud
• That’s great. “The cloud” is great – and can save your files like Photos, Docs, and application-specific files like Affinity Designer
• Can you tell which folder/files are synced and which aren’t? Do you know how to turn it on and off?
• You might have some files synced with Google Drive or iCloud — but for your main website code, we do NOT want those synced to those clouds
• It’s important you know which folders are synced and which aren’t and why
• We save our code files in a different way than our other files – so, ensure that your code files are in folders that are not synced to iCloud or Google Drive. Ask for help if you’re tangled up. It can be very confusing! (it’s the OS’s fault – not yours)
• Drawing a picture might help

There no real reason you can’t have a simple (effective) website that strangers can look at – at all times. It just comes down to keeping it simple – but complete.

Things to get clear on

• File paths! They are important at the computer/os/finder level – so, don’t take if for granted (because it’ll apply to all the things we do going forward)
• You can navigate the files in terminal or the Finder.
• The Path Bar will show you the file path in the Finder (turn it on! reference it often!)
• You’re not going to be writing out the core HTML document structure every day… and we’re not saying you need to memorize everything — but maybe memorizing (and telling yourself a story about) the basic HTML document structure – would be good practice. It’ll feel nice to know it. It’s worth a shot!
• Organizing your window (and often different sets of windows in various virtual screens) is worth your time. Make it easy on yourself.
• We HIGHLY suggest you use Divvy to organize your windows quickly. The more you have to drag windows around and click things, the more you allow your brain to get distracted and lose focus (and the more time it takes to refocus). Do it! It’ll be worth it, we promise.
• Take ownership of your decisions when you’re deciding how to name your code files and how to organize them. Just because Derek organizes it a certain way – doesn’t mean the goal is to memorize that. You want to know what you’re doing and why.
• How do you view the site in your browser?
• What exactly happens when you make a request to a URL?
• Do you know how to connect a style sheet?
• How simple can a site be – and still be useful?
• Once you have your site in a place where you’re ready to save it — Do you know how to create a Git repo?
• Can you explain what “Git” (version control) is for and how it works?
• Can you save your work? There are many fancy things you could learn about Git – but right now, we really just need to know how to save your progress as you go.

One page really can do the job in many cases. But you’ll likely want to tell a bigger story – and have specific places to send people directly to.

Things to get clear on

• How do you make hyperlinks? What are the pieces that make them up?
• How do you know how to choose the right file path for links?
• What happens when you click a link?
• If your text editor has a bunch of annoying autocomplete things popping up… it’s worth turning those types of things off so they aren’t distracting visually – and you don’t rely on them.
• Do you know how to make lists (unordered and ordered) and how they’re different?
• You can split your text editor to make it easier to read (but it depends on what that means for you)
• Try and get used to “find anything” (like spotlight for your text editor) command + P
• User interface components (hypermedia controls) (links) are better off staying in consistent places instead of being in different places on each page because they confuse users
• At some point — you’ll have a lot of repeated code across the different pages (like menu links and header boilerplate) – so, what are the options you have to made things more modular? How could you break up these pieces of HTML to reuse them in many places?
• How do you know when it’s time to commit your changes to Git/version control?

More coming soon!