Tips and Snips: Creative Website Hacks for Creative People
ImageandAspect
About
Work Examples
Contact
Privacy
Terms
Subscribe
Tips and Snips: Creative Website Hacks for Creative People
  • ImageandAspect
  • About
  • Work Examples
  • Contact
  • Privacy
  • Terms
  • Subscribe
Browsing Category
HTML
Bootstrap•CSS•HTML

The correct order for using Bootstrap tags

bootstrap logo
April 4, 2022 by Diane Metcalf, M.S.I.T. No Comments

If you notice that your page isn’t displaying properly; like maybe Bootstrap is using its’ default styles
instead of your custom css, or maybe your drop-down menu isn’t working, it could be that you need to
check the order of your Bootstrap tags.

The order of the tags is very important for your page to look and work like you want it to.

Check the head and make sure you have the meta tags correct. (The 3rd tag is necessary to display the page on mobile devices.)

<head>

<meta charset=”utf-8″>
<meta content=”IE=edge” http-equiv=”X-UA-Compatible”>
<meta content=”width=device-width, initial-scale=1″ name=”viewport”>

The above 3 meta tags must come first in the head; the other head content comes after them.

<title>Page Title Here</title>

Next is the Bootstrap core css:
<link href=”css/bootstrap.css” rel=”stylesheet”> OR
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

Your own style sheets come next
<link href=”css/mystyle.css” rel=”stylesheet” />
</head>

The Bootstrap Core JavaScript files (jquery.min.js and bootstrap.js) are at the end, right before the closing body tag, so the pages will load faster.

Which Bootstrap css version should you use? It depends whether you want to be able to read it or not. Bootstrap.min.css is a mini version of bootstrap.css. All of the white space and other extra characters have been removed, to decrease the file size. This version is usually used in production. When you’re developing, it’s helpful to use the regular version because it’s legible.

Read more at https://getbootstrap.com/docs/3.3/getting-started/

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 The correct order for using Bootstrap tags

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 2 min
HTML

Basic HTML (Hypertext Markup Language) Vocabulary Rules

March 4, 2022 by Diane Metcalf, M.S.I.T. No Comments

Element: an individual component of an HTML document. HTML documents are comprised of elements called “tags” and “attributes”.

 

Tag:  Tags identify the different parts of an HTML document so a web browser will know how to display the page.

Tags are always contained inside of a set of tag brackets: <the open tag> </this tag is now closed>. A closing tag is exactly the same as the opening tag but it has a  “/”.
  
There are two basic types of tags in HTML: Semantic tags and Structural tags
Semantic tags give meaning to the content they enclose. So, an example would be  the paragraph tag, used for creating…wait for it….PARAGRAPHS in the web page! This <p> is a  paragraph tag. The tag identifies the type of content it contains (a paragraph). You would create a paragraph like this:
<p> This is my paragraph. This is my paragraph. This is my paragraph. </p>
 
Remember: we must add a </p> to close the tag. An element that is not closed may not display properly.
 
Structural tags are used to organize the HTML document. For example, using  a <div> </div>tag will divide the page into logical subsets of content.
  

HTML tags are either “block”  level elements or “inline”  level elements.

 
Block level elements have a line break after the closing tag. Block level elements can contain other tags and elements as well. Example: <ul><li></li></ul>
 
 Inline level elements are placed next to each other (like they’re on the same line) and  they do not have a line break after the closing tag.
 Inline level elements cannot contain other tags.
Example:
<span>Content</span> 
<span>Content</span> 
These would actually display side by side.
 
HTML is not case sensitive, but is usually written in lower case.  HTML completely ignores line breaks, tabs and spaces, so if you want to use extra space to make your code more readable while you’re developing, that’s OK because the browser will just ignore the extra white space.
 
Attributes are additional values that configure the elements or adjust their behavior  to meet user needs.
The CLASS attribute gives us a way of classifying similar elements. It can be used for semantic purposes, or for presentations.

For example: <p class=”paragraph” > would give us a way to classify all of our paragraph presentation styles, so every paragraph is formatted the same way:

.paragraph{
font-family:
font-weight:
color:
}
 

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 Basic HTML (Hypertext Markup Language) Vocabulary Rules

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min
HTML•WordPress

Create a tiny browser icon site identification

tabbed browser icon or favicon
November 19, 2021 by Diane Metcalf, M.S.I.T. 1 Comment

A browser icon or favicon is not just a cute decoration for a website. It’s a cool way to create a unique website identity and keep website visitors aware of the sites they’re on. It makes your site stand-out in a browser full of open tabs and bookmarks.

When a page or site is bookmarked or “favorited” the browser icon or favicon will be displayed in the bookmarks list as well.

Web designers and developers can create a browser icon or favicon for a site or page, by using HTML or WordPress.

To create a browser icon or favicon

One way os to make it from scratch with a program such as Canva, or drawing it with an online app like Favicon.cc. It has a preview feature which is great for seeing progress as you go.

