ضع Javascript أسفل: تعلم HTML & CSS أولاً

هناك اتجاه متزايد في تطوير الواجهة الأمامية وهو فكرة أنه يمكنك الغوص في جافا سكريبت والنجاح. بصراحة ، للأفضل أو للأسوأ يمكنك ذلك. لكنك تقوم فقط بالبناء فوق أساس هش سيعود لعضّك.

لماذا أحتاج إلى HTML أو CSS؟

تُبنى أطر عمل واجهة المستخدم التي نعرفها اليوم مثل React و Vue فوق اللبنات الأساسية لصفحة الويب: HTML و CSS. على الرغم من أن أطر واجهة المستخدم هذه تعزز هذه الأساسيات من خلال بعض الأدوات الرائعة وجافا سكريبت ، فإن ما تقوم ببنائه هو في الأساس نفس الشيء مثل موقع Space Jam من عام 1996.

لكنني فهمت ، كتابة HTML و CSS يدويًا مؤرخة بشكل صحيح؟

افهم ما تفعله أدواتك

سيساعدك امتلاك فهم أساسي على الأقل لما يحدث تحت الغطاء بشكل كبير أثناء تطوير تطبيقاتك وتصحيحها.

ربما واجهت بعض الأشياء الغريبة في المتصفح ، مثل لماذا يقوم HTML بتحويل الكود هناك؟ باستخدام ما يلي كمثال:

 p { color: purple; }  

My Cool Page

Some cool stuff Is this still cool?

عند تحميل هذا في Chrome ، ستلاحظ بعض التغييرات ...

لماذا كل فقرتي ليست جميلة وأرجوانية؟

حسنًا ، تبين أن متصفحك مفيد ويصلح شفرتك تلقائيًا. علامة فقرة (

Learn the magic of CSS

CSS can do a whole heck of a lot these days. It’s so much more than setting a few colors, but gives you the ability to provide consistent UI patterns throughout your application.

Don’t be afraid of it! If you started in Javascript, you might be tempted to do everything there, but you’ll quickly find managing all of the real power of CSS within your JS is a pain, and frankly, unnecessary unless you’re Facebook.

What can you do? Build the Alien movie title scene with pure CSS. Grab some hover effects for your buttons. Or just animate anything!

A favorite of mine is creating a fancy Facebook-like loading animation class that will apply an animated gradient background to anything you add it to:

.loading { background: linear-gradient(90deg, #eff1f1 30%, #f7f8f8 50%, #eff1f1 70%); background-size: 400%; animation: loading 1.2s ease-in-out infinite; } @keyframes loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

Crack open a codepen and try it yourself!

Make your search results relevant

Search engines do their best to figure out how the content you write is relevant to users searching for it. But how you write your HTML makes a difference with helping them determine that value. A common mistake I see is using Heading elements incorrectly or simply not using them at all.

All

My

Content

Is

Important

Consider the outline of this blog post:

- Put Down the Javascript - Learn HTML & CSS - Why do I need HTML or CSS? - Understand what Your tools are doing - Learn the magic of CSS ...

“Learn the magic of CSS” is not the key takeaway from the page, so I wouldn’t want to feature that as the most important. The title of the post however, “Put Down the Javascript — Learn HTML & CSS”, reflects the overall story, making it the most important, so I would want to make it #1.

So with my HTML, I would want to make it look something more like:

Put Down the Javascript - Learn HTML & CSS

Why do I need HTML or CSS?

Understand what Your tools are doing

Put Down the JS - Learn HTML & CSS/h2>

يتيح ذلك لـ Google و Bing وجميع محركات البحث الأخرى معرفة بالضبط ما يجب أن يكون الجزء الأكثر أهمية في الصفحة والمساعدة في تحديد التسلسل الهرمي العام.

دفع إمكانية الوصول من خلال التنمية الشاملة

من خلال عدم الترميز بطريقة مسؤولة ، فإننا نستبعد تلقائيًا الأشخاص من الوصول إلى الموقع الذي نعمل بجد لبناءه. غالبًا ما يهتم هؤلاء الأشخاص بما يتم بناؤه بنفس القدر إن لم يكن أكثر منك أنا وأنا.

من خلال القيام ببعض الواجبات المنزلية في المرة الأولى وقضاء ثانية إضافية في التفكير فيما نكتبه ، يمكننا أن نكون شاملين لجميع الأصدقاء الذين يزورون مواقعنا.

خذ قائمة تنقل بسيطة تظهر بشكل شائع في معظم مواقع الويب اليوم. قد تميل إلى كتابة بعض divالكلمات لأنها تعمل بشكل صحيح؟

 Link 1 Link 2 Link 3 

المشكلة هي أنه ليس من السهل على برامج قراءة الشاشة التقاطها. لإصلاح ذلك ، يمكنك / تقنيًا / كتابة أقل من HTML ( div3 أحرف ulو li2؟).


    
  • Link 1
  • Link 2
  • Link 3

Taking it a step further, if this is your navigation menu, wrap it in an HTML 5 navigation element () and users will now be able to directly access the menu.

Check out The A11y Project for more good tips on accessibility.

Simplify your code, embrace native functionality

You would be surprised how much functionality exists natively in modern browsers, with more browser support than you probably need (sorry to those of you who still support IE9).

With some basic HTML, you can build a text input that has searchable, autocomplete-like text in a dropdown:

My Favorite Color      

Taking advantage of CSS pseudo selectors, we can dynamically style a checkbox-type element depending on if it’s checked:

 .is-checked { display: none; } #my-checkbox:checked + span .is-checked { display: inline; } #my-checkbox:checked + span .not-checked { display: none; }     Not Checked Checked  

This is Your Craft, Pay Attention to It

أراهن أن غالبية الأشخاص الذين يقرؤون هذا يفعلون ذلك لأنهم يهتمون بالكود الخاص بهم وهم متحمسون للغاية لما يفعلونه. تمامًا مثل أي حرفة أخرى جاءت قبل التطوير ، فإن ممارسة الأساسيات والتركيز عليها سيعززان قدرتك كمطور. مكافأة ، ستحصل على فوز سهل من خلال المساعدة في أن تكون أكثر شمولاً في عملك وجذب المزيد من الأشخاص إلى تطبيقك!

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ ️ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية

نُشر في الأصل على //www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css