How to Make Web Design

daily web design tips and suggestions

News Categories: SEO  Design  Marketing
How To Fix Outlook Dark Mode Problems (Email Design)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#inxq{background-color:#f3f5f6;}This tutorial will show you how to fix some of Microsoft Outlook’s worst behavior when it comes to text color in Dark Mode. Unpredictable text color changes in Outlook for Windows is one of the many mind-boggling issues you’ve no doubt encountered if you’ve ever built an HTML email for Dark Mode. Microsoft Outlook brutally inverts colors in Dark Mode, in some cases even turning dark colors into white. Not only can this result in very unsightly parts of your email, it can also result in text that is completely illegible. Let’s fix that. Watch the Video Tutorial Prefer your tutorials served in video flavor? Here you go. And don’t forget to subscribe to the Tuts+ YouTube channel for new videos every day! There are many versions of Microsoft Outlook. When I mention “Outlook” in this article I am referring to the Microsoft 365 edition of Outlook for Windows. Coming Up In Part 1 of this Outlook 365 dark mode tutorial, we’ll take a look at color changes for text styled with colors using HTML and CSS only. Part 2 will deal with text color changes inside VML (Vector Markup Language) shapes. 1. Color Changes to Simple Colored Text Let’s say you have a medium green area with some...
15+ Figma Portfolio Templates for Crafting Stunning Photography Portfolios
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}In this roundup, we’ll be exploring some of the best Figma portfolio templates for photographers, each offering unique features and designs to help you create a portfolio that stands out.When you’re a photographer, your portfolio is your calling card. It’s the visual representation of your talent, skill, and style. But creating a portfolio that truly showcases your work in the best light can be a daunting task. Using a Figma portfolio template for your photography is a smart choice. Image from Envato Elements. That’s why we’ve put together this collection of Figma portfolio templates -- to help make the process of building your online portfolio a more straightforward affair. Then, you can continue to focus on what you do best: taking stunning photos. Figma Photography Site Templates - A Quick Look You can find many Figma portfolio templates for photography websites and landing pages at Envato Elements, which is where we’ve sourced these stunning options from today. Here’s a quick look before we get down to the details: 1. Obscura 2. Zurich 3. Photography 4. Broms 5. Glentx 6. Photography 7. Pash 8. LoveShots 9. Zenin 10. Photographer 11. Photrendz 12. Bino 13. Aloha 14....
What the Heck’s the Bento Box Website Trend All About?
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Staff Pick Ruki - A Captivating Personal Blog Theme 9 bento box templates Comment numbers and reading time displayed for blog posts Vault - Multi-Purpose Elementor WordPress Theme 200+ design elements Bento box landing page demo Super clear to digest Custar - Software & App WordPress Theme 38+ Fully Editable Templates Gutenberg & Elementor Compatible Bento portfolio demos Staff Pick PageBolt - Landing Page WordPress Theme Heavily influenced by the bento box trend Stellar user reviews Japanese food fans will be familiar with the term bento box. For those less au fait with it, bento refers to a meal (usually rice, meat or fish, and pickled veggies) divided into parts and packed into a box. Sure, it sounds...
5 Best FREE WordPress Slider Plugins
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#it6ex{background-color:rgb(243, 245, 246);}Are you confused about picking the best slider plugin for your WordPress website? This article will help you out by providing a brief overview of some of the most popular options available. Sliders or carousels can be a useful addition to your website. They serve a lot of purposes such as showcasing featured content and products, either on the homepage or other prominent pages. You can also use sliders to show customer testimonials, information about upcoming events etc. Sliders can also make your website more visually appealing if used correctly. Keeping the popularity of sliders in mind, it is natural that the WordPress community would have a lot of free slider plugins that you can use on your website. Smart Slider 3 Smart Slider 3 is one of the most popular and highly rated WordPress slider plugin. It comes with a beautiful and intuitive user interface that makes it easy to create different types of slides. This plugin offers a lot of practical features: You can use this plugin to edit your slider in a manner similar to using page builders. The live slider editor allows you to drop multiple layers over each other and then adjust their placement using rows and columns. Use of multiple...
20 Best HTML Website Templates (Most Popular on Envato Elements and ThemeForest For 2023)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}Find The Most Popular HTML Website Templates to Use in 2023 From Envato Elements Grand Restaurant HTML Template If you're looking for restaurant HTML templates, try this premium option from Envato Elements. It comes packed with features to customize. App Landing HTML Templates This template HTML is 1170px grid-based. It has an awesome creative design and is fully customizable. Its design comes retina ready. Isuzu Creative HTML and CSS Templates This premium template HTML is build on HTML5 and CSS3. It come with unlimited color options and powerful features. Uniqlo Minimal HTML and CSS Template HTML website templates like Uniqlo are great for dropshipping and eCommerce entrepreneurs. Professional HTML website templates offer many advantages: HTML website templates can save you money on web design services Save time! No need to build a website from scratch.  Built with the best coding practices. A well-coded HTML...
20 Best Fashion Sales Ads Banners Templates
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Premium Fashion Sales Banners Ad Templates If you’re creating sales ads for your fashion store website, a great fashion sales banner ad template can help. Find the fashion sales banners ad templates on Envato Elements including the ones mentioned below: Fashion Modern Ads Banner Template This trendy, clean fashion banner ad template to help you promote your fashion sales includes 15 PSD template files.  Fashion Banners Ad PSD Template How about a colorful fashion banner ads template? This one comes with 14 PSD template files that you can scale to the sizes you want. Fashion Sale Ad Banners Template Looking for a unique fashion sales ad banner template for your online store website? Try this template that has 20 standard ad banners sizes and comes with smart object layers for image replacement. Fashion Sale Ad Banners A fashion banner ads template with editable layers, 14 different size banners with multiple shapes,...
How to Build a JavaScript Popup Modal From Scratch
* { box-sizing: border-box; } body {margin: 0;}#ik9y{background-color:#f3f5f6;}In this tutorial we’ll learn how to build JavaScript modals (popup windows) without using a framework like Bootstrap, or a third party library. We’ll build the whole thing from scratch, giving us complete control over how it works and looks. JavaScript Modal Demo Here’s the demo we’ll be creating: 1. Begin With the Page Markup First we’ll create a modal. To do this, we’ll add the .modal class and a unique ID to a container. Next we’ll specify the dialog by setting a .modal-dialog element as the direct child of the .modal. The dialog will hold the modal content. This can be any kind of content like text, images, lightboxes, user notifications/alerts, etc. “A pop-up (or modal) is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something” – Adi Purdila To open a modal, we’ll need any element with the data-open attribute (normally a button). The value of this attribute should be the ID of the desired modal. By default, a modal will close if we click outside its boundaries or when the Esc key is pressed. But we can also close it if we click on any element with the data-close attribute (normally a button). Initially the modal will appear/disappear with a fade effect. But we have the ability to adjust the animation effect of the...
I Serve Different Hero Images Across Various Screens With CSS Variables
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iuwg{background-color:rgb(243, 245, 246);}In this short tutorial, I’ll show you a neat way to serve different hero images across various screens with the help of CSS variables. Let’s get into it! Section With Single Background Image Consider the following page layout: The page layout Here, we have two sections: a hero section with a background image taken from Unsplash and an overlay, and another one with some text. Although not required, just to speed up the development process, I’ve incorporated the UIkit framework. Anything that starts with uk-* is a UIkit class. UIKit Tutorials How to Update UIkit Components George Martsoukos 07 Jul 2022 How to Create Responsive Mega Menus With UIkit George Martsoukos 18 Feb 2022 How to Create a Scrollspy Navigation With UIkit George Martsoukos 13 Jan 2022 How to Build a UIkit Lightbox With Dot Navigation George Martsoukos 29 Nov 2021 HTML Markup The page markup will look like this: 1 <section class="hero uk-background-cover uk-background-norepeat"> 2 <div class="uk-container uk-container-small">...</div> 3 </section> 4 <section class="uk-padding-large"> 5 <div class="uk-container...
HTML (Hypertext Markup Language)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iq7r9{background-color:rgb(243, 245, 246);}HTML is the structural coding language we use to build web pages. Some people refer to HTML as being the “building blocks of the web”. So what does hypertext markup language actually mean? Its origins stem back further than you might think—the concept of hypertext having been conceived as early as 1941. As its name tells us, HTML is a markup language. Its purpose is to format information; to define meaning and structure in a document. HTML doesn’t have any programming logic. The word hypertext in HTML refers to the links between documents. This linking of information is a core principle behind the World Wide Web, as proposed by Tim Berners Lee in 1989. The prefix “hyper” comes from Greek, and means “over” or “beyond”. So hypertext is effectively more than just text. HTML Tags HTML uses tags to describe various elements on a page. Usually these consist of an opening <> and a closing tag </> (though sometimes just a single tag is required). The name of the element is placed within these tags (like this: <tag>) conventionally in lowercase. For example: 1 <h1>These are opening and closing heading tags.</h1> 2 3 <p>These are paragraph tags. The...
HTML Element: dialog
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iudm{background-color:rgb(243, 245, 246);} The HTML <dialog> element is used when you want to create a modal or dialog box that overlays the main content of a web page. You might use it to display additional information, capture user input, or present important messages or alerts. Here are some example scenarios where you might consider using a <dialog> element: User interactions: If you need to prompt the user for input or confirmation, such as submitting a form, deleting a record, or confirming an action, a dialog box can provide a clear and focused prompt that captures attention quickly. Information display: When you have supplementary information that you want to present without navigating away from the current page, a dialog box can be used to provide context-specific details, instructions, or additional content. Error or warning messages: In cases where you need to notify the user about errors, warnings, or important notifications, a dialog box can grab their attention and make sure they acknowledge the message before proceeding. Interactive content: If you have interactive content like maps, charts, or multimedia elements that require user interaction or customization, a dialog box can serve as a dedicated...
31+ Best Responsive WordPress Themes (For Sites in 2023)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Staff Pick 1. Authentic 50 demos  Page builder compatible 2. Karma Multiple homepage layouts Versatile design 3. Astra Super lightweight Starter Templates 4. Hestia WooCommerce compatible  Modern design 5. The Retailer eCommerce-focused  Includes page builder 6. Konte Page builder compatible  Includes many store features 7. Squaretype Great for blogs or magazines  WooCommerce-compatible 8. Digiqole Magazine theme  Grid layouts...
15+ Best Neumorphism Design Mobile Template UI Kits
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#inr8lj-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i6m04c-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#ivacfg-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#icuu9h-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#isgu13-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i80xyh-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i9l1yh-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#ip0ews-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#inxx7j-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#iau64i-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i4r6np-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;} Neumorphism is an established trend in mobile UI design at this point. It focuses on creating soft, smooth designs and subtle shadows to create a realistic 3D effect. And with its modern, minimalist aesthetic and attention to detail, it's easy to see why designers have gravitated toward this style over the past few years. To help you get started with neumorphism in your own projects, we've...

Number of Total Worldwide Registered Domains