html-sandbox
This contains 4 projects for practising purposes for HTML5, CSS3 and Bootstrap4.
-
html-basics: Just simple HTML and CSS3 basics.
-
html-bootstrap-basics: Just bootstrap4 w/ responsive and grid basics.
-
html-bootstrap-fundamentals: Just bootstrap4 w/ responsive and grid basics. topography, buttons placeholders (via.placeholder.com) etc.
-
html-fundamentals: more close version to a real 1-page HTML web site w/ custom CSS3
-
flex-core: flexbox basics
-
flex-cardbaseio: flexbox applied to a possible card based design
How to Start
brew cask install visual-studio-code
- Install live server add-on on vscode
- Use *.html files
- Try w/ different screen sizes
Briefly
- under
<head>
tag, define font, bootstrap.min.css and
- Add
<meta name="viewport"
- Add your custom css file
- w/ html tag selector
- w/ . selector for class
- w/ # selector for element-id
- Add custom js file
- under
<body>
tag
- Define grid layouts:
- At the bottom, add jquery, bootstrap.min.js and popper.min.js links