- 53
- 150 654
Web Dev with Matt
United States
เข้าร่วมเมื่อ 21 ต.ค. 2021
Here you will learn a lot about web devlopment!
Create a Landing Page from Scratch with HTML and CSS
Build a Complete Landing Page Project with HTML and CSS!
🔴 IMPORTANT My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🗃️ Course files: github.com/matheusbattisti/landingpage_en
In this video, we will delve into the development of a landing page whose main objective is to capture leads through a newsletter signup form.
The goal is to create an attractive, modern, and functional design using only HTML and CSS. The landing page will serve as a great example for anyone looking to understand how to create effective interfaces that convert visitors into subscribers.
We will start building the page from the basic HTML structure. The idea is to create a layout that is clear and intuitive. We will begin with the document type declaration, which is essential for the browser to know how to interpret the page's content. Next, we will set the language to Portuguese, which will help with accessibility and indexing the content by search engines.
Within the head section, we will add the viewport meta tag, which is necessary to ensure that our page is responsive. This setting allows the page to adjust properly to different screen sizes, whether on mobile devices or desktops. We will also define the page title, which will appear in the browser tab and search results, and link to an external CSS file that will contain all the necessary styles to bring our project to life.
The main structure of the page will consist of a header and a body. In the header, we will create a div for the logo and the title of our brand, which in this case is "Hora de Codar." Next, we will add a navigation bar that will include links to different sections such as "Home," "Services," "About," "Contact," and "FAQ." This navigation bar will make users feel more comfortable browsing the site, increasing the likelihood of interaction.
In the body of the page, we will focus on the main content, where we will encourage visitors to subscribe to our newsletter. We will create an impactful message that highlights the importance of subscribing, using an eye-catching title that includes a subtitle with a different color highlight to draw even more attention from the user. The supporting text will be a brief description explaining the benefits of subscribing, using clear and direct language.
An essential part of the landing page is the signup form. For this, we will create fields for users to enter their name and email address, ensuring that both pieces of information are mandatory for submitting the form. The submit button will be styled to stand out, using vibrant colors that match the theme of the page. This not only increases the button's visibility but also enhances the user experience.
In addition to the textual content and the form, we will add a visual element: an image that complements the message of the landing page. This image will be strategically positioned using CSS to ensure it adapts to the screen size without losing quality. To add a design touch, we will use an elliptical shape as a background element that will provide depth to the page.
The CSS styling part is where the magic happens. We will define the colors of our page, choose appropriate fonts, and create a layout that is visually appealing. The color palette will include dark tones for the background, which will contrast well with the light text, ensuring readability and a sophisticated appearance. We will use rounded borders and gradients on some elements to give the landing page a more modern look.
Throughout the video, we will make real-time adjustments, showing how small details can impact the design and functionality of the landing page. By the end, you will have a complete project that not only demonstrates your skills in HTML and CSS but also serves as an excellent portfolio to showcase to potential employers or clients.
🚨 Don’t forget to like and subscribe to the channel for more content related to web development!
🔴 IMPORTANT My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🗃️ Course files: github.com/matheusbattisti/landingpage_en
In this video, we will delve into the development of a landing page whose main objective is to capture leads through a newsletter signup form.
The goal is to create an attractive, modern, and functional design using only HTML and CSS. The landing page will serve as a great example for anyone looking to understand how to create effective interfaces that convert visitors into subscribers.
We will start building the page from the basic HTML structure. The idea is to create a layout that is clear and intuitive. We will begin with the document type declaration, which is essential for the browser to know how to interpret the page's content. Next, we will set the language to Portuguese, which will help with accessibility and indexing the content by search engines.
Within the head section, we will add the viewport meta tag, which is necessary to ensure that our page is responsive. This setting allows the page to adjust properly to different screen sizes, whether on mobile devices or desktops. We will also define the page title, which will appear in the browser tab and search results, and link to an external CSS file that will contain all the necessary styles to bring our project to life.
The main structure of the page will consist of a header and a body. In the header, we will create a div for the logo and the title of our brand, which in this case is "Hora de Codar." Next, we will add a navigation bar that will include links to different sections such as "Home," "Services," "About," "Contact," and "FAQ." This navigation bar will make users feel more comfortable browsing the site, increasing the likelihood of interaction.
In the body of the page, we will focus on the main content, where we will encourage visitors to subscribe to our newsletter. We will create an impactful message that highlights the importance of subscribing, using an eye-catching title that includes a subtitle with a different color highlight to draw even more attention from the user. The supporting text will be a brief description explaining the benefits of subscribing, using clear and direct language.
An essential part of the landing page is the signup form. For this, we will create fields for users to enter their name and email address, ensuring that both pieces of information are mandatory for submitting the form. The submit button will be styled to stand out, using vibrant colors that match the theme of the page. This not only increases the button's visibility but also enhances the user experience.
In addition to the textual content and the form, we will add a visual element: an image that complements the message of the landing page. This image will be strategically positioned using CSS to ensure it adapts to the screen size without losing quality. To add a design touch, we will use an elliptical shape as a background element that will provide depth to the page.
The CSS styling part is where the magic happens. We will define the colors of our page, choose appropriate fonts, and create a layout that is visually appealing. The color palette will include dark tones for the background, which will contrast well with the light text, ensuring readability and a sophisticated appearance. We will use rounded borders and gradients on some elements to give the landing page a more modern look.
Throughout the video, we will make real-time adjustments, showing how small details can impact the design and functionality of the landing page. By the end, you will have a complete project that not only demonstrates your skills in HTML and CSS but also serves as an excellent portfolio to showcase to potential employers or clients.
🚨 Don’t forget to like and subscribe to the channel for more content related to web development!
มุมมอง: 13
วีดีโอ
Learn CSS Grid in 30 Minutes - CSS Grid Course for Beginners
มุมมอง 124วันที่ผ่านมา
Master CSS Grid in one video! 🔴 IMPORTANT My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN 🗃️ Course files: github.com/matheusbattisti/grid_css_30_min_en Welcome to the complete CSS Grid course in just 30 minutes! If you're looking for a quick and effective way to learn how to use the powerful CSS Grid...
Learn CSS Flexbox in 30 minutes - Flexbox tutorial for beginners
มุมมอง 1932 วันที่ผ่านมา
Master CSS Flexbox in one video! 🔴 IMPORTANT My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN 🗃️ Course files: github.com/matheusbattisti/flexbox_30_en In this video, we delve into the powerful world of CSS Flexbox, a layout model that simplifies the design of responsive web pages. Whether you're a beg...
CSS course for beginners - Learn CSS in 1 hour
มุมมอง 33714 วันที่ผ่านมา
Learn the fundamentals of CSS in 1 hour! =D 🔴 IMPORTANT My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN 🗃️ Course files: github.com/matheusbattisti/css_1_hour Welcome to this comprehensive CSS course designed to elevate your web development skills in just one hour. In this video, we dive deep into the...
HTML course for beginners - Learn HTML in 1 hour
มุมมอง 12421 วันที่ผ่านมา
Learn a lot of HTML in just 1 hour! =) 🔴 IMPORTANT My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN Welcome to our comprehensive "Learn HTML in 1 Hour" tutorial! This video is perfect for beginners who want to dive into the world of web development by learning HTML, the foundational language of the int...
How to add a line through a text with CSS
มุมมอง 8032 ปีที่แล้ว
In this video you will learn how to put a line through your texts with #CSS This is often used for 'deleted' texts or if a text had a correction The CSS rule will be applied to a #HTML element
How to make an input accept just numbers in HTML
มุมมอง 7K2 ปีที่แล้ว
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN In this video I will show to you how to create an input that just accepts numbers in #HTML We will also see how to make this with a regular expression, using JavaScript
How to iterate through an object in JavaScript
มุมมอง 1042 ปีที่แล้ว
In this video you will learn how to iterate through an #JavaScript object With this technique you can show the values and the names of the properties Or use them for something in your software
How to add hours to a date with JavaScript
มุมมอง 5102 ปีที่แล้ว
In this video you will learn how to add hours and days to a date in #JavaScript We need to have a date create by the Date object, an object of JS So we can use some methods that help us conclude our objective
What is console.log and how we should use it
มุมมอง 442 ปีที่แล้ว
Console is an object of #JavaScript, every software or app you develop with this language will contain the console and other objects The console has several methods, one the them is log, that we use for show messages in the Console tab of browser developer tools But there are other methods, their use cases are more specific, like the warn, this methods is used to create a warn in the Console tab
How to convert an array of objects to an array of arrays
มุมมอง 9032 ปีที่แล้ว
In this video we will convert an array of items that are objects to an array with arrays, with the objects values This will be done with #JavaScript and just a few lines of code
How to center a div with CSS
มุมมอง 452 ปีที่แล้ว
In this video we are going to see how to center a div Divs are #HTML element that we usually create components with it, like cards for example And sometimes we need to center them, so we just need a few lines of #CSS to do this!
How to validate email with JavaScript
มุมมอง 1852 ปีที่แล้ว
In this video we will see how to validate email with #JavaScript We will use a #regex for this, so we can detect the email patterns and validate what is and what is not an email
How to convert string to number in JavaScript
มุมมอง 1022 ปีที่แล้ว
In this video you will learn how to convert a text, also called string, to a number Numbers in many programming languages have two types: integers and floats But in #JavaScript we just have the number type!
How to disable inputs in HTML - block form inputs
มุมมอง 3.9K2 ปีที่แล้ว
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN In this video you will learn two to ways to block inputs in a #HTML form One of them is readonly, that don't let the user type in our form field but sends the information to our back-end server The second one is disabled, wit...
Change mouse cursor with CSS - Change mouse cursor to a hand
มุมมอง 3.5K2 ปีที่แล้ว
Change mouse cursor with CSS - Change mouse cursor to a hand
How to add CSS to a HTML element with JavaScript
มุมมอง 1572 ปีที่แล้ว
How to add CSS to a HTML element with JavaScript
How to change input placeholder color with CSS
มุมมอง 3682 ปีที่แล้ว
How to change input placeholder color with CSS
How to remove the input border when clicked (focus event)
มุมมอง 3.1K2 ปีที่แล้ว
How to remove the input border when clicked (focus event)
Verify if checkbox is checked with JavaScript
มุมมอง 10K2 ปีที่แล้ว
Verify if checkbox is checked with JavaScript
How to get the value of an input with JavaScript
มุมมอง 1062 ปีที่แล้ว
How to get the value of an input with JavaScript
How to open a new link tab with a tag HTML
มุมมอง 342 ปีที่แล้ว
How to open a new link tab with a tag HTML
Thank you 🫶🏻🫶🏻
🔴 IMPORTANT My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
👉 My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
👉 My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 My complete HTML & CSS Course with Projects: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
Very informative ❤
thanks man!
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
🔴 Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
Get my full HTML & CSS course with discount at Udemy through this link: www.udemy.com/course/html5-and-css3-craft-your-own-websites-with-4-projects/?couponCode=HTMLCSSEN
Valeu irmão!
This mothefucker spans in portuguese and english video lol. Great content as always kkkkkk .
this is really helpful thankyou brother love from India
Thanks Bro.....
that thick german accent tho
W man helped out thx
Somebody knows why it gives me null? and the error "cant read properties of null" (reading "checked")
Been looking for this ❤
JESUS, CARACA PROFESSOR FODAAAA, EU TE ASSISTO PELA UDEMY CARA! NÃO SABIA QUE TINHA VÍDEO EM INGLÊS
Hello sir, it's not working in vue router application
thanks mate and with that said i hate web dev thank u
Thanks mate.... appreciate the knowledge you shared, it is very useful🙇
Thanks
Thank you so much
Exactly what I needed Thank you!
how to get the word itself not the index?
you rock subscribed
e type kro number m hota hai type
Amazing bro ❤ love you from India ❤
Cheers for your help.
you must be from brazil
yes haha
Thanks for the quick video. Helped me a lot
Now my question is how do I get the current position of an animated element
I’m using Visual Studio Code and I was making a flipbook. When I ran the HTML site, it just shows me blank pages and broken buttons. Can you help me to solve this problem?
Thank you very much