6 ways to Make Money with HTML and CSS

Summary

This video discusses six practical ways to make money quickly online using just HTML and CSS, without needing JavaScript skills. It explores opportunities such as creating email newsletter templates, building micro-sites for events, customizing website headers and footers, working with forms, converting design portfolios into responsive websites, and collaborating with other developers on CSS-heavy projects. The video emphasizes the potential for quick earning by tapping into freelance markets like Upwork and offers helpful resources, including a course on the Framer tool for web development.

Takeaways

• 📧 Email newsletter templates are a quick way to start earning with HTML and CSS, as many companies need efficient, well-designed email layouts.
• 📄 Micro sites for one-off events like festivals or seasonal events are another simple project you can offer, using just HTML and CSS.
• 🌐 Custom website headers and footers are in demand, and you can specialize in improving navigation and user experience for small businesses.
• 📝 Customizing forms can be a valuable niche, as forms are essential on almost every website but can be tricky to implement correctly.
• 🖥️ Converting designers' portfolios into responsive websites is another opportunity, especially as many designers struggle with mobile responsiveness on platforms like Behance.
• 📱 Mobile responsiveness is a key area to focus on when helping designers or small businesses, as many websites are not optimized for mobile browsing.
• 🔧 Learning tools like Framer can help you create websites quickly and offer freelance services efficiently.
• 🤝 Collaborating with other developers can be beneficial both for networking and earning, as many developers need help with CSS-heavy tasks.
• 🎯 Specializing in CSS can make you an attractive hire for developers working on complex projects who need help with design and layout.
• 💼 Platforms like Upwork are a good place to find freelance opportunities in areas like custom forms, CSS, and micro-site development.

Q & A

What are the six ways to make money with just HTML and CSS mentioned in the video?

The six ways are: 1) Using email newsletter templates, 2) Creating microsites for small events, 3) Customizing website headers and footers, 4) Specializing in customizing forms, 5) Creating responsive portfolios for designers, and 6) Linking up with other developers to assist with CSS.

Why are email newsletters important and what makes them effective?

Email newsletters are important because they are a direct way to communicate with customers. They are effective when they are efficient, not heavy with images, and load quickly to avoid high bounce rates.

What is the significance of creating email templates that are responsive?

Creating responsive email templates is significant because it ensures that the emails look good and function well on all devices, enhancing the user experience and engagement.

How can one get started with creating email templates for clients?

One can get started by applying for gigs on freelance platforms like Upwork, or by offering their services to businesses that might need email templates designed.

What is a microsite and why might companies need them?

A microsite is a small, one-off website created for a specific event or purpose. Companies might need them for events like holidays, festivals, or special promotions that require a dedicated online presence.

How can learning to use web builders like Framer benefit someone looking to create microsites?

Learning to use web builders like Framer can benefit someone by allowing them to create visually appealing and functional microsites quickly, which can then be offered as a service to clients.

Why is customizing headers, footers, and navigation bars a valuable skill?

Customizing headers, footers, and navigation bars is valuable because it can enhance the user experience on websites. It also allows for a more personalized approach to website design, which can be a niche service offered to clients.

What are the challenges involved in creating custom forms with HTML and CSS?

The challenges include designing forms that are visually appealing, ensuring they are functional and responsive, and integrating them with backend processes without using JavaScript.

Why might designers benefit from having a responsive portfolio website?

Designers might benefit from a responsive portfolio website because it ensures their work is viewable and accessible on all devices, which is important given the high number of people who browse on mobile phones.

How can someone with strong HTML and CSS skills assist developers who are more focused on JavaScript or other technologies?

Someone with strong HTML and CSS skills can assist by taking over the front-end design and styling tasks, allowing developers to focus on the back-end logic and functionality of a project.

What is the Framer tool mentioned in the video and how can it help in web development?

Framer is a tool that allows for the rapid creation of website prototypes and designs. It can help in web development by streamlining the process of creating responsive and interactive web elements.

Outlines

00:00

💌 Email Newsletter Templates

