After the success of the work of Web code confession 2018. Today, I have added a Profile page at the request of a member. I still use the familiar BS4, Angular Js, Javascript, HTML5 and CSS3 to write.
| Join the channel Telegram belong to AnonyViet 👉 Link 👈 |
About Profile Page
A page that introduces yourself and displays contact information to others through the website. Anyone wants to introduce themselves to friends, colleagues or partners in a thoughtful, professional and impressive way.
Therefore, if you own a unique Profile page, other people will be impressed and appreciate you. Show that you are a fairly professional and reliable partner. If you make a sketchy self-introduction page, will people dare to trust you?
What’s special about this Profile page?
The page is heavily applied Bootstrap 4 and Angular Js. Ensure good support for cross-platform display – compatible with all devices including mobile. Therefore, it will increase the friendliness of the website and bring a professional feeling.
Display on computer
Display on mobile
Compatible both on Ipad
The interface and layout are carefully arranged by me. Colors and Icons are carefully chosen by me. Bringing a Material design feeling, more modern and professional.
In addition, the Scroll Action, Draw vector effects are applied appropriately to create gentle movements. No inconvenience to the user.
Demo video
Above is a video of actual experience after uploading to my host. Now, I will show you how to edit your code right in the section below.
Note
Because last time some of you took your code to share and bring it to trade and do business. So this time I will compress the code and use Angular JS to bind the data. This will mess up the display a bit at first, but not much.
Instructions for editing Source Profile Web page
Before editing the web code, I hope you can meet the necessary requirements below.
- Prepare a necessary web code editing software – I use Sublime Text 3.
- Know how to use Ctrl + F to search web code.
- Basic knowledge of HTML.
- Know the difference between .jpg and .png images.
Instructions for editing web code
First you download and extract (extract) you will see a bunch of files like the image below. If you have any questions, please contact me via Facebook fb.com/minhthong.lu.58
- img: folder containing images used in the website.
- Javascript: the directory that contains all the Javascript code of the website.
- index.html: The display page of the website.
- main.css: file containing the website’s css code.
You go to the Javascript folder and open the nlar.js file with a code editor. This is the file containing the Angular js web code and all the text content displayed on the website.
A lot of text content displayed on the website I write here. You will adjust the content in quotes “” to the content you want.
Open the file index.html
However, because of the name Lu Minh Thong, I had to Charming the word out to do the effect. So if you want to change it, you have to go to index.html and edit it.
Ctrl + F to find the word Lu Minh Thong and change it to your name.
Edit image
In the img folder, I have two pictures story1.jpg and story2.png to make two images of articles on the website.
You download the image you like and save it in the img folder. Then, go to the index.html file and press Ctrl + F and find the same way as above. Then edit the image name to the image you want.
Remember to skip the ad to support me!
Note: If Upload to host fails to run, rename the Javascript folder to javascript (lowercase j).
It is done. Also hope you don’t change anything more to avoid code damage, code damage. If you have any questions, please contact us on facebook: fb.com/minhthong.lu.58
Good luck
Lmint.
