Prework Study Guide
✨ Open the Console to See What's Happening ✨
HTML
- The head element contains information about the webpage.
- The body element represents the visible content shown to the user.
- There should only be one "h1" element per page so continue using "h2, h3, h4, h5, h6" as headings.
- Include your meta tags within your header.
- The 'Main' tag will include the main elements of your content. Always have semantic tags for accessibility.
CSS
- There are three ways to style a webpage using CSS. You can style it using inline CSS, internal CSS style sheet, and external CSS style sheet.
- Seperation of Concerns is a widely used term in web development and refers to separating code into different files based on use. It is one of the key design principles that we practice in the boot camp. Separation of concerns is based on the idea that each section of code should have its own responsibility.
- Using (*) as a selector is a special wild card symbol that applies changes/rules to all the elements visible on the page.
- You can combine two selectors into a single CSS rule with a comma, allowing the declarations to affect both selectors. This helps us write Do Not Repeat Yourself (DRY) code.
- A margin indicates how much space we want around the outside of an element.
- A padding indicates how much space we want around the content inside an element.
- Be sure to use flexbox to assist with a responsive webpage. Resource link: flexbox
Git
- git status: checks what branch we are currently on
- git checkout -b branch-name: creates a new branch and switches to it
- pwd in bash will show you what files are in the directory.
- cd will move you backwards to your previous directory.
- cd file name will help navigate you further into a folder within the directory.
- git checkout branch-name will move you to that branch.
- git status will let you know what branch you are currently in (always good to double check).
- git add -A once on the branch you want use this in your command line to stage your changes. (Beginning of workflow.)
- git commit -m "added code to HTML file", will commit your staged changes to your repository (-m associates a message with our commit. Messages should be short descriptive messages of the changes implemented.) Once completed, our git repository is now up to date with our working directory.
- git pull origin main, will sync our local branch with the remote branch in GitHub. This is very important in a team enviornment in case a team member has added a new feature to the project. Use this command to pull in the base branch. You should see (Already up to date) upon completing these steps.
- git push origin feature/branch-name, will push all of our changes. Now go to GitHub and execute pull request. (Remember to check the branches your are merging.)
- git checkout main & then use git pull origin main, to update our local repository with the new merged-in feature. (After this you can clear out the GitHub issue.) (End of workflow).
JavaScript
- Variable is simply a named container that allows us to store data in our code.
- Var is used to declare a variable. After the Var keyword, we give the variable a name. This name must be unique because it is how you refrence the information stored in the variable in our code.
- Finally, we use an assignment operator "=" to assign the specific data that we want stored in our variable.
- This is expressed in JavaScript as Var shape = "circle";
- "Shape" is the name of the container or variable, while "circle" is the data it stores.
- Another example is var topics = "HTML, CSS, Git, JavaScript";
- Topics contains a string that includes all of the topics that we have studied in our prework module.
- To access the string "HTML, CSS, Git, JavaScript", we can refer to the variable name "topics" using console.log(topics);
- The word console refers to a test environment that developers use to check out their code. The second part .log() is a method, which means a set of instructions that can be executed by a computer.
- Put all together your code should look like var topics = "HTML, CSS, Git, JavaScript"; console.log(topics);
- Array is a single variable that is used to hold a group of data. Arrays are typically used to hold data that is related in some way.
- Additionally, you can use for Loops and Arrays that tie all of this together to process code automatically using var shapes = ["triangle", "square", "pentagon", "circle"]; for(var x = 0; x < shapes.length; x++) { console.log(shapes[x}); }
- A function is simply a set of instructions that tells the computer how to perform a certain task.
- A function is different from a for Loop or conditional statement because functions do not automatically execute when the JavaScript file is run. Instead, it must be called by name in order to execute it. This makes the code more easily reusable, because we can call it as many times as we need.
- Here is an example: function listTopics() {
for (var x = 0; x < topics.length; x++) {
console.log(topics[x]);
}
}