How can I improve my HTML and CSS Skills?[Answered]

three dice with the words learn practice improve

There are two steps you can use in order to improve your HTML and CSS skills:

  1. Practice HTML and CSS using the knowledge you already know by building projects.
  2. Identify the gaps in your knowledge and filling them in.

HTML and CSS are languages that you can pick up fast but takes a lot of time to master. This challenge can be overcome through lots of persistence and practice. Let look at how I can help you accomplish more using these two steps.

STEP 1: Build projects to improve your skills

Building real-world projects is an effective way of gauging your understanding of the HTML CSS knowledge. The good thing is that there are a variety of projects you can build either as a novice or an expert. I have detailed some of the projects you can try out below based on your current skill level.

LEVEL 1: Build a project by following a tutorial

These are projects you build by following a video or blog post tutorial. These are really good for someone who has never built a project before. Some of these tutorials are:

  1. Learn HTML and CSS by building 3 projects.
  2. Build a Responsive Grid CSS Website Layout From Scratch.

PROS

  • You can learn about the workflow structure and planning of a complete an HTML CSS project.
  • Help you consolidate and use the knowledge you already know in a meaningful way.
  • Helps you identify the missing gaps in your knowledge.

CONS

  • There is a lot of hand-holding since you get guided step by step. However, you can overcome this by pausing the tutorial, trying out that next step and then comparing the tutorials solution to your own.
  • Some tutorials only teach one way of doing something which is limiting.

You can find 10 more project-based tutorials on HTML and CSS on my article.

LEVEL 2: Responsive Web Design Projects

Build an already predefine HTML CSS practice project
There are some developers who realised that every learner needs a project to practice as they learn. So they defined some projects that you can try out.
Some of these projects are:

  1. Build a Tribute Page [Freecodecamp]Tribute website page
  2. Build a Survey Form [Freecodecamp]
  3. Build a Product Landing Page [Freecodecamp]

You can read the complete list of 7 HTML CSS practice projects for beginners[MEDIUM].

PROS

      • You have predefined requirements that guide you on what to build.
      • You are not limited on the content that you choose to add.

    • CONS

      • Other people have built such projects so your project might not appear to be unique. You can bypass this by choosing a unique passion topic so that you can personalize the project.

    • LEVEL 3: Clone a complete website or a specific section.

    As you gain more experience, you can choose to clone a preexisting website or [steal] someone’s design on design websites. Remember you want to build your confidence in the skill to build a website not to design them. Remember, if you ever clone someone’s website, never claim you designed the website, otherwise you might get in trouble.

    Steps to cloning a website

    1. Whenever you are browsing the internet and you find a website or a webpage you like, note down its URL in one place e.g. draft email or notepad.
    2. Take a screenshot of the whole website or a specific section. I use this screenshot add-on on chrome that takes the screenshot of the whole webpage.
    3. Start building the website.

    • LEVEL 4: Build a hobby or portfolio website.

    As you start telling people that you build websites, they will ask you to show them examples of website you have built.

    There are two kinds of websites you can build upfront that can showcase your skills:

    • Portfolio website

    • A portfolio website is a website that you build so that you can easily showcase some of your best work. And since you are a web developer, is there a better way to showcase your skills other than using a website?

    • Hobby Website

    You can also create a website on your favourite hobby/ Interest.  In the website you can create content on:

    • what you have learnt.
    • resources for anyone who wants to engage in your hobby.
    • showcase what you do in your hobby(Projects, video recordings, products you create etc.)

    How to build a portfolio website

    1. Identify the purpose of the website and who is the website for.
    2. Identify and create the content for the website.
    3. Choose and adapt a design from the various free online template.
    4. Create the website and add the content.

    LEVEL 5: Design and build a website.

    At this level, you are skilled at building websites from the ground up. It is time you tried your hands at building for someone else.
    You can build a website for a business, friend or non-profit organisation. As you build this website, you will be involved in defining its users, content, and design.
    Once you are pretty good at building websites, you can also try your hand at designing websites and SEO. Who knows, you might come to love it.

    How to design & build a website

    1. Identify the kind of website you are building.
    2. Identify the different kinds of users and what they would be looking for on the website.
    3. Identify the most suitable content and design for them.( or get this content from the business or organisation).
    4. Obtain brand materials from the organisation.
    5. Get feedback from the customer during each step to ensure you are on the right track.
    6. Build the website.
    7. Get feedback from the customer during each major milestone to ensure you are on the right track.

    STEP 2: Identify and fill knowledge gaps in HTML and CSS

    As you tackle the projects, you will find yourself in situations where you don’t know how to do something. This is a good position since you can easily google and find a solution. Sometimes, you will have to copy-paste solutions. As you copy-paste the solution from online sources, always make sure you at least understand what the code does.

    Some of the common knowledge gaps that I have experienced before are:

    1. Positioning types and floats: Advanced positioning [Internetishard] & Positioning content[Shayhowe]  &  CSS floats[Internetishard].
    2. CSS selector types
    3. Cascading
    4. Browser support
    5. CSS animations

    Challenges in building your basic web development skills

    When it comes to building web projects, there are some common some roadblocks that everyone experiences. It is important to know that these challenges will be there. So once you face the challenges, persevere instead of giving up.

    Some of the common roadblocks are:

    • Finding or creating content(text, images, videos) for the website.
    • Choosing or creating a design for the website.
    • Deciding the complexity of the website.
    • Choosing the tools to use in creating the website.

    Which action step will you be taking so that you can improve your HTML  and CSS skills? Share in the comments below.

    author's bio photo

    Hi there! I am Avic Ndugu.

    I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.