Building modern lawyer landing page using HTML, CSS, JS from Scratch (Fully Responsive).
Today, we're starting the process of converting to HTML/CSS/JS version of our Modern Lawyer homepage • FIGMA Tutorial - How to Design a Uniq... , which we had previously designed in Figma.
🎉 👋 Visit my website- https://freebootstrap.net
-------------------------------------------------------------------------------
🖤 Get the Source Code
https://www.buymeacoffee.com/joefreyc...
💙 Get Source Code With PayPal
https://ko-fi.com/s/9cf6edc120
-------------------------------------------------------------------------------
🔔 Subscribe Now!
/ @joefreycodes .
-------------------------------------------------------------------------------
You can download the Images source here
https://drive.google.com/file/d/1T7WQ...
-------------------------------------------------------------------------------
Content of this video
00:00 - Intro and demo of the template
05:43 - Setting up the files and folders.
05:50 - Coding the HTML for Header section.
07:48 - Adding/coding Generic CSS reset.
11:50 - Adding CSS for Header Section.
16:30 - Coding HTML for Hero Section.
17:46 - Coding CSS for Hero Section.
24:30 - Coding HTML for What We Offer Section.
26:31 - Coding CSS for What We Offer Section.
33:48 - Coding HTML for Services Section.
35:23 - Coding CSS for Services Section.
41:53 - Coding HTML for Why Us Section.
43:54 - Coding CSS for Why Us Section.
53:49 - Coding HTML for Testimonial Section.
56:12 - Coding CSS for Testimonial Section.
59:35 - Adding JS scripts, CSS for Swiper, jQuery, and script.js for Testimonial Section.
01:00:35 - Adding JS code for Swiper in script.js file.
01:04:31 - Adding Custom CSS code for Swiper prev and next buttons.
01:06:15 - Coding HTML for FAQ Section.
01:08:15 - Coding CSS for FAQ Section.
01:10:52 - Adding more HTML for FAQ (items) Section.
01:11:11 - Coding HTML for Call To Action section.
01:13:19 - Coding CSS for Call To Action Section.
01:20:04 - Coding HTML for Footer Section.
01:23:08 - Coding CSS for Footer Section.
01:28:39 - Adding active class for Header (Navigation Menu) Section.
01:30:07 - Adding circles on Hero and What we offer Sections.
01:32:13 - Adding rounded objects on Testimonial Section.
01:34:12 - Adding Toggle Menu, and Off Canvas Menu for Mobile Devices.
01:41:58 - Adding CSS for Responsiveness - (using Auto Type to do the coding).
01:48:21 - Adding CSS/JS for Toggle Menu Button Functionality for Mobile Menu.
Twitter: / joefreycodes
#html #css #js #HTMLConversion #LawyersHomepage #FigmaToHTML #ResponsiveDesign #HTMLCSSJS #WebDevelopment #CodingFromScratch #FrontEndDevelopment #WebDesignToCode #StepByStepGuide #WebDevelopmentTutorial #ModernWebsite #PixelPerfect #DesignToDevelopment #MobileFirst #CrossBrowserCompatibility #JavaScriptInteractivity #SEOFriendlyCoding #WebAccessibility #UIUXDesign #CodingChallenge #CodingTutorial #HTML5CSS3JavaScript #WebDevelopmentProject #WebDesignWorkflow #CodingJourney #WebsiteConversion #HTMLBestPractices #ResponsiveWebDesign #LawyerWebsite
Watch video Building modern lawyer landing page using HTML, CSS, JS from Scratch (Fully Responsive). online without registration, duration hours minute second in high quality. This video was added by user JoefreyCodes 19 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 774 once and liked it 21 people.