ᴄᴏᴅᴇᴡɪᴛʜ ᴛᴇᴋᴜʀ ᴀɴʙᴇꜱꜱᴀ


Гео и язык канала: Эфиопия, Английский


👨‍💻 Helping web developers access source code and personal portfolios to improve their skills and projects. Join the discussion group here @codebyion

Связанные каналы

Гео и язык канала
Эфиопия, Английский
Статистика
Фильтр публикаций


The Hidden HTML Feature

🤫 Did you know there’s a hidden HTML attribute that can make forms smarter without JavaScript?

pattern

This attribute lets you specify a regex pattern to validate user input. For example:



No need for JavaScript to check if a name contains only alphabets!

required

Make fields mandatory with this simple attribute. It ensures users can’t submit a form without filling out required fields.



Combine this with pattern for even stricter validation!

@etwebs




Check out this ludis Telegram channel! A talented web dev student sharing killer tips, resources, and projects. Perfect for beginners and pros alike!
Don't miss out – follow now and level up!

@etwebs


Free Color Palette Generators

Choosing the perfect color palette is now easier with these free tools:

Coolors: Generate palettes with one click.

Color Hunt: Curated palettes for any mood.

Adobe Color: Advanced color wheel and harmony rules.

@etwebs


Do not forget to React for More Content Like this


🎨 Free Design Inspiration for Your Next Project

Struggling with design ideas? Check these amazing sites:

Dribbble: Designs from top creatives. Visit

Awwwards: Award-winning web designs. Visit

Behance: Creative portfolios and projects. Visit

Coolors: Generate perfect color palettes. Visit

Mobbin: Mobile app design inspiration. Visit

#inspiration @etwebs


Which CSS property is used to change the text color of an element?
Опрос
  •   color
  •   font-color
  •   background-color
  •   text-color
20 голосов


10 Best Fonts for Web Projects

Typography is crucial for web design! Here’s a curated list of 10 free Google Fonts that look great on any website:

Roboto
Lato
Montserrat
Open Sans
Nunito
Poppins
Raleway
Inter
Source Sans Pro
Merriweather

👉 Link to Google Fonts
@etwebs


Dive into JavaScript for Free: Top Platforms to Get Started

1. freeCodeCamp
2. MDN Web Docs
3. JavaScript.info
4. Codecademy
5. W3Schools

@etwebs


Glowing text animation source code 👇


🚀 Unlock the Secrets of Fast Websites!

TOP 5 Web Performance Optimization Techniques
Learn the exact strategies used by top-tier websites to load in under 2 seconds!

Minify CSS & JavaScript
Reduce file sizes with tools like Terser and PostCSS.

Use Lazy Loading
Load images and videos only when they’re needed with the loading="lazy" attribute.

Implement Critical CSS
Prioritize the most important CSS to load first and defer the rest. Use tools like Critical.

Optimize Images with Modern Formats
Use formats like WebP or AVIF for higher quality at smaller sizes.

@etwebs


Building a Dynamic Background Effect

Ryan Finni shows how to create a randomized, animated icon background for any content section. - Building a Dynamic Background Effect

@etwebs


HTML Dropdown Lists with JavaScript!
An HTML Dropdown List is a powerful form control for selecting options, defined with and paired with tags.

Example:
Here's how you can create a dropdown and use JavaScript to fetch the selected value:

Apples Oranges Grapes Bananas Strawberries Get Value function getValue() {
// Fetch the selected value var value = document.getElementById('sample').value;
// Display the selected value in an alert
alert(value); }


How It Works:
Dropdown setup: Use and tags for the menu.
JavaScript function getValue(): Retrieves the selected option's value using .value and displays it in an alert.

The result looks on the video

@etwebs


Understanding the HTML
Element
The HTML
element is used to represent an extended quotation. It is a block-level element often styled to appear indented, emphasizing the quoted content.

Purpose: Marks extended quotations.
Cite Attribute: Specifies the source URL of the quotation.
Cite Element: Provides a text-based reference for the source.

Example:

The only limit to our realization of tomorrow is our doubts of today. — Franklin D. Roosevelt


I put the input and output on the image for better understanding
Do not forget to React for More Content Like this
@etwebs




🌐 Top 10 Free Hosting Platforms for Developers

1, Netlify
Perfect for static sites and JAMstack apps.
🔗 https://www.netlify.com

2,Vercel
Optimized for Next.js and serverless React apps.
🔗 https://vercel.com

3, GitHub Pages
Host your static websites straight from GitHub repositories.
🔗 https://pages.github.com

4, Firebase Hosting
Fast hosting for static and dynamic apps with built-in CDN.
🔗 https://firebase.google.com

5, Cloudflare Pages
Deploy JAMstack sites with high performance and DDoS protection.
🔗 https://pages.cloudflare.com

6, Render
Host full-stack apps with backend and database support.
🔗 https://render.com

7,Surge
Quickly publish static sites from your command line.
🔗 https://surge.sh

8, Heroku
Free tier for hosting dynamic apps with backend support.
🔗 https://www.heroku.com

9,Replit
Code, collaborate, and host small apps in one place.
🔗 https://replit.com

10, 000webhost
Free PHP/MySQL hosting with cPanel.
🔗 https://www.000webhost.com

Do not forget to React for More Content Like this
@etwebs


#Tiinyhost  Hosting for small projects

TiinyHost is a simple web hosting tool designed to quickly deploy static websites, perfect for prototypes, portfolios, and testing.

Key features & why to use it:
Allows users to deploy websites by simply uploading files.

Quick and easy publishing without complicated setup.

Ideal for designers and developers needing a quick, shareable link.

🔗Website Link

Do not forget to React for More Content Like this
@etwebs


Simple CSS Gradient Background

Gradients can add depth and interest to your designs. Here's how to create a simple linear gradient background

.gradient-bg { background: linear-gradient(to right, #ff7e5f, #feb47b); }

This creates a horizontal gradient from a warm orange to a soft peach. You can adjust the colors and direction to suit your needs. For more complex gradients, check out tools like CSS Gradient to generate the code for you.


Aspect Ratio!

Struggling to maintain perfect proportions for your images or videos? Say hello to the aspect-ratio  property

Here’s how it works: 

.container { 
  aspect-ratio: 16 / 9;
  width: 100%; 
}

Why use it?
Makes responsive design a breeze. 
No more padding hacks or manual   calculations. 
Works great for images, videos, or any block-level element. 

💡 Tip Combine aspect-ratio with object-fit  for images or videos to achieve perfect scaling.

@etwebs


Видео недоступно для предпросмотра
Смотреть в Telegram
Infinite loader source code👈
@etwebs

Показано 20 последних публикаций.