HTML & CSS Intermediate.

Resources.
1. Read through this HTML elements reference to get an overview of what
other HTML elements are available to you. No need to commit this to
memory because you’ll be learning the important parts as we go, but having
a glance now will help the content stick later.
2. Take a glance at a somewhat overwhelming looking CSS Cheat Sheet.
Again, we don’t need you to learn anything specific, or memorize anything
from this list, just use it to get a feel for what you still have left to learn!
3. For quick references use w3school for tags and css tricks.

Learning Outcomes

By the end of this lesson, you should be able to do the following:

● Use some of Emmet’s most useful shortcuts.

● Set up custom Emmet keybindings in VS Code.

Assignment Read on emmet for vs code and practice with it.

Flex box and Grids

Lesson Overview

This section contains a general overview of topics that you will learn in this lesson.
 ● You will learn how to position elements using flexbox.
● You will learn about flex containers and flex items.
● You will learn how to create useful components and layouts that go beyond
just stacking and centering items.

Let’s Flex!

Flexbox is a way to arrange items into rows or columns. These items will flex (i.e.
grow or shrink) based on some simple rules that you can define. To get started,
let’s look at a simple demonstration. For all the exercises here, take your time to
inspect the code and really understand what’s going on. In fact, playing with the
code yourself will make it much easier to retain this information.

Flex Containers and Flex Items

As you’ve seen, flexbox is not just a single CSS property but a whole toolbox of
properties that you can use to put things where you need them. Some of these
properties belong on the flex container, while some go on the flex items. This is a
simple yet important concept.

A flex container is any element that has display: flex on it. A flex item is any
element that lives directly inside of a flex container.
Somewhat confusingly, any element can be both a flex container and a flex item.
Said another way, you can also put display: flex on a flex item and then use
flexbox to arrange its children.

Alignment properties.

Properties that control alignment

● justify-content — controls alignment of all items on the main axis.

● align-items — controls alignment of all items on the cross axis.
● align-self — controls alignment of an individual flex item on the cross axis.
● align-content — described in the spec as for "packing flex lines"; controls
space between flex lines on the cross axis.
● gap, column-gap, and row-gap — used to create gaps or gutters between flex
items.

Align items

● align-items: flex-start
● align-items: flex-end
● align-items: center
● align-items: stretch
● align-items: baseline
●

Align content

● align-content: flex-start
● align-content: flex-end
● align-content: center
● align-content: space-between
● align-content: space-around
● align-content: stretch
Justify Con
/* Pack items from the start */

● justify-content: end; /* Pack items from the end */

● justify-content: flex-start; /* Pack flex items from the start */
● justify-content: flex-end; /* Pack flex items from the end */
● justify-content: left; /* Pack items from the left */
● justify-content: right; /* Pack items from the right */

GRID LAYOUT.

.box {

display: grid;

width: 540px;

grid-template-columns: 120px 120px 120px;

align-items: start;

justify-content: space-between;

Knowledge Check
This section contains questions for you to check your understanding of this lesson
on your own. If you’re having trouble answering a question, click it and review the
material it links to.

● What’s the difference between a flex container and a flex item?

● How do you create a flex item?
● What is the difference between justify-content and align-items?
● How do you use flexbox to completely center a div inside a flex container?
● What’s the difference between justify-content: space-between and
justify-content: space-around?

Resource.

1. More on flex this tutorial .

2. This flex visual cheatsheets. has some useful references to flex and its
properties.
3. More on flex. Short youtube video
4. CSS Grids guidelines. Complete guide to GRID
5. More on flex layout display.
6. Flex alignment properties. Tutorial.

Example GRID

grid-template-rows: 150px 150px;

grid-template-columns: 150px 150px 150px 150px 150px;

Practice Project.
 1. https://technical-documentation-page.freecodecamp.rocks/
2. https://personal-portfolio.freecodecamp.rocks/#contact. Flex/grid project.

3. Design a simple landing page with the following fields. First name, last
name, email, phone number, password, confirm password, country( county
should be a drop down with a list of countries), Date of birth( drop down to
select month, day and year), subjects ( a list where user can select multiple
subjects), submit button. NB. Be creative

Media Queries. Responsive designs.

Responsive design.
AIM: design content for the various screen types.
Screen Types: Mobile, tablet and, desktop/laptop
Screen breakpoints. Breakpoints are applied to screen width as this is what varies for the
various devices. Default break points are 768px for tablets and mobile, 1024px for
tablets and desktop.

Example.

@media screen and (max-width: 768px) {

div {
background-color: lightgreen;
width: 30px;

}
}

@media screen and (min-width: 768px) {

header {
background-color: lightgreen;
display: flex;
 justify-content: space-around;

}
}

NB: Design page from mobile to desktop.

Responsive project assignments.

1) Parallax Template**
2) Blog Template
3) Food blog template
4) Fashion blog template
5) CV template
6) Wedding invitation template
7) Nature portfolio template