I’ve recently learned from one of my readers that while favicon.cc does a good job, it’s limited in that it doesn’t allow for generating favicons for various screen sizes and resolutions at the same time.  She found a pretty sweet, free, online favicon generator at Websiteplanet and suggested that I mention it. With this particular tool, you can create favicons from JPG, PNG, GIF (or even from a gallery) that are up to 5 MB in size, and it also has the capability to generate favicons for different resolutions and screen sizes at the same time. (Thanks, Paola!)

Another way you can convert an existing image into an icon is by using FavIcon from Pics, another free online favicon generator. It’s also one I’ve tried, and works well, even when using it on a Smartphone.

Use a simple image along with the organization’s brand colors, to give the site some brand recognition. The logo might work as an icon image if it’s not too complicated. Since these icons are tiny, logo details won’t show.

PNG favicons are supported by most browsers.  For backwards compatibility, use ICO favicons.

Using HTML

To add a browser icon or favicon to a website by using HTML:

  1. Save the icon image as imagename.ico, or imagename.jpg
  2. Save imagename.ico or imagename.jpg to the root directory of the website.
  3. To identify the favicon to web browsers, so they can display it correctly, you’ll need to add this code to the head tag:

<head>

<link rel=”icon” href=”http://website.com/imagename.jpg” />

Using WordPress

Prepare the image

The image needs to be 500 x 500 px in width and height. As mentioned before, keep the image simple.

Open Customizer in the WordPress Admin area

Go to Appearance > Customize.

Click “Site Identity” 

This is the area where you can edit the site title, description and also upload the browser icon.

Click “Select Image”

From Media Library > Upload Files, browse for the prepared image on your computer and upload it to the Media Library. WordPress allows cropping, but I think it works out best if  the image is already the recommended size before uploading.

Publish

Click Save & Publish.

Enjoy and let me know how it goes!

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 Create a tiny browser icon site identification

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min
HTML

Why you need a website

The Toxic Undo Website
July 12, 2021 by Diane Metcalf, M.S.I.T. No Comments
Social media platforms like Facebook, Snap-chat and Instagram are great! They’re fun to use and they keep us sharing and connected. They all provide a way for us professionals to present and share our work. So, is it really necessary to have more presence than that? Yes. All serious professionals need their own web presence.

Social Media by itself

Right now, you might be relying on just social media to showcase your talent, work, experience and ability. By using social media, you can definitely grow an audience and relationships within it. Your followers can learn more about you and what you do, and connect with you. These platforms are a great way to do this. There is a downside to using only social media to promote yourself, and that would be the “algorithms” that they use. Algorithms are basically a set of mathematical calculations that determine how your content gets displayed. They are changed and updated frequently, and that affects the way users see your content. Sometimes “paid” content has priority over un-paid posts. Entrepreneurs’ solopreneurs and creatives sometimes pay for sponsored posts or social media advertising, just to stay visible and relevant. This is one reason why professionals need their own web presence.

Why Social Media isn’t enough

If social media is the primary way you nurture an audience, there are a few things you need to know. Social media platforms, like Facebook, use a time based news feed, so photos that you post will be seen lower in your feed, as you post newer content. To be able to see older posts and content, your followers have to scroll for them or visually search for specific content or photos, and possibly search your albums. As you can imagine, this is frustrating, and they may never find that week-old post they were looking for. Not good. You don’t need to stop using social media altogether, because it’s still important for connecting. It’s just not the best way for promoting your work, skills, abilities or brand.

Owning your own space

When you buy your own piece of internet “real estate”, you now have your own dedicated space to present your work, share your story, and provide a place for interacting and connecting. You’re the one who gets to decide how to use that space. You’re no longer relying on a platform that you can’t control, and your current and new audience members will be able to find your new space if you continue to engage on social media and let them know your new address. Another reason why professionals need to focus on getting their own web presence! Owning your own domain name (“something.com”) is an important part of establishing your web presence. It helps build online credibility and a personal and professional reputation. If people can find you on the Web, they’ll be able to do business with you. Your domain name and a web platform are the first steps towards a stable, credible web presence. A well designed and professional looking platform translates into credibility for you. It provides a sense that you’re serious about what you do and that you’re serious enough to invest time and money into the thing that you’re passionate about. It doesn’t have to be expensive at all. There are many options. I’ll continue to write about them, and for now, here’s a handy downloadable, free guide.

To have your own dedicated web presence, you need three things:

1. your own your domain name (“xyz.com”) 2. a reliable hosting provider 3. content to share. When you have your own web presence, on your own platform, you can decide how to present your work and give yourself priceless opportunities, like being able to reach the larger global community, provide value, help others, and establish a following….all without buying social media ads or paying to “promote” posts. A harsh reality of owning your own web space is that people won’t find it overnight. It can take a long time to establish an optimal search engine ranking. One particular reason for this is that Google ranks websites and domains higher the longer they’ve been around. Your web space and brand will grow over time, and your traffic will increase organically. So, learning some basic SEO, or hiring some help, and creating a stable web presence on your own platform sooner rather than later, are always good ideas.

GREAT REASONS TO OWN YOUR WEB PRESENCE:

