4 important things for self-taught web design beginners

October 4, 2022 26hotness 0likes 0comments

You are self learn Web design but don't know which route is correct? And also not oriented to start learning from scratch. In fact, there are tons of SEO resources out there waiting for you to discover. For now, all you need are the basics of website development – ​​creating a solid foundation for future growth. Today's article, with HOSTAGY, learn from AZ important things for beginners to learn to make websites.

Where to start web design?

To become a website developer, you need to master the following important steps.

Steps to learn web development platform

  • Platform: How the website works, back end, front-end and how to use the code editor.
  • Platform: JavaScript, HTML, CSS,..
  • Tools: Build tools, version control, package manager, etc.
  • Additional front-end: Sass, JavaScript framework, responsive design, etc.
  • Back-end platform: Server, programming languagedatabase,…

Learn the steps to learn web development (infographic)

Here is an extremely useful infographic that will help you overview all the steps taken in the process of learning website development when you are just starting out.

Learn Web Design Online

Learn Web Design Online

A little bit about web development

First, you should start doing the actual coding, first let's see some general information about what is website development?, how the website works properly, details the difference. Distinguish between Backend, Parcel and use code editor.

What do I have to do to get websites to work?

The basic level of all websites is the server, more specifically a bunch of files stored on the computer. This server will be connected to the internet. Next, you can load your website through browsers such as Chrome, Firefox, Coc Coc or Safari on your mobile devices or computers. In this situation your web browsers are called clients.

So, at the moment when you access the internet, someone will receive and download data (eg football images) from the server server, as well as send data packets back to the server (downloaded images). Messi) between the client and the server is to be connected by the internet.

Everything people can access in the browser is what website developers have built. For example, websites and small business blogs are simple, for web applications, social networking sites like AirBnb, Pinterest, Facebook, Twitter, etc. are extremely complex.

Compare frontend and backend?

Compare backend and frontend

Compare backend and frontend

In website development, the terms web backend, frontend and full-stack are what describe which part of the intimate relationship between the server and the client you are working with.

The frontend of a website is in fact the part of the website that interacts with the user. On your website, everything you see when navigating the Internet, from colors and fonts to menu bars and sliders, is a combination of HTML, CSS, and JavaScript and is controlled by the user's computer browser.

The backend consists of three components: the server, the database, and the applications. In case you book a concert ticket or a flight, you will open a corresponding supplier website and start interacting with the frontend. Once you have finished entering that information, the application will proceed to save the information to a database created on the server. A clearer understanding is that the database is like an Excel spreadsheet with a huge capacity on the server, you are accessing it in Ho Chi Minh City but in fact your server is located somewhere in the US.

Use the code editor

When you learn web design, coding tool Supporting you throughout the web coding process is the code editor or integrated development environment (IDE). These tools help you write and the code that will make up your website.

Currently, the most popular code editor is VS Code. VS code is a super lightweight version of Visual Studio, an IDE developed by Microsoft. Fast, lightweight, easy to use and completely free, themes and widgets you can customize according to your needs. Other popular editors are Sublime Text, Vim, Atom, Notepad++, etc.

Support tools for self-study website design

Some tools to support you for self-learning professional website design

Package Managers

Package Manager abbreviated as PM is a collection of software and online tools. These tools are used for the purpose of managing and automating the process of installing, configuring, installing and removing libraries, software (apps), packages, etc. Most PMs are software. of open source. With each software is called a package (a package). Package will be written by someone else, your job is to install and use in your projects.

The popular PM used by many people is npm (Node Package Manager). Besides, you can also use the Yarn manager. Actually both are quality PMs, but in case you are new it is easier to start with npm.

Build Tools – Build Tools

User tools and modular packages like Parcel, Webpack, Gulp, etc. are another essential part of the Frontend workflow. These tools are at a basic level just running tasks and processing files. Besides, you can use it for purpose to transpile your ES6 JavaScript files down to ES5 for better browser support, compile your Sass files into CSS, run local web server and many other effects. other useful services.

  • Parcel is a newer package than Webpack, but it's preconfigured, so you can get it up and running in just a few minutes. Plus, you don't have to worry too much about configuring everything yourself.
  • One disadvantage of Webpack is that your computer's configuration must be really strong, and this makes it difficult for beginners. Webpack is a super powerful Package that can do anything. They are used a lot in JavaScript IDEs, especially with JavaScript frameworks.
  • Gulp, technically a task runner, has a set of npm packages that you can use to process and compile your files.

Version Control Toolkit – Version Control

Version Control Toolkit - Version Control is a collection of tools to help you track changes and changes of the entire program structure (from code files to video files, images, text... ). With Version Controls, you can create multiple versions and back up previous changes in case you make a mistake. Version control can be called an infinite repository for projects and helps you when you make a mistake. The most popular Version Control source code system is called Git. Using Git, a user can store all his change history and files called a repository. GitHub is a company owned by Microsoft with the mission of implementing online hosting.

Skills required to learn web design online

Visual Design

Knowledge is not enough to become a professional website designer. Besides knowledge, it is also very important to have a visual design focused on digital products. In all of these cases, the main design principles are what a website looks like to the user. Covers simple issues such as scale to typography, grids to color systems.

User Experience – UX

The full meaning of UX is user experience (translated as user experience), a simple way for people to feel (calm, happy or frustrated,…) when they interact on a website. A simpler way of understanding UX is to approach your designs as a user. The first is how you can design a professional website that meets the needs of users. To do that, your job is to research your user needs and create a profile of your virtual ideal user. From there, you can arrange the content, pages with the site map so that it is reasonable.

User experience

User experience

Design Software

Any design profession, to get the job done, your job is to use the right tools. Designing a website, you can do the design right on the web browser, but it doesn't have to be professional. Using tools like Adobe Illustrator, Photoshop, Sketch, etc. will create important parts of the work such as design (logos and images), create mockups and of course modify and enhance quality. Picture.

Tips to learn effective website design

  • Don't try to learn everything at once. You should choose a skill to learn at a given time.
  • Just watching a video course or reading a book won't be enough to turn you into an expert. Learning the theory is only the first step. Building real websites and projects (even just a demo for yourself) will make your learning really effective.
  • Learning web design is a long journey. You've probably "heard" about people going from zero to a job Professional web design in just 3 months.
  • Don't "jump" from one tutorial to another. As you study, you can browse through different resources to see which one you like best. But again, try to pick one.

Hope HOSTAGY's sharing about the essentials learn web design, you can give the best direction, decisions for yourself how to start learning. With a detailed learning path, support tools, and design tips will help you have a perfect long-term plan and goal and become a professional web designer in the future.

See more: https://hostagy.vn/top-10-khoa-hoc-thiet-ke-web-uy-tin-o-tphcm/

Source link


This person is a lazy dog and has left nothing