# Step Into Tech - Week 4

Lightning talk: Shilpa Danwe

[e-mail]

BBC Women in STEM network email - [e-mail]
(Can sign up for their mailing list)

### Week 4 - Recap

Full Stack - Front-end and back-end
HTML and CSS underpin every website (but sites might use frameworks too)

Concepts/Fundamentals - The ones we've covered are the main concepts of programming in any language
(Objects are just for object-oriented languages like JS)

React is a front-end implementation of a framework
Node.JS is a back-end implementation of a framework
Frameworks build on languages
Languages build on concepts

So Bootstrap is a framework for CSS, which builds on concepts/fundamentals

### Responsive Design

Responsive design means your website will respond to the size/orientation of the screen/browser window

Waybackmachine has good examples of how responsive design has changed the way the web looks and responds.

Chrome has a preview tool in Inspect where you can see what a site looks like with different resolutions, devices, etc.

#### Media Queries

Media queries are essentially if statements.

@media only screen and (max-width: 600px) {
    body {
    background-color: lightblue;
    }
}

This is saying that `if` the screen is 600px or less, the background colour will be light blue.
`only screen` means if it's being viewed on a screen - e.g. if you're printing it out, usually

You should put the defaults first and then the media queries afterwards

CSS breakpoints - CSS breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user. CSS breakpoints are also called media query breakpoints, as they are used with media query. In this example, you can see how the layout adapts to the screen size.

To publish your pushed GitHub code you can use GitHub Pages. Go to your repo and go to settings and scroll down to GitHub Pages. On source, change from 'None' to 'master branch'.

Bootstrap is kinda just a CSS style sheet - you can reference their compiled CSS and JS.

CDN = content delivery network

So theirs is hosted online, so you can do that or download it locally (if you want to use it offline, for example)

### The Grid System

Kind of like a table - built up of rows and columns.

Bootstrap is mobile-first so ignore 'xs' in James' example in the slides, Bootstrap has been updated since. XS means extra small screen i.e. a phone, hence mobile-first. You still need to use `md`, etc. for medium sized screens

You just use different multiple classes in your divs to specify how things should look at different viewport sizes e.g.

<div class "col-12 col-md-6 red">
</div>

###### tags: `Step Into Tech` `CSS` `Bootstrap`