From here the next step would be to double down on a front-end framework or library like Angular, React or Vue. Get good at one of these and just keep going deeper into it. While you do this your JS, CSS and HTML knowledge will all increase as you face different challenges.
Once you have the JS, HTML, CSS and framework/library basics down pat, you could then aim at calling some REST APIs to practice working with real-world data.
Personally, I would recommend the following approach.
- Learn some basic HTML first. Get a local page up and running with lists, tables, headers etc…
- From here you could then start by adding some basic CSS to the page. This will give you the best understanding of how sites are displayed to the user and how you can encapsulate the style from the structure of the site.
- At this point, you would begin to look at the developer tools in your browser of choice. Chrome and Firefox come with dev tools (developer tools) that can help you identify issues in your site or even apply styling on the fly so you can try things before going back and editing your source files.
- Play around with events like button clicks, hover etc… to get a feel for making your pages dynamic.
- Use the dev tools debugger to inspect your code in the browser
- Move on to forms and get used to the different input methods (checkbox, radio button, text etc…)
- Start submitting some of this form data and use the network tools in the dev tools to see what your page is doing when you submit
- Find a free API online (NASA and SpaceX have some interesting ones) and practice sending different types of requests to these (GET, POST, PUT etc..)
- Try and handle the response to these requests by updating your page
- Add asynchronous handling of these requests and put something like a Loading… message while you wait for the request to complete
It’s about this stage when you have a dynamic page working that you understand the underlying operations that are driving the page. By seeing this you can start to understand how any other web site front-end is just an expansion of this. More complex CSS, HTML and JS but essentially just more of the same.
There are other skills that I consider to be just as important as the ones mentioned above, but these are only really important once you have the basics under control.