html-and-css-mini

Minimal setup to start hacking on a website using HTML & CSS.

git clone git@github.com:radekosmulski/website-mini.git
cd website-mini
npm install
# open index.html and styles.css in your favorite editor
npx live-server

If you make changes to either index.html or styles.css and save, the webpage should reload. You should be able to see the effects of changes that you've made in the browser without taking any additional actions.

Exercises

There is also a way to use this repository to practice. I created exercises based on two fabulous resources:

• internetingishard
• scrimba free css grid course

My recommendation would be to go to the above, study the material and come here to do the exercises.

I list the exercises below. You can checkout the starting branch, see if you can implement the layout from the image and compare to the done branch. The starting branch will contain all the code you need to get started.

I work on these exercises having the editor, image of what I am implementing and a browser window open on my screen. By saving I can immediately see any changes that I have made. This is a really good environment for learning as it allows me to try out many things very quickly.

I also find having this awesome flexbox cheatsheet and this wonderful grid cheatsheet printed out on my desk very helpful.

flexbox

To implement	starting branch	done branch	learning objective
	internetingishard_flexbox	internetingishard_flexbox_done	flexbox
	internetingishard_advanced_pos	internetingishard_advanced_pos_done	advanced positioning
	internetingishard_menu	internetingishard_menu_done	advanced positioning
	internetingishard_responsive_design	internetingishard_responsive_design_done	responsive design

Now that you've exercised your flexbox skills, try flexbox froggy! It's a fun little browser game to help you practice what you've learned.

grid

To implement	starting branch	done branch	learning objective
	scrimba_grid_3x2	scrimba_grid_3x2_done	basic grid
	scrimba_grid_3x2	scrimba_grid_3x2_repeat_fr_done	repeat(..., ...) grid-template fr /auto
	scrimba_grid_miniwebsite	scrimba_grid_miniwebsite_done	grid-column/row-start/end gird-row/column span, -1
	scrimba_grid_template_areas	scrimba_grid_template_areas_done	height: 100% grid-template-areas grid-area
	scrimba_grid_autofit_minmax	scrimba_grid_autofit_minmax_done	auto-fit / auto-fill minmax
	scrimba_grid_autofit_minmax	scrimba_grid_auto_rows_done	grid-auto-rows
	scrimba_grid_image_grid	scrimba_grid_image_grid_done	grid-column grid-row grid-auto-flow

To further hone your grid skills, you can give css grid garden a try. It's a fun little browser game for exploring css grid.

Extras

Branches demonstrating integrating other libraries with the basic setup available on the main branch.

additional functionality	branch name
jquery google fonts	extras_jquery_and_google_fonts
tailwindcss	tailwindcss