Create a Responsive Mini Portfolio Website Design Using #HTML #CSS & #JavaScript



💎 Channel: @htmlcss_channels

Learn Advanced #HTML and #CSS Concepts

؛HTML و CSS ابتدایی یک شروع عالی برای توسعه وب پیشانی است. با این حال شما باید در مورد HTML معنایی، متغیرها در CSS، توابع و نحوه به روز ماندن با همه این تغییرات بیاموزید.

این دوره برخی از بخش های پیشرفته و کمتر مورد بحث HTML را پوشش می دهد، از جمله:


- Semantic HTML and why it is required
- CSS3 functions
- CSS3 variables
- Importance of meta tags
- Media queries in CSS
- How to make websites responsive and work across multiple screen sizes
- Introduction to animations with CSS

تمرینات عملی تعاملی را نیز در طول مسیر خواهید یافت که به شما در یادگیری از طریق انجام دادن کمک می کند.



💎 Channel: @htmlcss_channels

Social buttons [Border rotation]


https://codepen.io/OfigenusMaximus/pen/gOZGeKw


#button #animation


با  ری اکشن بهمون انرژی بدید❤️

💎 Channel: @htmlcss_channels

🖥 reveal.js - open-source framework for creating HTML presentations

The framework has a powerful set of features, including Markdown support, the ability to create animations, PDF export, presenter notes, support for LaTeX layout, syntax highlighting code and a convenient API.


🟡 An example of such a presentation
🖥 GitHub



💎 Channel: @htmlcss_channels

HTML & CSS & JS


💎 Channel: @htmlcss_channels

💎 Channel: @htmlcss_channels

🔊 Voice Recognition in JS

The Web Speech API allows interaction with voice interfaces in your web applications. It consists of two parts: SpeechSynthesis (Text-to-Speech) and SpeechRecognition (Asynchronous Speech Recognition).

<h2>Voice Recognition</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Record</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "en-US";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Error:", event.error);};
  recognition.start();});

Animated Rings | HTML CSS



💎 Channel: @htmlcss_channels

HTML & CSS



💎 Channel: @htmlcss_channels

HTML & CSS



💎 Channel: @htmlcss_channels

How to Create Responsive Registration Form in #HTML & #CSS


Code : link



💎 Channel: @htmlcss_channels

#HTML Input Types - Explained with Examples

Enhance form functionality with HTML input types! Explore examples for text, radio, checkbox, and more, mastering diverse elements for dynamic user interactions


https://morioh.com/a/166ec4d08712/html-input-types-explained-with-examples



💎 Channel: @htmlcss_channels

میتونید با انجام چالش های این وبسایت که از سطح مبتدی تا پشرفته طراحی شده تمرین کنید و توی فرانت حرفه ای تر شوید

https://frontendmentor.io/




#معرفی_سایت


💎 Channel: @htmlcss_channels

Make a Responsive Search Bar in #HTML #CSS & #JavaScript


Code



💎 Channel: @htmlcss_channels

Rings and Sphere | #HTML #CSS #JavaScript




💎 Channel: @htmlcss_channels

دوره آموزش react js (مقدماتی تا پیشرفته) : ری اکت جی اس به زبان ساده اما اصولی


منبع : link
➖➖🔻➖➖
📌اگه تازه شروع به یادگیری طراحی سایت کردید این ویدیو ها رو ببینید ( به زبان فارسیه)

🌟آموزش html از صفر
https://t.me/htmlcss_channels/391

🌟آموزش Css از صفر
https://t.me/htmlcss_channels/391

🌟آموزش جاوااسکریپت از صفر
https://t.me/htmlcss_channels/402

#JavaScript
#html
#css
#ReactJS

💎 Channel: @htmlcss_channels