Web development essentially consists of two paradigms: frontend and backend development.

Frontend (client-side) development

It is the program that runs on the browser and deals with the user interface/display on the user’s machine. Components that can be seen by the user and the functions with which the user interacts come under client-side dev.

HTML and CSS are the two main languages when it comes to frontend dev, no website can exist without using them. HTML describes the structure of the webpage and CSS is used to define styles for the page. Thus, every web developer (frontend or backend alike) must have a basic understanding of these.

A good starting point for learning frontend dev is:

The W3Schools documentation is also a handy reference guide.

Now that you’re comfortable with HTML and CSS, you can introduce yourself to JavaScript. JavaScript is the scripting language that allows you to implement complex features on your web pages, enabling you to create dynamically updating content, add animations, control media, and a lot of other stuff. You can refer to MDN's in-depth guide or check out freeCodeCamp's 134-part course.

Another important aspect of frontend web development is responsive web design. Responsive web design, when simply put, is defining styles for the web page such that it automatically resizes components based on device sizes, thereby not diminishing the website aesthetic on any device. The MDN and Google Developers docs are good resources for learning responsive design.

While writing vanilla CSS is appreciated, it often takes a lot of time and effort to implement responsive designs and define styles for each element. There are many open-source CSS frameworks available which allow you to customize their styles for your needs and using their grid system also makes your website responsive. Bootstrap, Materialize and Tailwind are some of the common ones.

The last skill for a frontend developer is knowing a JavaScript UI framework. JavaScript UI frameworks are more adaptable for designing and customizing websites and are also easier and smoother to use. Facebook’s React.js and Evan You’s Vue.js are the most popular frameworks right now. Svelte is also a rising framework due to its simplicity The best guide to these is the official tutorials/docs which are on their websites themselves. You can also refer to the following tutorials -

  1. React JS
  2. Svelte
  3. Vue.js

Some examples

These are some websites that have really impressive UI/UX. You may take inspiration from these but not blatantly copy the exact structure. Always express your creativity while building frontend designs.