Posts Tagged: Web Design
How to Add a Featured Tag with Text Over an Image
In this tutorial I will show you how to place a featured tag over an image using CSS3 ::before pseudo elements. A common use case for this is eCommerce where you might want to visually show a product is featured, on sale, or out of stock. Since your products are displayed dynamically using a database,… Read more »
Category: Tutorials
My 7 Tips for Learning the Artistic Side of Web Design
This is a great question and something I have been thinking a lot about. Especially in how to teach this skill online vs a classroom setting. If I had to pick four important factors to becoming a good designer they would be. Pencil sketch before moving to the computer Sketch a lot of thumbnails with… Read more »
Category: Articles
HTML5 Responsive Autoplay Video Code Snippet
In order to make your HTML5 video responsive you will need to add the following CSS style properties: width: 100%, and max-height: 100%.
1 2 3 4 5 | <video style="width: 100%; max-height: 100%;" autoplay="autoplay" width="300" height="150"> <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" /> Your browser does not support the video tag.</video> |
Category: Code Snippets
How do I design and build a website?
Building a website is one of the greatest experiences. It is a convergence of creativity, technology, and service. So congratulations on embarking on the journey. Below is a very high level look at the 3 major steps. If you have questions, please let me know. Creativity Before you start building you need a plan and… Read more »
Category: Common Questions
What Is the Best Way to Learn Web Development?
Learning Web Development is Like Learning How to Paint Let’s say you wanted to become a painter. Where would you start? How would you feel if your first painting looked like the one below? I believe painting by numbers teaches the mechanics and joy of painting to beginners. It quickly builds confidence. You… Read more »
Category: Articles
Web Hosting Options and What I Recommend
It can be hard finding a good web hosting company. I have used some good ones and some really bad ones. Below are my recommendations based on the following criteria. Provide quality customer support Based in the USA. I want my server to be in the same country as my audience to improve the speed… Read more »
Category: Common Questions
What is Visual Hierarchy in Web Design and Why is it Important?
When designing a page layout it is important to consider the overall visual hierarchy of the page. In other words, what grabs your eye first, second, third? What are the goals of the page and how can you make those goals easier to achieve? Your design can use size, color, position, and proximity to define… Read more »
Category: Articles
What are the integrity and crossorigin attributes and why are they necessary?
In the code snippet below, you will see how Bootstrap uses a CDN to deliver their minified scripts and styles. But what is that long string of random characters after integrity=?
1 2 3 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> |
With this technology, developers can benefit from the performance gains of using Content Delivery Networks (CDNs) without having to fear that a third-party… Read more »
Category: Common Questions
What are the differences between CSS and SASS and what are its advantages and disadvantages?
Sass stands for syntactically awesome stylesheets. Sass is a scripting language that is compiled into regular CSS. It was created to help writing CSS easier and more efficient. CSS is great but it lacks the ability to do advanced programming and calculations. Sass is CSS with superpowers but browsers like Chrome cannot read Sass files…. Read more »
Category: Common Questions
Take Command of CSS Flexbox
As a kid I loved playing with toy plastic army men. I would line them up and pretend to be in command giving orders to my soldiers in order to defeat the enemy. Since I was in full command, the soldiers would look to me for their orders. Sometimes a hot shot recruit would overstep… Read more »
Category: Tutorials