DEV Community

Cover image for The importance of the basics...
Anibal Cuevas
Anibal Cuevas

Posted on

2 1

The importance of the basics...

WebDev beginners..

So you learned HTML, CSS/JS and now you’re ready to move on to a framework. Most frameworks are building on top of basics, the better you understand them the easier you can understand the framework. The mistake I see most beginners make is moving on way too fast! They never seem to really grasp the basics.

Most of the time we breeze through the tutorial and we think that we know how to implement these things. We are fixated on finishing the tutorial instead of understanding the CONCEPTS that will help you build the same project, without the help of a video tutorial!

So how do I understand the basics better? Everyone says to build projects but what should you actually build? In order to build confidence you start with the from the ground up.

HTML

  • Don’t focus on knowing all the tags, just the most important ones!

  • Build boiler plates

  • Learn HOW to nest tags and WHY

  • Build Navbars! I used to build 3 Navbars a day in order for my mind to understand nesting better. Code everyday!

  • Learn keyboard shorcuts, learn about containers/divs and create multiple each day.

CSS

  • CSS is tricky, stick to plain CSS and don’t use any frameworks.

  • Learn Flexbox and grid. Learn these Separately!

  • For Flexbox, add to the 3 Navbars a day! Use Flexbox for layout. Once you understand flexbox and can make Navbars easily, move on.

  • For Grid, make a common photo grid 3x a day! Simple 10 minute project will help install the basics of grid.

  • Mix both grid and flexbox! Once you can make navbars and photo grids in your sleep, then move on to FULL PAGE LAYOUTS! Start creating simple one page website layouts. Make 3x each day.

  • Make a simple one page custom portfolio website. Using only what you know now, create a simple portfolio website. Implement what you learned and make mistakes.

  • The next day, recreate the portfolio website and add an additional page, like an about me.

By this time you should not only have a solid foundation on HTML/CSS but you’ll have real practice that your brain has already implemented as deep knowledge. Practice everyday! Don’t THINK that you know how to do it, go out and DO IT!!

Will continue with Javascript tomorrow..

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more