CSS

CSS stands for Cascading StyleSheets, another programming language used by developers to define how webpage content is presented to users.
It is probably my favourite language, after Python!

Whereas HTML strictly handles the structure and content of a webpage, CSS defines the colors, aesthetics, visual layout, and organization of your webpage.

Syntax

We use CSS to define style rules for specific elements of an HTML page and format them using a wide range of style options.

Using selectors, we can add style to each and every element; like the header, body, headings and footer.

Selectors

A selector defines the element or attributes to which the declarations will apply: such as .div { ... } or html{ ... }.

• Combine two selectors into a single CSS rule with a comma, allowing the declarations to affect both selectors.
• A wild card symbol, or *. Declares that ALL of the elements on the page will have the same style properties.
• It's a good idea to reduce your code (DRY) by setting up general element attributes that cater for all types of that element on the page; This can help reduce unnecessary confusion down the line!

Classes & ID's

Notice how to access each type; a class starts with '.'
where as an id starts with '#'.

Margin & Padding

• A margin indicates how much space we want around the outside of an element.
• Padding indicates how much space we want around the content inside an element.
• Properties 'margin-left and margin-right: auto' allows to automatically centre the image regardless of screen width.

Text-align

• The text-align property is one way to center a title or heading on a webpage.
• Add our stylesheet to the html via: <link rel="stylesheet" href="./assets/style.css"> tags.
• Class attributes allow us to share a CSS rule to any element we choose by assigning the rule to a class attribute with a class selector.
• The box-shadow CSS property adds shadow effects around an element's frame.

More Attributes

CSS attributes provide access to html elements for controlling how they look.

• All HTML elements have attributes
• Attributes usually come in name:value pairs such as name="value".
• This is how we can access and refine control over every single element on the page.
• For example, the <img> element can contain various attributes;
• The `src` attribute defines the location, or source, of the image file.
• The `alt` attribute contains a text string that describes the appearance and functionality of the image.
• The 'title' attribute can be used to provide a description as a user hovers over the image.
• Another good example of an attribute is for the <a> tag; The 'href' attribute is vital for directing the anchor link to the correct destination. Click on the element titles or the footer icons to see what I mean.

There is a ton of elements and attributes to know and read up on, you never know when they may be needed.

GitHub

We use Github for version control. It's an extremely useful way to create repositories for each project that you can then pull and push changes to.

We can create new branches as to not overwrite your original commits and to collaborate with work colleagues on set project issues.

Create Issues (tasks)

Issue explanation:
Purpose: task management tool

• Track, organize, and communicate ideas, tasks, bugs, and enhancements.
• Identify bottlenecks or blockers that could prevent work progress.
• Avoid duplicating work by assigning tasks or issues.

User Story - what is required?

Here is an example of an issue; we create User Stories that help us identify exactly what we trying to build and how far through we are.

User Story:
As a boot camp student, I want a Prework Study Guide website, so that I can review all the information I learned throughout Prework.

Assessment Criteria:
GIVEN a Prework Study Guide website
WHEN I visit the website in my browser

THEN I see four boxes with styled shadows titled HTML, CSS, Git, and JavaScript with associated notes listed and styled in an attractive way.

WHEN I view the study guide
THEN I see a dark blue header and footer, and four boxes with a shadow styling.

WHEN I open the console in my browser

THEN I can see the four topics I learned listed along with a suggestion on what I should study first

WHEN I visit the website using the URL

THEN I can access my website from any browser

Add New Repo

To create a new repo, just add a new one in GitHub. Give it a name and a description. Make sure you have set up your SSH key first!

Using Command Line (Terminal on a Mac); navigate (cd) or create (mkdir) folders to house your project. Use (touch "filename") to add new files like index.html, style.css and main.js.

After you open a file in VSCode, type 'code .' within that folder from the CLI and VSCode will open the project into a new workspace.

It's a good idea to save a workspace within VSCode so you can easily access the correct one and differentiate it between work and personal workspaces.

Branching

A branch is a copy or version of the code that can be worked on independently in isolation so development changes do not disrupt other team members who are also working on the code and testing their solutions.

When we are typically working on code, it is in an unstable state since we are actively developing the code.

default branch:
main - main branch - holds the final product

feature branching:
hold code for a single feature being developed on 'working branches' later merged back to the main branch.

We can attack a new issue in terminal and push new content thusly:

Move into the correct folder (cd assets)
Create a new file (touch style.css)

Check which Git branch you are on by running:
git status

If you are not on the main branch, switch to it and then create a new feature branch where you will develop the new content.

These are the Git commands to check we're in main and add a new branch:
git checkout main
git checkout -b feature/add-css

Here is some useful reading on GitHub work flow:

GitHub Workflow (click this link!)

Staging

To stage a file is simply to prepare it for a commit. Git, with its index allows you to commit only certain parts of the changes you've done since the last commit.