The speaker introduces the video by explaining that while JavaScript is powerful, it can be complex and time-consuming to learn, especially for those who want to start making money online quickly. As an alternative, they suggest using HTML and CSS to create email newsletter templates. They share their personal experience running an email newsletter and emphasize the importance of creating efficient and effective emails that load quickly. The speaker also mentions that there are freelance opportunities on platforms like Upwork for those skilled in HTML and CSS to create email templates. They advise using ChatGPT to convert design ideas into email-compatible HTML and CSS, ensuring the emails are responsive.

05:00

🎉 Micro Sites for Events

The second paragraph discusses the concept of 'micro sites', which are small, one-off websites for specific events such as holidays or festivals. The speaker suggests that these sites typically consist of a landing page with a form and can be created using just HTML and CSS. They recommend learning a web builder like Framer to speed up the process. The speaker also advises that while micro sites are not high in cost, they can be a quick way to earn money and suggests looking for local events or organizations that might need such sites. Examples given include music festivals and sports clubs, with specific mentions of 'C Sessions' and 'Santa Grot' as potential clients.

Keywords

💡HTML

HTML stands for HyperText Markup Language, which is the standard markup language for creating web pages and web applications. It is the foundation of any website's structure, defining the content and the layout of a webpage. In the video, HTML is mentioned as a fundamental skill necessary for creating email newsletter templates, microsites, and other web elements discussed.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the look and formatting of a document written in HTML. It allows developers to control the visual presentation of web content, including colors, layout, and responsive design. The video emphasizes the importance of CSS for making web content visually appealing and user-friendly, especially in the context of email templates and microsites.

💡JavaScript

JavaScript is a high-level programming language that enables interactive web pages by running scripts on the client-side. Although not the focus of the video, it is mentioned as a more complex skill compared to HTML and CSS, which can be mastered to further enhance web development capabilities.

💡Email Newsletter Templates

Email newsletter templates are pre-designed layouts for creating email newsletters. They are crucial for delivering content efficiently and engagingly to subscribers. The video suggests that creating these templates with HTML and CSS is a viable way to earn money online, as they need to be lightweight and responsive to cater to the quick bounce rates of email readers.

💡Microsites

Microsites refer to small, temporary websites created for specific events or purposes. They are usually simple, with a landing page and a form, and are mentioned in the video as a project type that can be developed using just HTML and CSS, providing an opportunity for developers to earn money quickly.

💡Freelance Platforms

Freelance platforms like Upwork are online marketplaces where individuals can offer their services for hire. The video mentions these platforms as places where developers with HTML and CSS skills can find work creating email templates and other web projects.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. It is important for email templates and microsites to ensure that content is accessible and visually appealing across different platforms, as highlighted in the video.

💡Custom Website Headers and Footers

Custom website headers and footers are the top and bottom parts of a webpage that often contain navigation and branding elements. The video suggests that proficiency in HTML and CSS can be used to specialize in creating and customizing these elements to improve user experience and navigation.

💡Forms

Forms are an essential part of web interaction, allowing users to input data or submit information. The video points out that forms can be complex to design and implement in HTML and CSS, making it a specialized area where developers can offer their services to improve website functionality.

💡Portfolio Websites

Portfolio websites are personal websites used to showcase an individual's work, often used by designers and artists. The video suggests that offering services to convert portfolios into responsive websites can be a lucrative business opportunity for those with HTML and CSS skills.

💡Framer

Framer is a tool for designing and prototyping responsive web interfaces. The video mentions Framer as a way to quickly create websites with good design, which can be beneficial for developers looking to build microsites or portfolio sites with HTML and CSS.

Highlights

Starting to make money online with just HTML and CSS is possible without mastering JavaScript.

Email newsletter templates are a lucrative area for those proficient in HTML and CSS.

Efficient email design is crucial to avoid high bounce rates.

Freelance platforms like Upwork offer jobs for email template designers.

Micro sites for small events can be created with HTML and CSS, offering quick freelance opportunities.

Learning web builders like Framer can expedite the creation of professional-looking micro sites.

Local businesses and events often require simple websites, presenting a market for basic HTML and CSS skills.

Custom website headers and footers are in demand for improving user navigation experiences.

