Introduction to Mobile Web Development: Perfectly Implementing Figma Designs with Javascript

Implement a mobile website using HTML/CSS and Javascript by referring to Figma design. Analyze mobile design to implement a website that is easy to maintain.

This course can be learned more easily if you have basic knowledge of HTML, CSS, and Javascript.

Please check the links below for learning about each part.

• HTML Basics: https://inf.run/DL3EM

• CSS Basics: https://inf.run/h8H9G

• Flexible layout:
  https://youtu.be/_PSy66fkQ7U
  https://youtu.be/N27SvfJMXMs

  
  

• Javascript Basics: https://inf.run/mYma8

This course is based on the concept of creating a portfolio for employment purposes.

This course introduces the process of creating a mobile-only website.

When you access a completed webpage on a PC, the page is displayed within a mobile mockup. At this time, javascript is used to determine whether the device accessing it is a mobile device.

.

In practice, instead of creating a mobile mockup like this, the entire screen is utilized or implemented responsively. If you are curious about implementing a responsive web page, please refer to the lecture at https://inf.run/CZ1az .

If the connected device is a mobile device, the mockup disappears and only the content is optimized for that device and displayed. This article introduces a method to implement an adaptive mobile website.

This is the file structure of the finished version.

When accessed via PC, the index.html in the root folder is opened to display the contents in the mobile mockup, and when accessed via mobile, the index.html in the mobile folder, not the root folder, is accessed.

• Install required plugins

  • Export Original Images

  • Photoroom - AI and Background Remove

  • Font Scanner

Figma designs for reference

Complete the page below by referencing the Figma design.

• Intro page

• Login-Sign up selection page

• log in

• join the membership

• Product Home

• Product Details Page

• Shopping Cart

• My Page

Introducing the main learning content.

📒 Intro Page

Detecting mobile devices

You will learn how to use javascript to distinguish between user devices and redirect them to a mockup or mobile-specific page based on their device. You will learn how to do this by checking the unique property navigator.userAgent value of the browser the user is using.

Utilizing Swiper JS parameters

Implement automatic slides using swiper.js, the most widely used representative javascript library, and change the style of the pager, which is provided as a circle by default.

📒 Login - Sign up section page

Specify multiple background images for one element and position them so that they match the design.

📒 Log in, Sign up

Use linear-gradient to specify the background of the page header. Check the background property in the design to create the style.

Among input elements, checkbox cannot change the browser's unique style. Elements that cannot be changed should disappear from the screen and styles should be written to other elements to match the design.

📒 Product Home Page

Implement numeric counts for notification windows and shopping cart icons using user properties.

Implement animation of moving highlight line when clicked using CSS and Javascript.

Click the Grid View button to change the product layout, and click the Add to Wishlist button to change the color.

Click the button on the right to display My Page

📒 Product Details Page

When you change the star rating, it will be displayed on the screen, change the product quantity, and select the size.

📒 Shopping Cart Page

You can change the quantity of items in your shopping cart, and delete them. Finally, when you click the Checkout button, payment options will appear.

📒 Finishing

This course is not a course to implement an actual shopping mall. As a web publisher, this is a course to create only the frame of the final screen by referring to the design. So, when you enter information in the login and press the submit button, in practice, you should implement a process to verify the information you entered, check if it matches the database server, and then move to the main page, but in this lecture, it was temporarily connected as the value of the action attribute.

Please note that since this is a static page implemented only with HTML, CSS, and Javascript, all functions such as login, sign-up, adding to cart, deleting, and payment are written only at the level of linking pages.

In publisher practice, there is no need to do work that connects input from a form. A front-end developer or back-end developer completes the work of a web publisher by writing a DB connection and server-side script.

If you are curious about the process of web publishing->frontend->backend, please refer to the bulletin board or shopping mall implementation video on my YouTube channel.

Communication window (survey, 1:1 open chat room) ✒

Students can provide their opinions and questions at any time through the Google survey and 1:1 open chat room introduced in the What's New section.