STAGING file changes :
git add -A

Git Commit

COMMIT:
git commit -m "added header, and header container div"

Pull Requests

Pull the main code from origin main (pull source code)

git pull origin main

- ensures we have latest commits and changes
always pull source before PUSHING - ensures no conflicts between github and local repo!

Push Changes

• git push - transfer all changes to github
• go to github site: view repo -> should see the new file!
• make it live: go to settings -> Pages (under environment)
• -> Select None and choose MAIN -> save

GitHub takes time to fully get used to and understand.
As a noob I made several errors but a quick Google search helped me overcome the issues.

JavaScript

Javascript is the most common front-end programming language.
It is one of the most widely used and best languages to achieve anything and everything that looks cool and adds functionality on a modern website.

You could view it as a multifaceted top-level language that you can do pretty much anything with, from animation, to developing entire web app front-ends.

Syntax

Syntax is how we define every element of code structure with the language. Currently, I know very little about it, but I am able to read it and understand the basic gist - thanks to my experience with Python.

JavaScript looks a lot like other programming languages. Once you get to grips with the basics of any modern language, you can read code written in other languages and understand what's going on!

Personal Ramble(!)

To be honest, JavaScript looks a little alien to me, and I have definitely struggled writing my own so far.

Just reminding myself of my Growth Mindset: I can't yet, but I will!

Actually writing in the new language requires lots of practice and repetition to start coding fluently on your own.

They say that for everything you learn through a tutorial, you should stop and spend 4 times as long writing the code out and re-writing it out, until it 'sticks'.

This has definitely worked for me, especially in small chunks of time!

Once I get my head around GitHub, I intend to add my Pomodoro Learning Timer to a repo - so look out for it! It really helps to break up learning and to take constant breaks.

For a pretty decent introductory tutorial, check this link out:
link to Basic JavaScript tutorial

Add a .js file to your html:
(at the bottom, just before the body close tag!)

<script src="scripts/main.js"></script>

Comments

single line: // this is a comment

multi line: /* This is a multi-line comment
that caters for larger comments spanning multiple lines */


A nifty shortcut to comment out chunks of code in VSCode:

highlight the code block;
hit 'Command + /'

Variables

When I first discovered variables back in school, I really loved the concept of them. The idea that it's a box containing a value that can be used, reused and changed has never really left my mind.
For the first time in my life, I was suddenly interested in actual maths!

There are 2 types of variables; implicit and explicit:

Implicit:

myVar = "hello"; -> (or var myVar = "hello")

Implicit declaration of a variable leaves it up to the computer to instinctively know what it is.

Explicit:

let myVar = "hello" (changable)
const myVar = "hello" (constant)

An explicit declaration is when you specifically give the variable a type.
Either a let (for muteable) or const (for immuttable).

Mutable means it can be changed throughout it's existance.
Immutable means it's a constant value that cannot be changed.

Calling a Variable:
myVar;

We say 'declaring' a variable when creating and defining one.
We say 'calling' when we want to use it.
(noob doubt- That last one may be more related to 'function calls' though but I've always said calling!)

Data Types

There are several types of data to consider when working with variables. These are:

'Strings' - text
'Numbers' - numbers!
'Booleans' - True or False
'Arrays' - list of mixed data types
'Objects' - anything can be an object and I presume it relates to OOP (Object Orientated Programming) - I dunno yet, don't judge me!.

Here are each data type, in an example variable:

• string = "hello";
• number = 0;
• boolean = true
• array = [1,"bob",2,10]
• object = let myVar = document.querySelector('h1');

Operators

Functions

There are 2 main types of function; built-ins and your own.

The functions 'alert' and 'querySelector' are built in to the browser.

Built in function examples:

let myVar = document.querySelector('h1');

alert("hello!");

Add arguments:

() - add arguments to the functions (inputs)
So, alert('expects an arg here')

This tells the function what we want it to display i.e - "hello"

Other (more useful functions) might include creating a function that does something, like a calculation:

maths functions:

/* here, we assign a function called multiply, and provide 2 input arguments (num1, num2).
These (input argument paramenters) allow the user to type in whatever numbers they wish to perform the operation. */

// we created a variable called result, and declared what the expected operation will do. i.e- multiply num1 by num2

function multiply(num1, num2) {
 let result = num1 * num2;
 return result
}

The return is important here. The return allows for variable 'scoping'
i.e- variables are usually only available for that INSIDE its function;
but if you return the result - the function is now available (reusable/accessible) anywhere in our code!

If you open console (F12 via VSCode) you can test whether the function is working properly:

call the function:

multiply(4,7);
multiply(20,20);

Conditionals

Conditionals are one of my favorite things about coding; they are incredibly useful and used a lot to solve a problem your working on. I love tranforming pseudo-code into them.

If, else

Test if an expression returns true or not:

If, else if and else