Setup
Tonight we will learn front-end architecture and HTML.
Follow the instructions on this page to prepare your workspace.
Open Slack to the #codingandcocktails channel. It's a great way to stay in touch with your Coding & Cocktails girlfriends and to ask questions during and after the session. We'll also post updates and tips in Slack if we run in to any stumbling blocks tonight.
If you are borrowing a laptop, please ask your mentor to explain the tools.
If you are using a Chromebook, having trouble installing tools, or otherwise need to use a Cloud IDE option, we will use a cloud development environment called CodeSandbox. In order to use CodeSandbox, you will need a GitHub account.
Navigate to GitHub to create a personal account or log in. Feel free to ask your mentor for help! When complete and logged in to GitHub, return here to continue the instructions. You won't install any tools listed on this page, but please read through them so you have context for tonight's worksheet.
Required tools for this session
You don't need all the tools for tonight's session. If you haven't installed all the tools listed in The Tools guide already, use the following list to install only the required tools for the worksheet:
If you are borrowing a laptop, your tools are pre-installed. Please ask your mentor to explain the tools we are using tonight.
Create a folder for tonight's work
Create a folder named "session1" in your "CodingAndCocktails" folder by following the steps below.
Open a file explorer and navigate to your home directory.
Your home directory is typically
/users/<your user name>on a Mac orC:/Users/<your user name>on a Windows machine.Windows users- You can navigate to your home directory by typing
%USERPROFILE%in the file location bar of File Explorer and pressingEnter.Find and navigate into the "CodingAndCocktails" folder you created as part of your tools setup.
Create a folder named "session1".
Leave the file explorer open. You'll use it in the next section of the worksheet.
Helpful tips as you work through the worksheet
View the worksheet and your IDE in split screen.
For Windows users, use windows key + left arrow or windows + right arrow to resize the application and position to the left or right half of your screen.
For Mac users, hold down the full-screen button in the upper-left corner of a window to shrink and position to the left or right side of the screen. Release the button, then click another window to begin using both windows side by side.
Mentors are happy to help!
Did you know you can collapse the table of contents for worksheets?
Click on the hamburger menu () at the top of the page to toggle the table of contents. You can also use the keyboard shortcut s.
Did you know you can customize font size and color of the worksheets to make it easier for you to see?
Click on the font menu () at the top of the page to open a menu where you can make your font larger or smaller or change background color.
Did you know you can perform common tasks such as copy and paste and navigate VS Code using keyboard shortcuts?
When working without a mouse, keyboard shortcuts will be faster than a trackpad. Open the handy dandy keyboard shortcut reference in a new tab so you can refer to it easily!