1. Establish a working environment
You can think of your work environment as an extension of the office. It is like a virtual table with all kinds of tools to make your code run.
The following are essential for newbies
Code editor : Code editors, such as Sublime Text, Brackets and notepad++, are similar to ordinary old paper notebooks, and you can enter anything you want.
In theory, you can use regular text editors, such as notepad (Windows) or TextEdit (OS X), but some code editors’ code coloring, auto-completion, and real-time preview features can make coding easier and more interactive.
Framework : A framework is a collection of code, components, and styles. They make it relatively fast and easy to generate web applications. There are CSS frameworks like Bootstrap and Foundation, and there are JavaScript frameworks like AngularJS and React.
The CSS framework is essentially a library of predefined styles and web components (such as navigation bars, footers, cards, typographic elements, and grids). The avaScript frameworks are similar, but they can meet JavaScript-specific needs. We will further introduce CSS and JavaScript later.
ResetCSS: ResetCSS is like Eric Meyer, HTML5 Docto and Yahoo! is a file that contains a set of standardized CSS styles, these styles are considered best practices and provide a consistent appearance benchmark for the page. The styles usually modified by ResetCSS are related to elements such as line height, font and title size, border spacing, and list style.
CMS : The content management system is a suite of different levels of complexity, and webmasters can easily upload, modify and manage the content/assets on their website. With the increase of website content, CMS will make your work easier
Popular CMSs include: WordPress, Joomla, Drupal, Magento and Shopify. The latter two are very suitable CMSs for e-commerce websites. In fact, you can learn more in the usability comparison between Magento and Shopify.
FTP client : File transfer protocols (FTPs) allow files to be transferred between the computer and the web server. When you explore the world of web development, there is no doubt that you need to transfer a large number of files to the server, starting with your HTML, CSS, and JS files, and ending with your pictures, music, or whatever you want to provide to your visitors .
Some popular FTP clients are: CyberDuck, Filezilla and transmission.
Browser : This may seem like a silly moment, but your choice of browser can determine many aspects of your final product. For example, Mozilla has built an excellent development kit in its Firefox Developer Edition (FDE) browser.
Chrome, Firefox, and Edge all have similar tools built in (though not as robust). Development tools can help check code used on other sites, debug code, edit styles, test responses, and more.
2. Understand these theoretical knowledge
Responsive design : One of the hottest topics in web design and development is Responsive Web Design (RWD), which refers to the waypoint to set the screen size, telling the page to default to a specific layout that is more suitable for a given size. The rise of RWD stems from stagnant web design, which is rooted in a fixed page layout that cannot respond to changes in browser width. The new practice allows for optimization of usability, which is beyond what can be achieved using fixed design models.
Mobile first : Mobile first is the principle of modern web design and is closely related to responsive web design. Mobile first suggests that you should design the mobile layout of your page first, and then design each larger format.
In theory, by following the "mobile first" approach, the experience of mobile users (which accounts for a very large number of total users) can be made more friendly. Traditionally, as the screen size becomes smaller, the website will be scaled down according to function and content. However, with the huge increase in the number of mobile users over the years, this has become the main focus of global designers.
MVP : Although they are more important in B2B than in personal projects, MVP (Minimum Viable Product) construction is an essential term. The idea behind MVP is that you build only the necessary features and avoid the features that can be saved for the second version.
As a newbie in web development, it is recommended to implement this strategy while learning. By building the most basic version you want, you will have the opportunity to explore core concepts and strategies without being subject to complicated features. As you become more familiar with development, design language and other related principles, you may want to avoid MVP building and explore new confidence.
3. Start using these languages
Web development is based on three core languages, which cover almost everything you see and use on the internet. When used alone, HTML, CSS, and JavaScript are almost useless. When combined with each other, we can see unlimited possibilities.
HTML : As a markup language, HTML is responsible for the flow and structure of the text on a web page and provides a system for marking the text for further enhancement using CSS.
CSS : Cascading style sheets are responsible for describing and defining the visual aspects of text marked up as HTML. Using CSS, you can define colors, sizes, layouts, animations and more.
JavaScript : This is currently one of the most popular and fastest-growing web languages. JavaScript is mainly used to add interactivity to web elements. The possibilities are practically unlimited.
In addition, you can use frameworks such as APICloud Studio, AVM framework, Foundation, Bootstrap, and Skeleton to supplement your learning content. These frameworks provide you with pre-built modules for you to use at will.
APICloud Studio is a full-process development tool, based on the industry's leading code editor-Vscode deep customization, can quickly build multi-terminal applications, for Android, iOS, Web, App, small programs to create applications, you can quickly compile the corresponding terminal code . It can effectively solve the headache of developers' multi-end development.
There are also many grammatical frameworks. As you become more familiar with front-end development work, you will also form your own set of theoretical systems
The AVM mentioned above is a cross-terminal high-performance JavaScript framework that is closer to a native programming experience. It provides a concise model to separate the user interface, business logic and data model of the application, which is more suitable for highly customized projects.
4. Start your work
During the development process : When you write the code that makes up a web page, you may want to see how it works so that you can see what works, what doesn’t work, and what can perform better. Although it can be done in real time, it is strongly recommended to use a local server, as this will minimize the risk.
A local server is a collection of software located on a computer that allows you to view and interact with web pages just like you are on the Internet.
After development: Once the site is completed (or mostly completed), it can be migrated from the local server to the actual server. This means paying for the server, purchasing a domain name, and using an FTP client to transfer all relevant files to the server. Once completed, anyone in the world can go to your website and see the results of your work.
Some popular hosting sites are : WordPress, WIX, GoDaddy, BlueHost, InMotion and HostGator. You can research available domain names here, and then buy them here. If you want to try something new, check out Google Domains, which is currently in beta.