DEV Community: Deng Beny

Do you want to learn web dev and don't know where to start?

Deng Beny — Mon, 26 Jul 2021 15:09:17 +0000

Prepare yourself mentally

Make sure you are ready mentally and prepared to be persistent and consistent in your learning.

Start with the basics

HTML for the structure and CSS to style the website. Learn these two and build a couple of projects with them, and when you have a good grip on them, learn JavaScript to make an interactive website.

Join #100daysofcodechallenge

It will help you with consistency by coding every day for 100 days straight. Do not forget to tweet about it and share your experience with the community.

Join Dev Communities

Join and learn along with new developers who have the same interest. The community would be helpful when you are stuck on a problem and can not figure it out.

Next, Learn a library or framework

Bootstrap for CSS or any equivalent library.
ReactJS or VueJs for JavaScript, one of them will do.

After this, you are pretty much a front-end developer and ready to learn back-end.

Finally

Do deliberate practice, build a lot of projects and share them with the community and get feedback. You don’t know when or where your next client would be.

Free Resources

Codecademy basic course is free.

Mozilla Docs

HTML Docs

Javascript Info

The Ghost that Hunts New Developers

Deng Beny — Thu, 26 Nov 2020 11:31:31 +0000

"I'm not ready to do it yet, or I still have more to learn, then I will start it."

I bet one of these sentences echoes in your mind whenever you want to build a project. Because of it you end up not starting thinking that your current skill is not good enough, or is not to that level.

It's right that you have a lot to learn, but it's also farthest from the truth. You don't need a vast knowledge in a particular technology to build projects in it. What you have to know is the core basics of technology.

When you start building your first, second and third, your skills will build up with each project. To be good with technology, you have to give a lot of time for practice. And what the best way than building a project that utilises most of its core features.

It was a paradox to me when I started programming. I use to doubt myself with questions such as "What feature to use if I don't know the technology well enough?" or "How can I know is the right way of solving this problem?". These questions won't fade in the background of your mind. they will keep popping up whether you're an expert or a beginner. It has nothing to do with a particular technology you're learning, but with the way we think as humans. We are doubtful by nature, everything we do we question it and worry about trivial details that hold us back.

The skill won't build up by its own and become enough. It's you who will build it up by deliberate practice, learning and building projects.

Take away

Learn the core basics.
Practice, Practice and Practice.
It's alright to know little.
Build a lot of projects as much as you can.

7 HTML attributes that you may not be using

Deng Beny — Thu, 27 Aug 2020 15:50:31 +0000

As a web designer probably there a lot of attributes that you are familiar with and you use them frequently but here are 7 attributes that you may not be using.

Contenteditable

It's a global attribute that specifies whether the content of an element is editable or not.

<p contenteditable="true">Text</p>

Download

It's belong to anchor element in which it specifies that the target will be downloaded when a user clicks on the hyperlink.

<a href="document.pdf" download> Download</a>

Hidden

Hidden belong to global attribute and as the name suggested it hide or specifies that an element is not yet, or is no longer relevant.

<p hidden>This text is hidden </p>

Multiple

It allows user to enter more than one value. it belong to input and select element.

<!-- allows you to upload multiple files -->
<input type="file" multiple>

<!-- allows you to select more than one option -->
<select multiple> 
   <option value="#">Value 1</option>
   <option value="#">Value 2</option>
   <option value="#">Value 3</option>
</select>

Poster

Belong to video element in which it specifies an image to be shown while the video is downloading or hasn't started playing.

<video controls poster="image.jpg"> ... </video>

Spellcheck

It specifies whether the element is to have its spelling and grammar checked or not.

<input type="text" spellcheck="true">
<!-- don't use it on password -->

Accept

This attribute specifies what files are supported to be uploaded.

<!-- This allows only pdf file -->
<input type="file" accept="application/pdf">

<!--This allows only images -->
<input type="file" accept="image/*">

<!-- accept="image/jpeg" allows only jpeg/jpg -->
<!-- accept="image/png" allows only png  -->