creative-300x116 Why you need a website

Your work

A website is a place of business. It’s where you communicate with people, grow a fan base, and sell or promote products and services. Your own web space, in the form of a dynamic, visually engaging, content-rich website, has the power to create a web presence that: • represents YOU: your personality, work, voice, brand, and values. • gives you the power to connect and influence. • puts you out there as an expert and an authority in your area of expertise. • sets you apart from the hundreds of others who solely use social media. Making yourself available to the world like this can lead to unbelievable personal and professional growth. A noteworthy point to make here is that your web space will be accessible by all kinds of devices; phones, tablets and laptops, just to name a few. You site will truly be available to anyone, anywhere, who has a device that can assess the Web.

Content Marketing

Creatives create because we enjoy it. “Creating” is part of who we are. Wouldn’t it be nice if someone appreciated our creations enough to pay us money for them? It happens all the time, with content marketing. Content marketing is a type of marketing that focuses on creating, publishing and distributing subject matter to a specific audience. When people go online to research products or services that you provide, you need to have your own web presence on your own web space, if you want them to find you and learn about what you do and provide. Having your own web platform also means that you can find out what your audience is looking for, and then publish content that’s relevant for them. When you publish content that your audience wants, and make it available on your site, they will come. You can use social media to spread the word. Content marketing draws visitors to your web space and gives them an opportunity to find out who you are and what you do. It’s a type of “inbound” marketing, and it’s the opposite of “pushing” ads out to people. Inbound marketing is very cost effective: online marketing researcher, Hubspot, found that inbound marketing-leads cost 61% less than outbound leads do.

Using Analytics

Using analytics tools (like Google Analytics) allows you to learn about your visitors and how they interact with your site. Google Analytics is free, and easy to set-up. Some things you’ll learn about your visitors are: • whether they accessed your site by mobile, laptop, or tablet • the pages they visit on your site • where they are geographically located when they come to your site • how long they look at your content • whether they’re a first time or repeat visitor • If they’ve read more than one page on the site • whether they’ve made a purchase (if you provide that ability) All of this information is useful when you’re planning a marketing strategy.

Sales

A web platform can be the place where you sell your work or products, and the great thing is that sales can happen 24/7. You can test and experiment with products and pricing, and by introducing new products or services to see how they’re received.

Your voice

When you own your web space, you’re no longer limited by geographic location. Your place of business is anywhere in the world people can find your web presence. Owning your web presence allows you to share your values, thoughts and ideas with the world. Blogging gives you a forum to create thoughtful and valuable content and a way to share your story and journey. These give you a voice, and the capacity to influence.

Your reach

There are nearly 4 billion Google searches every day. At any time, a potential new customer or fan could discover you! Owning your web platform means that your content is always available, all over the world, and allows people from anywhere and everywhere to find you and discover what you’re about.

Your credibility

Having your own web platform helps to build your credibility and reputation as a professional. People expect to be able to find a dedicated web-space for any well-known Creator: artist, author, designer, photographer, producer, musician etc. If someone looks for you on the web and can’t find you, it could send the wrong message. When your followers can find you online, it tells them you are serious about what you do. Your credibility and reputation grow as your web space gets more visitors. Visitors may get to your site directly from other sites that share your audience and choose to link back to your web space. This is called “back-linking”, and it’s a valuable practice. It’s like getting massive approval or a meaningful positive reference from these other places that have a common connection to your audience. You can grow your credibility by engaging on social media and with relevant “event” websites, bloggers, galleries and any others who share your audience. Share links to your content. Chime in. Provide value. They may love it that you provide value to their audience and want to link back to your website. Questions? Contact me: [email protected] or My Contact Page Other articles you might like: -6 Tips to Make Your Blog Post SEO Friendly -Using images: Tips to improve your SEO rankings -Why you should have a customer thank-you page

About the author

diane-author-300x181 Why you need a website I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection. I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place. I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts. I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves. ‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online. Visit Image and Aspect to learn more about your web presence options Diane M. Metcalf, M.S.
Read more
Reading time: 9 min
Page 1 of 3123»

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Follow @MetcalfDiane

Categories

  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Recent Posts

  • 6 Tips to make your Blog Post SEO Friendly May 6, 2022
  • The correct order for using Bootstrap tags April 4, 2022
  • Basic HTML (Hypertext Markup Language) Vocabulary Rules March 4, 2022
  • How to make a hover-able drop-down menu February 23, 2022
  • 10 things to do after creating your site January 8, 2022

Older Posts

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020

Tags

  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Image and Aspect on Instagram

To see the Instagram feed you need to add your own API Token to the Instagram Options page of our plugin.
Oops, something is wrong. Instagram feed not loaded

recent posts

  • 6 Tips to make your Blog Post SEO Friendly
  • The correct order for using Bootstrap tags
  • Basic HTML (Hypertext Markup Language) Vocabulary Rules
  • How to make a hover-able drop-down menu
  • 10 things to do after creating your site

ImageAndAspect.com © 2021 Designed by ImageandAspect