Freelance work for customizing headers, footers, and navigation bars is available on platforms like Upwork.

Forms are fundamental to websites and can be a specialized area for HTML and CSS experts.

Companies like Typeform are dedicated to form creation, indicating a market for form specialists.

The Odin Project offers a module on forms, which is a valuable resource for learning form creation.

Customizing portfolios to be responsive can help designers stand out and is a service that can be offered.

Using tools like Framer can help in quickly creating responsive portfolio websites.

Freelancing as a web developer with Framer skills is a viable career path for those starting with HTML and CSS.

Collaborating with other developers can lead to opportunities in CSS-focused projects.

Upwork and similar platforms have listings for short-term CSS assistance in larger development projects.

Transcripts

welcome you're here because you want to

start making money online with just HTML

and CSS JavaScript is a bit of a

mountain and it takes quite a while to

climb it it's definitely worth doing it

but you're going to have to take your

time and sometimes we don't have enough

time we need to start earning

immediately so in this video I want to

give you six ways that you can start

making money an awful lot faster with

just HTML and CSS so the first option

that I want to discuss is using email

newsletter templates so I run an email

newsletter it's called Danny's dispatch

and I know how important it is to have

nice emails coming into people's inboxes

we don't want emails to be heavy with

loads of images that takes forever to

load because the bounce rate or how

quickly people leave an email is

extremely quick I know for me especially

if I have loads of emails in my inbox

I'm actually just ticking them off so

that they're no longer a notification

and a lot of people are also like that

so there's quite an art to creating

really efficient and effective emails

but I have actually hired people in the

past to do email templates for me and

I've actually made email templates as

well for other people so this is an area

you can get into it's a little bit more

complicated than it initially seems you

do have to understand how to lay out an

email what CSS is actually covered with

uh email no JavaScript is allowed during

emails as well so you have to kind of be

creative with it but it's a good area to

start and there are jobs hiring on

freelance platform forms like upwork

where you can start applying for gigs

pretty much as soon as you know HDML and

CSS if you already have an email design

in mind but you don't really know how to

make it happen a good thing to do is to

just use chat GPT and say hey how can I

convert this design idea or this HDML

and CSS to be email compatible CU it has

to be responsive as well but this is an

area that you can dive into take your

time and start making money pretty

quickly option number number two is

micro sites so a micrite is basically a

word I've made up uh at least I think I

made it up but it's for small little

oneoff events so you'll notice like

we're coming up to Christmas now but

this goes for all year you're talking

Halloween Easter any other holidays

Thanksgiving I think just pass in the

United States so often times companies

will have popup events for these types

of times of year uh music festivals that

sort of thing but they often want

websites for that single event and

usually it's not going to be a massive

highly functional website with loads of

stuff going on it it's typically just

going to be a landing page with a form

attached to it now a lot of these people

will just use websites like Wix or

Squarespace but you can start doing

these with just HTML and CSS and on top

of that if you just learn one of those

web Builders like framer you can start

making websites really quickly that look

great and it'll put money in your pocket

now it's important to consider when

you're making a micro site you have to

be reasonable like you're not going to

be able to charge $2,000 for it you know

we're talking a couple hundred here or

there in Ireland I'd be looking out for

small little festivals maybe martial

arts gyms ja and sports clubs things

like that I guess it's the same for like

a baseball team in the United States or

whatever I actually found a couple of

prospects for these micro sites I was

looking around um for music festivals so

there's one in Ireland called C sessions

and they already have a website and

they've used Wicks and that's just proof

of concept basically that these

festivals need websites and usually

they'll have a third party booking

situation so you just hit a link to take

you to the booking page so you don't

even have to implement all of the

booking logic and

stuff Santa grot was another one and

they use some I've never even heard of

it it's called create but they've used A

Different Page Builder as well so these

are things that you could start offering

to little events if you just hear people

talking about oh there's some event

coming up check and see if they have a

website and if they don't Bingo number

three is custom website headers and

phots so a header and fotter is usually

part of a theme and it's part of the

navigation of a website and a big

problem with user experience is

