Web Technologies Exercise

Instructions

1.Inspect this component on Sketch Cloud: Link

2. Use the provided HTML document. Work on creating a single component first using the design, and the included text file in the assets.

3. Style the component in style.css

4. Implement the rest of the components in the html.

Extras

• Create a 3-column grid that distributes all of the components. Either use display: grid or display: flex.

• Use JS to compile the .md file into html.

Resources

• complete guide to links and buttons

• A Complete Guide to Flexbox | CSS-Tricks

• 9 Important CSS Properties You Must Know | Zell Liew

• CSS Grid Layout Crash Course - YouTube

• BEM Naming

• ITCSS Inverted Triangle CSS

---

Built off the Apprentice Web Starter Kit

This is a barebones development server that offers SASS compiling w/ Autoprefixer. It supports Browsersync for live reloads and interaction sync across browsers.

Apprentice Edition

This version of the web starter kit removes some additional CSS that's typically included in the main Web Starter Kit.

Includes Starter ITCSS

This project includes a starter ITCSS structure complete with variables and normalization.

Installation

npm install

Starting the Server

npm start

By default, the server will run at http://localhost:3000.

You can access the Browsersync settings UI at http://localhost:3001. This will enable you to activate settings such as:

• Network Throttle to simulate lower speed connections.
• Remote Debug for CSS including element outlines, depth outlining, and a grid overlay.