EWTT
Build and deploy your portfolio
This course will teach you to build and deploy a neat portfolio for yourself. Perfect to showcase your skills and experience to potential employers. You also get $100 in free credits from DigitalOcean!
Pexels
The best free stock photos, royalty free images & videos shared by creators.
W3Schools
W3Schools is a freemium educational website for learning coding online. Developed in 1998, its name is derived from the World Wide Web. W3Schools offers courses covering all aspects of web development. It is run by Refsnes Data in Norway
Adobe Photoshop
Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc. for Windows and macOS. It was originally created in 1988 by Thomas and John Knoll. Since then, the software has become the industry standard not only in raster graphics editing, but in digital art as a whole.
Adobe Dreamweaver
Adobe Dreamweaver is a proprietary web development tool from Adobe Inc. It was created by Macromedia in 1997 and developed by them until Macromedia was acquired by Adobe Systems in 2005. Adobe Dreamweaver is available for the macOS and Windows operating systems.
Coolors
The super fast color schemes generator! Create the perfect palette or get inspired by thousands of beautiful color schemes.
Bootstrap
Build fast, responsive sites with Bootstrap! Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
W3C Css Validator
CSS Validation Service! Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.
W3C HTML Validator
Markup Validation Service! Check the markup (HTML, XHTML, …) of Web documents
WAVE Web Accessibility Evaluation Tool
WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. Our philosophy is to focus on issues that we know impact end users, facilitate human evaluation, and to educate about web accessibility.
Web Development Trends
Web development trends change to a greater or lesser extent every single year. Decision-makers need to be familiar with them for at least two reasons: sustaining ever-rising competition and sharpening knowledge.
Web Design Standards and Best Practices
Do we have web design standards? Well, web design as a visual representation does not have clear-cut-out standards for professionals to follow, unlike the coding standards we learned in the first week of this course that was agreed upon by W3C.
W3Schools: Responsive Web Design
What is Responsive Web Design?
Responsive Web Design makes your web page look good on all devices; it uses only HTML and CSS and is not a program or JavaScript.
Creating a Mobile-First Responsive Web Design
As the web landscape becomes increasingly complex, it's becoming essential to deliver solid web experiences to a growing number of contexts. Thankfully, responsive web design gives web creators some tools for making layouts that respond to any screen size. We'll use fluid grids, flexible images, and media queries to get the design looking great regardless of the size of the device's screen dimensions.
Ideal Mobile Touchscreen Target Sizes
When designing mobile interfaces, it's best to make your targets big so that they're easy for users to tap. But exactly how big should you make them give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.
How to Make Dark Mode for Websites
Light-on-dark color scheme, also called black mode, dark mode, dark theme, or night mode. In this mode, light-colored text, icons are displayed on a dark-colored background. In short, a web page's contents are displayed on a dark background. Dark-mode is better for your eyes in low-light surroundings. Dark mode aims to increase readability by reducing the light emitted by device screens while maintaining the minimum color contrast ratios. Switching to dark mode allows website users to move to an eye-friendly and resource-saving design whenever they want.
Designing for dark mode
Dark mode has been around more extended than you might think. The world's first computers used dark mode by default because illuminating screen technology wasn't efficient enough to light up an entire screen without burning out. Today, dark mode user interface (UI) has become a common preference for web and app users alike. Dark theme design has become a popular style, especially in the tech industry.
Add dark mode to your website
Dark mode has become incredibly popular in the last year, and all popular apps nowadays offer a toggle to turn it on. In this short tutorial, we will look at how to add support for dark mode in your website in different ways: first with just CSS and lastly with a toggle built with JavaScript.
Dark Mode Extention for Chrome
Dark Mode is an extension that helps you quickly turn the screen (browser) to dark at night. Toolbar button serves as an ON|OFF switch which enables you to easily and quickly turn the extension ON or OFF
How to build a PWA from scratch
Progressive web apps are a way to bring that native app feeling to a traditional web app. With PWAs, we can enhance our website with mobile app features which increase usability and offer a great user experience.
A Simple Progressive Web App Tutorial
If you're not familiar with Progressive Web Apps, the basic idea is to use browser technologies to build a web application that works offline and has the look and feel of a native application. This tutorial will show you how to use a manifest and service workers to create just about the most straightforward app possible, one that works without an internet connection and can be added to your home screen. View the code at Hello PWA on GitHub or the files at Hello PWA on GitHub (files)
10 Code Snippets for Creating Text Masking Effects
Text masking has been quite a popular design trend. Developers experimented with various layers (the most popular was, of course, the video background) and different typefaces. Today we are witnessing a bit of decline in usage because there are many other options. However, it is still impressive and lets you create something incredible effortlessly. View the ocean code at CodePen: SVG Text Mask with Video Fill
Introduction to Text Masking on the Web
Text masking (also known as "knockout text") is a technique that allows us to display images, gradients, patterns, and even videos inside the shape of a piece of text. There are a few ways of achieving this effect, and in our new short course, Introduction to Text Masking on the Web, you'll learn five of them.
Pure CSS Pelling Sticky
The sticky is made from two separate circles (front and back), which are moved and masked inversely on: hover (by the circle wrapper elements). A rotation is also applied to mimic realistic motion. Gradients are used to the front and back to give the illusion of depth.
SVG on the Web! A Practical Guide
We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos, and illustrations on the web — SVG. Scalable Vector Graphics can look crisp at all screen resolutions, have super small file sizes, and be easily edited and modified.
W3Schools - SVG Tutorial
What is SVG?
SVG stands for Scalable Vector Graphics. It is used to define vector-based graphics for the Web. SVG defines the graphics in XML format. Every element and every attribute in SVG files can be animated. Also, SVG integrates with other W3C standards such as the DOM and XSL.
AFrame Fractal Component Audio Visualizer Circle
An AFrame Fractal Component demo. It is a component that allows you to graph points in 3D space that become audio responsive, producing stunning visuals. Inspired by a videogame called The Polynomial.
A-Frame
A web framework for building 3D/AR/VR experiences. Make 3D worlds with HTML and Entity-Component. For Quest, Rift, WMR, SteamVR, mobile, desktop.
A-Frame Introduction
A-Frame can be developed from a plain HTML file without installing anything. A great way to try out A-Frame is to remix the starter example on Glitch, an online code editor that instantly hosts and deploys for free. Alternatively, create a .html file and include A-Frame at the head of the webpage.
WebVR
WebVR has been replaced by the WebXR Device API, which has more comprehensive support, more features, better performance, and VR and AR support. This page is preserved as a historical reference, but its information is no longer relevant, and you almost certainly want to be looking at immersiveweb.dev instead!
Getting started with WebVR
WebVR is a JavaScript API for creating 3D virtual reality experiences in the browser. This requires low latency, a high frame rate, and excellent performance. It aims to make it easier for anyone to get into VR experiences by lowering the barriers to entry.
An Introduction to WebVR
We will continue exploring A-Frame's core foundations in this lesson, using the same file created in the previous lesson. A Rotation transform is a 3D object (a mesh or a model) made out of vertices, edges, and faces.
Building in WebVR makes VR Easy
WebVR is not a new thing — people have been talking about using WebGL to render interactive 3D graphics in the browser for over half a decade in various implementations.
Getting Started with WebVR
In this guide, we will be exploring the WebVR APIs and using them to enhance a simple WebGL scene built with Three.js. However, for production work, you may want to start with existing solutions, like WebVR Boilerplate. If you're new to Three.js, you can use this handy starting guide. The community is also highly supportive, so definitely give them a shout if you get stuck.
W3Schools - How TO - Social Login Form
Learn how to create a social media login form with CSS.
W3Schools - How TO - Social Media Buttons
Learn how to style social media buttons with CSS.
W3Schools - How TO - Sticky Social Bar
Learn how to create a fixed/sticky social media icon bar with CSS.
W3Schools - Social Media Template
Learn how to create a Social Media Template.
Free Website Tool for Social Media
AddThis is known for our beautifully simple share buttons. But we also offer a full suite of website tools like list builder, link promotion, and recommended posts, all for free!
Why Your Business Should Focus on Social Media
Online marketing has gained so much momentum that it has already shoved traditional means of marketing out the window. Yes, several businesses still invest in print, television, and radio advertisements, but we cannot deny the difference in the number of leads generated and converted when compared to results of online efforts such as social media ads (in FB, Twitter, Instagram, etc.), organic search, paid search, and more. With online marketing at its peak, social media marketing has become the best online marketing strategy.
How to Use Social Media for Small Business
If you have a business, you likely spend a lot of your time trying to dig up the latest social media marketing tips. And for a good reason. There are now 4.2 billion active social media users—almost twice as many as there were just five years ago. Those users spend an average of 2 hours and 25 minutes on social channels every day. Those nearly 2.5 hours offer an incredible opportunity for businesses to build brand awareness, develop customer relationships, and even make sales directly within social platforms
How to Add Social Media Sharing to Webpages
Want to quickly add buttons or links to your webpage that will let users share your content? The AddThis widget is a simple and easy way to do this. It will also allow you to track the analytics of the shares from your dashboard.
Top Social Media Tools You Need to Use in 2021
The goal of a social media tool is to save you time while getting similar — or better — results than you could without it. Look for social media tools that automate a process, but make sure the process still happens correctly since some shortcuts might be too fast and won't focus on quality.
Meta Name Robots Tag
How do you explain to a spider of a search engine you only want it to index just the first page of your website or that it is allowed to index the whole website? You use a specific HTML meta-tag called the meta robots tag. There are two main types of robots meta directives: the meta robots tag and the x-robots-tag. Any parameter used in a meta robots tag can also be specified in an x–robots–tag.
meta name=robots content=index, follow
If Google doesn't find a meta robots tag, it will index the web page and follow all its links. You will find many websites that use the code below, and it indicates the webmaster doesn't understand basic SEO because it's the default: meta name="robots" content=" index, follow."
10 Most Important Meta Tags You Need to Know for SEO
In SEO, sometimes, we tend to focus on one aspect of optimization efforts more than others. Link building is often touted as the "single most important thing to optimize." Instead, we need to focus on a comprehensive SEO strategy. Part of that strategy includes using HTML meta tags – a crucial component for SEO success. Using the correct meta tags the right way is all about communicating to the search engines: What your page is about, How to read it, and Who should see it.
What I gained in LP4 resources is the knowledge of the resources and tools everyone share. I find some new tools like (Mock Flow), or how to see if your site is (Mobile-Friendly).(How to plan a website in 7 steps) or the(Trends of 21 modern web design trends for 2021).
When it comes to the tools, they are convenient when you need to use something on the fly, or maybe you need an idea from a tool, or when people share resources, they come in handy for ideas.
I saved all the links people shared if they were valuable to my learning. I had already marked some stuff, but it is an excellent refresher on what I have learned in Web Design over the past two years. In this learning plan, I also found some new resources and tools that other people had that I didn't know about, which was an excellent resource. It was a great insight to see what other people use for tools or resources, but sometimes I didn't understand what some people were sharing when it came to Web Design, but I think everyone's view is different when it comes to design.
I also found some excellent links if you were working from or from what we learned in the previous class in Web Design. Over the past two years, I have saved countless web links from Web Design, and with learning plan four, I found some valuable resources and tools as well when it came to learning. This is an excellent learning plan because I got to save and share useful sources from others I may have missed or didn't know about with Web Design.