generally navigation now this can be

complicated for a lot of reasons but if

you become a bit proficient with HTML

and CSS

you can go in and customize headers

Footers navigation bars and I've

actually seen some jobs and upw work for

exactly this about 2 days ago so check

it every day and you could just have

that one little speciality that you do

it can be really valuable to people and

to the customers on the other end so

another way to do it is to go through

other websites that are local to you and

just see if they've got broken links or

they've got problems with the user

experience and you can then suggest ways

to fix that option number four that you

can consider is customizing forms so as

I mentioned earlier a lot of websites

have forms it's pretty much fundamental

my website has a form I think pretty

much every website has a form at this

stage and it's usually to sign up to a

newsletter or to submit a request to do

something but forms are actually pretty

complicated for HTML and CSS you can

design them pretty well but interacting

with the back and making sure that you

get everything right is pretty daunting

so it's a good area for you to

specialize in because a lot of other

developers will struggle with it and a

lot of other people who've set up

websites will struggle with it so

there's even companies completely

dedicated to just doing forms an example

of that would be type form and I think

there's a bunch of other ones but you

could become proficient in maybe one of

these softwares like type form or just

implementing normal forms with the

action and stuff uh I learned everything

I know about forms from the Odin project

and I'm going to link to that um module

from the Odin project but if you're

still learning to code a really good

area to focus on I believe is forms let

me get a drink it's cold in here option

number five for you to start making

money with just HTML and CSS are

customizing it's kind of a bit like

micro sites but what you'll notice is a

lot of designers or Freelancers they

don't have a specific website they'll

they'll use something like behance and

bance is basically like a design

Facebook page for example it's like your

online

portfolio and they're really cool

they're responsive they're amazing and

I've seen some beautiful portfolios on

be hands the trouble is sometimes it

doesn't set you apart from the crowd

because they don't have their own

personal website and sometimes they have

a website but the link doesn't work or

they had it up years ago and it doesn't

work anymore but the issue I've seen

with beand is most people who are going

to hire a designer are going to be

searching on their phones it's actually

crazy how many people are searching on

their phones and beans when you upload a

project it'll look incredible on desktop

but then when you click into the project

on mobile it's not responsive so you

have to do all of this zooming

gymnastics and you zoom in too much and

you get a bit lost so you could offer

that service to different designers and

say hey well I can convert your

portfolio projects into responsive

websites so you can host them for free

using something like netlify or whatever

you could find another way to do it we

have a dog barking outside so apologies

if you can hear that in the background

nothing I can

do now sometimes converting these micro

sites into actual websites can be a bit

of a pain especially if you're building

everything from scratch if you really

want to improve your HDML and CSS go for

it and practice it from scratch but one

thing that I've been doing is using a

tool called framer and that brings me on

to the sponsor of today's video me I

have created a course for you guys if

you want to learn the framer tool so

framer is a tool that you can use to

make websites pretty quickly it's

relatively easy and I guide you through

the whole process from Total beginner to

being able to actually freelance as a

web developer so if you're interested

you can just click the link in the bio

and it'll take you to a free course you

can see if it's something that you're

interested in uh option number six

finally is to link up with other

developers uh I found that even though I

was working with react all the time a

huge amount of my time was spent on just

CSS so a awful lot of other projects are

also like that so you've got developers

who are working on react and you may not

know react yet you may not know that

much JavaScript yet but if you're really

good at CSS people will ask you to help

because an awful lot of code cing

honestly I know I'm saying this phrase a

lot but it is a huge part of front end

development messing around with CSS so

sometimes if I'm stuck on a project that

is just taking me a long time and I have

a lot of business logic to go through

I've actually hired Freelancers to help

me to do just the CSS part and what

you'll find is working with other

developers will actually improve you a

lot faster but it's also a valuable

resource so not only are you building a

network but you can also earn a little

bit of money on the side and you can

check through websites like upwork where

developers are looking for a little bit

of help for a short period of time for

just a specific part of a website and

you may only need to know something

about forms or HTML and CSS I hope you

found this video interesting and if you

did feel free to watch this video

[Music]

next