Adding a README.md in your project.

A readme file carries the general information about your project. From the project name,
to author, demo site and instructions on how to run your project locally.

Format of a Readme file

1) Project Name. Example

# Runner Game

2) Project view. For frontend projects/web pages. Add project images following this
format. 
example.
## App


3) Project description. Give a brief description of your project and the description of
the various sections of your project and instructions. Add images to the section if
necessary. Add a maximum of 2 images.

## About

This game implements a simple endless runner game whereby a runner

score increases with time (after every 300ms). The game displays the user current
score, High score and the user name on the game.

## Play Game

Simply play the games by using your mouse pad. Click to jump and run as
far as you can go on the ground without falling off.

## Game Design Document

Full details of the Game can be found here [GDD](./GDD.md)

4) Project Technical. Add full technical details of your project. Example.

## Built With

- Javascript
- Bootstrap 5
- Html
- Webpack
- Phaser 3

### Prerequisites
 Knowledge about JS:

- Basic data structures

- Arrays
- Functions
- Constructors
- Knownledge of webpack
- Knownledge of Phaser 3

## Clone project

- To get a local copy up and running follow these simple example steps.
- Clone this repository with
`https://github.com/nganifaith/JS_Capstone-RPG-Phaser.git` using your
terminal or command line.
- Change to the project directory by entering: cd JS_Capstone-RPG-Phaser
in the terminal.

## Command line steps

- $ git clone `$ https://github.com/nganifaith/JS_Capstone-RPG-Phaser.git`

- $ `cd JS_Capstone-RPG-Phaser `
- $ `git checkout feature`

## Start App

- run `npm install`

- run `npm start` in your command line

## Test

- run `npm run test` to run test


4) Link to your demo site / deployed project. Add a link to your deployed site following
this format. [name to be displayed in your file](link to site)
Example
## Live Site

[Link](https://unruffled-euler-e01838.netlify.app/)

5) Author(s). Details about the author(s) of the project. With links to their social
media handle. Social media: [your name](link to social media)
Example

## Author

👤 **John Doe**
- GitHub: [@johndoe](https://github.com/johndoe)
- Twitter: [@johndoe](https://twitter.com/johndoe)
- LinkedIn: [John Doe](https://www.linkedin.com/in/John doe/)

6) Optional items.

## 🤝 Contributing
Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](link to issue page on github).

## Show your support

Give a ⭐️ if you like this project!

## 📝 License (optional)
This project is [MIT](./LICENSE) licensed.
Basic Markdown tutorial.
Read the basic command on this sheet for markdown syntax.

Figma projects.
1- Project 1
2- Project 2
3- Project 3
4- Project 4
5- Project 5
6- Project 6
7- Project 7
8- Project 8
9- Project 9
10- Project 10

Follow us on TikTok

TIPS for a good design.

1. Have a purpose and plan
2. Keep it simple
3. Readable
4. Responsive
5. Simple navigation
6. Clear call to action
7. Load speed
8. Prioritize scrolling
9. Pick up right images
10. Color palette.