--- tags: mstu5003, doodle, doodle+, html, css --- # Doodle+: Digital Business Card :::info Do your own Doodle OR... For those of you who have trouble coming up with ideas fora Doodle, or just need a little more structure, Doodle+ will provide you with a problem and break it down into rough parts for you. ::: You can build a lot of different things with HTML, CSS, and Bootstrap. Not just webpages. The key is to break the problem down into parts and tackle them one by one. In this Doodle+, we'll break down the process of building a business card. ## The Output (end result) ![Business Card](https://i.imgur.com/fuEJDDY.png) *Figure 1: You're going to build something like this.* ## Part I: Designing within the GRID system 1. Setup your page with BS container. 2. Give your container a BS row. 3. Create BS columns inside that row. Your business card can go into one of those columns. --- Conceptualize the business card itself as a grid system. This is the key to using Bootstrap. - PINK HIGHLIGHT: Create a div and give it an `id` called `business-card`. - BLUE HIGHLIGHTS: Create two divs that are BS rows inside `#business-card`. - YELLOW HIGHLIGHTS: Split the top row into two BS columns. ![](https://i.imgur.com/LLj3aAP.png) You should now have a grid that is formatted to basically represent the major parts of the card. ## Part II: Adding the content 1. Create an image tag and place that into the left column of the first row of your card. 2. Create headings and paragraphs to create the content (e.g. name, address, etc.) in the right column of the first row of your card. 3. Create paragraphs to provide some business card like information. ## Part III: Styling the visuals You should now have something that is starting to look like a business card, structurally and content-wise. 1. Tweak the CSS rules to give your content the right font-family, font-size, color, etc. 2. Use classes to create categories of style rules and see if you can't reuse these rules in various places of your business card. 4. Play with different CSS properties. 5. If you are making changes to things like your grid layout, sizing, etc. instead of creating custom CSS rules - try using the built in BS Utility Rules: https://getbootstrap.com/docs/5.2/layout/utilities/ ## Part IV: Augment the current work Of course, this is just a demonstration. Use the main concepts to further customize the work above and make it your own. # Concepts Involved :::success - Structure, Style, and Semantics - HTML elements and tag syntax - HTML attributes: id, class, etc. - CSS rules: properties and values - Bootstrap GRID system and Utilities - https://getbootstrap.com/docs/5.2/layout/containers/ - https://getbootstrap.com/docs/5.2/layout/grid/ - https://getbootstrap.com/docs/5.2/layout/columns/ - https://getbootstrap.com/docs/5.2/layout/utilities/ :::