lain teaches you how to code

Summary

In this instructional video, the creator shares their experience building a website using NeoCities, a free hosting platform. They emphasize that even beginners can easily learn coding with HTML, CSS, and Java. The video offers a step-by-step guide on setting up a domain, editing the site's code, and creating a stylesheet for consistent design. The creator also encourages viewers to explore other NeoCities sites for inspiration and to share their own creations, highlighting the joy of self-taught coding and the importance of responsive design.

Takeaways

• 😀 The speaker shares their experience in coding a website from scratch, emphasizing that it's not as difficult as it seems, especially with knowledge of HTML, Java, and CSS.
• 🌐 The recommended website for hosting and creating a free URL is NeoCities, which is user-friendly even for beginners.
• 🔒 When choosing a URL, be certain as changing it later might affect website traffic since old links won't automatically redirect to the new URL.
• 📝 After signing up, the user will have access to a dashboard with options to edit their site, visit it, and check traffic and activities.
• ✂️ Editing the website involves navigating to the 'edit' option, which leads to the backend where the HTML code can be manipulated.
• 🎨 The speaker suggests creating a stylesheet for consistent formatting across the site, which is a foundational but time-consuming task.
• 📚 Having a stylesheet in place provides a solid groundwork for the website, making further development more organized and efficient.
• 💻 HTML was found to be an easy language to pick up for the speaker, even with no prior coding experience, and was learned within about a month.
• 👀 NeoCities also offers the opportunity to view and draw inspiration from other users' websites, which can be a valuable resource for new creators.
• 🌟 The speaker's website took a year to complete, involving late-night coding sessions and a focus on responsive design for various devices.
• 📝 The speaker encourages others to try coding and website creation, sharing their enjoyment of the learning process and the freedom it offers to learn at one's own pace.
• 🔗 A link to the NeoCities website will be provided in the description for those interested in creating their own website.

Q & A

What is the main topic of the video transcript?

The main topic of the video transcript is teaching viewers how to code a website, specifically using HTML, Java, and CSS, and utilizing a hosting site called NeoCities.

What does the speaker suggest for beginners who want to start coding a website?

The speaker suggests that beginners don't need to worry because they were also a beginner when they started coding their website. They emphasize that HTML, Java, and CSS are the main skills needed, and that the process is not too hard.

What is NeoCities and how is it used in the context of the video?

NeoCities is a hosting site where users can host their own URL for free. The speaker used it to create their website and recommends it for its ease of use and the ability to view and get inspiration from other people's websites.

Why is it important to choose a domain name carefully when signing up on NeoCities?

Choosing a domain name carefully is important because changing it later might affect the website's traffic. If the URL changes, people may not be redirected to the new URL, potentially losing visitors.

What does the speaker suggest as a good starting point for coding a website?

The speaker suggests starting with an 'edit' button to access the code behind the scenes of the website. They also recommend creating a separate stylesheet for the website's formatting, which serves as the groundwork.

What is a stylesheet and why is it important for a website?

A stylesheet is a separate file that contains the formatting for a website, such as fonts, text boxes, decorations, and image backgrounds. It is important because it provides organization and consistency across the website, and it saves time by not having to repeat the same code on every page.

How does the speaker describe their experience with HTML as a beginner?

The speaker describes their experience with HTML as quite easy to pick up, even with no prior coding experience. They mention that they were able to learn HTML within about a month.

What is the speaker's advice for those who are interested in making a website using NeoCities?

The speaker advises to comment on the video if viewers decide to make a website using NeoCities, as they are interested in seeing others' work and have not met many people who have used the platform.

What did the speaker find challenging about coding their website?

The speaker found creating the stylesheet to be the most time-consuming and challenging part of coding their website, as it involved writing almost 900 lines of code and ensuring the site looked the same on both desktop and mobile devices.

What did the speaker enjoy about the process of learning to code and creating their website?

The speaker enjoyed the learning process itself, as they were able to go at their own pace and learn whatever they wanted. They also enjoyed the challenge and the sense of accomplishment that came with figuring out how to make their website work.

How does the speaker plan to share the link to NeoCities for those interested in making their own website?

The speaker plans to leave the link to NeoCities in the video description, making it easily accessible for those who are interested in making their own website.

Outlines

00:00

📝 Introduction to Website Coding with NeoCities

The speaker introduces a tutorial on how to code a website, emphasizing that it's not difficult, especially with prior knowledge of HTML, Java, and CSS. They share their personal journey as a beginner and introduce NeoCities, a free hosting site for creating and hosting a personal URL. The speaker advises on choosing a domain name carefully due to potential traffic impact if changed later and provides an overview of the site's initial setup and profile editing options.

05:02

🎨 Creating a Style Sheet for Your Website

The speaker discusses the importance of creating a style sheet for a website, which involves defining fonts, text boxes, decorations, and backgrounds. They share their experience of coding a style sheet that took a significant amount of time and effort, resulting in nearly 900 lines of code. The speaker suggests that while it's possible to include all styling in the index page, creating a separate style sheet is more organized and efficient, preventing the need to duplicate code across multiple pages.

10:04

🌐 The Benefits of NeoCities and Encouraging Exploration

The speaker highlights the benefits of using NeoCities, such as the lack of cost for hosting a personal site and the opportunity to draw inspiration from other users' websites. They encourage viewers to explore different sites on the platform and to check out the links provided on their own website. The speaker also shares their personal experience with coding, mentioning the challenges of ensuring their website's consistent appearance across different devices and the enjoyment they found in learning to code at their own pace.

🛠️ Reflecting on the Coding Journey and Offering Resources

In the final paragraph, the speaker reflects on the overall coding journey, which took a year of focused work and involved late-night coding sessions. They express satisfaction with the learning process and the fun they had in creating a responsive website. The speaker offers to look at viewers' websites if they decide to create one using NeoCities and provides a link to the website in the description for those interested in making their own site. They conclude by thanking the audience for their attention and expressing the need for rest.

Keywords

💡Coding

Coding is the process of writing instructions in a programming language to create software or websites. In the video, coding is central to the theme as the speaker discusses how they coded their website using HTML, Java, and CSS, indicating that prior knowledge of coding can make the process easier.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages. The video emphasizes HTML as one of the essential skills for website creation, with the speaker noting its ease of learning, especially for beginners.

💡Java

Java is a high-level, class-based, object-oriented programming language. While the video script mentions Java, it seems to be a slight error as the speaker likely meant JavaScript, which is used for adding interactive elements to websites. The confusion is understandable given the commonality of both languages in web development.

💡CSS

CSS stands for Cascading Style Sheets, a style sheet language used for describing the look and formatting of a document written in HTML. The video script highlights the importance of CSS for designing the visual aspects of a website, such as fonts and backgrounds.

💡NeoCities

NeoCities is a website hosting service that allows users to host their own websites for free. The video script introduces NeoCities as the platform the speaker used to host their website, emphasizing its user-friendly interface and the creative freedom it offers.

💡Domain Name

A domain name is the human-readable address of a website on the Internet, such as www.example.com. The video script advises viewers to carefully choose their domain name as it represents their website and changing it later could affect traffic.

💡Stylesheet

A stylesheet in web design is a set of rules that define how the elements on a web page should be displayed. The video script describes creating a stylesheet as a foundational step in website design, which can be time-consuming but is crucial for maintaining consistency across the site.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and screen sizes. The speaker mentions that their website looks the same on both desktop and mobile, which is an example of responsive design, demonstrating the importance of accessibility and user experience.

💡Inspiration

Inspiration in the context of the video refers to the creative influence or ideas gained from other websites. The speaker mentions getting inspiration from other NeoCities sites, which helped them in the design and content creation process of their own website.

💡User Experience (UX)

User experience, often abbreviated as UX, is the overall experience a user has when interacting with a system, such as a website. The video script touches on the importance of UX by discussing the need for the website to look consistent across different devices, which is a key aspect of a positive user experience.

💡Self-Learning

Self-learning refers to the process of acquiring knowledge or skills independently, without formal instruction. The video script highlights the speaker's experience of self-learning coding, which allowed them to progress at their own pace and explore topics of interest, ultimately leading to the creation of their website.

Highlights

Introduction to the process of coding a personal website and its accessibility even for beginners with no prior coding experience.

Emphasis on the importance of HTML, Java, and CSS for website development.

Recommendation of the 'NeoCities' website as a free hosting platform for personal URLs.

Advice on choosing a domain name that reflects long-term commitment to avoid traffic issues.

Description of the initial profile setup on NeoCities after signing up.

Explanation of the 'Edit' feature on NeoCities for customizing the website's backend.

Discussion on the importance of creating a separate stylesheet for website formatting.

Personal experience sharing on the time-consuming yet foundational nature of creating a stylesheet.

The speaker's testimony on the learning curve of HTML and its ease of pickup for beginners.

Mention of the benefits of NeoCities, such as no cost for hosting and inspiration from other users' websites.

Encouragement for viewers to create their own websites on NeoCities and share them with the speaker.

Reflection on the speaker's personal journey and the time investment in creating a responsive website.

Highlight of the challenges faced in ensuring the website's consistent appearance across different devices.

The joy of self-paced learning in coding and the speaker's enthusiasm for sharing their experience.

Invitation to the audience to follow the provided link in the description to start their own website journey.

Closing remarks with gratitude for the audience's attention and well wishes for their day or night.

Transcripts

hello um today I will be teaching you

how I coded my

website and honestly it's not that

difficult especially if you have prior

knowledge of coding specifically stuff

like

HTML some Java depends on like what

you're going to do on your site and CSS

and if you know like those three things

then you should be set and also if

you're a beginner don't worry cuz I was

also like a full on beginner knew

nothing about coding when I started my

website so don't worry it is actually

not too

hard okay

so let's get

started um so basically

I used this website and it's called neoc

[Music]

cities it should look like this when you

first go to the landing page and it's

going to ask you to sign up and

basically what this site is it's like um

it's basically just like a hosting site

where you can just host your own URL for

free and it's really really nice

um so yeah what you want to do is you

first sign up for like your domain name

and you know you put your information

and you make a password and oh yeah also

when you choose the URL for your website

make sure it's something that's like

that you actually are sure about

it like make sure that you're actually

sure about the name that you choose

because you while you can change your

url at any given point um it might

affect traffic to your site because if

you change the url then people will not

like they won't be redirected to your

new URL so you should be careful about

that so yeah um once you sign up you're

going to you're probably going

to like your

page after you sign up should

could look something like hold on my

Wi-Fi is being a little slow

but your profile should kind of look

something like this it might be a little

different cuz mine already has all of my

stuff in it but you should have

something similar to this as well and

there's going to be like a little edit

button oh yeah and the little directory

to like go to everything is right here

where you're using username is and if

you click on that there's like a little

drop down and it has a bunch of

different options for different things

you want to do like editing your site

visiting your site looking at like your

site profile looking at traffic

activities stuff like that and so

basically these two red buttons here

you're going to want to click on

edit and once you do

that it should redirect you to like

basically behind the scenes of your

website and yours is probably going to

look very different from mine cuz I have

like a bunch of different pages and I

have like images and stuff that I added

in so it's like there's a lot going on

but yours probably won't look like this

and you'll probably only have like maybe

like I think you have like a picture of

like the Neo cities cat maybe and then

like your main index page

and that's just going to be blank with

like the neoc cities logo and some

coding tips and so basically if you

hover over like that index page they'll

have like a couple options I think I

think the first one should be edit if

you hover over the

little the little like rectangle and

once you click on

edit I'm just going to click edit for a

random page it should take you to like

basically all the codes code that's in

your website and for me I have like a

lot of stuff okay well not for this page

specifically

but I do have a lot of stuff going on

and yours again probably won't look like

this it'll be a lot simpler and this is

basically where you start and oh yeah

tip is you should probably make a Styles

sheet and for people that don't know

what I'm talking about it's basically

like um um you make like your own

formatting which I also had to do which

took very very long and I can show you

cuz once if you like have like the style

shet done you basically already have all

of like the groundwork to your site done

basically but this is also like the most

time consuming and the most hard part

so yeah let

me let me show you what my style sheet

looks like so basically it's just like

the groundwork for your website so for

me I have like different fonts like

different text boxes you know like

different decorations that I like

different image backgrounds like

everything is in here which is why it is

really really long it is very very long

lines of coat is this this

is almost 900 lines of code that I had

to do myself

and yeah

this this was literally the death of me

like

this this was very stressful and you

don't have to do this honestly I've seen

people who don't make like a stal and

they just include like everything just

in the beginning like in their index

like on their index page they have like

everything just on the top first

and honestly you could do that but I

would recommend making like a separate

thing for it cuz it's just easier and

it's more organized and you don't have

to like copy and paste all of that code

into other Pages cuz it won't transfer

over so

yeah and what else so that's like the be

like minimum I guess that you should

know and

okay like like I said

this the way that you code is using HTML

so

honestly like me having zero coding

knowledge when I first started my

website HTML was actually quite easy to

pick up for me at least I don't know if

that's like I don't know if HTML is just

like easy in general cuz like I said I

literally don't have any experience in

coding other than just what I've been

doing myself so yeah but in my opinion

HTML was quite easy to pick up I think I

picked it up within like a month or so

and yeah um what

else the thing the great thing about

this like website like Neo cities is

again like you don't have to pay to have

your own like little site domain thing

up and also you can also look at other

people's websites and get inspiration

from them too cuz I got a lot of

inspiration from a lot of different

sites and I actually have them linked in

my website cuz they're cool you should

definitely check them out but yeah

there's a lot of like there's a lot of

different like types of websites like

different topics people talk about the

way it's like designed it's so unique

and I just I really like just scrolling

through and seeing what other people are

up to cuz it's really fun but yeah and

oh yeah if you decide to make a website

using this you should comment it and

then I'll go take a look at it cuz I

don't know anyone else who has a neoc

cities website like I I'm the only one

like I mean like of course there's other

people but like I haven't met anyone

that's coded on Neo cities before so

yeah but I think I think that's

basically all I wanted to talk about cuz

um for the rest of

this um it like the site itself kind of

walks you through everything so it

shouldn't be that hard but yeah I just

really wanted to share this because lots

of people have been asking

and yeah I thought why

not and also this is a really a good

excuse to pull out my my lean cosplay

because I don't know I have no other

reason to be wearing stuff like this

right now but

yeah I hope this helped

you

I my website is

like basically a Year's worth of

work yeah it did it took a very long

time and I was very very focused on it

for a long time like I would stay up

until maybe like 4: or 5: a.m. just

coding and trying to get like one line

of code to work perfectly because oh

yeah the special thing about my website

is that it looks the same on both like

desktop you know phone like it looks the

same everywhere and that took so so long

to figure out cuz

yeah not having any prior knowledge of

coding it was really rough it was it was

really rough but yeah I honestly had so

much fun learning though I love learning

stuff on my own cuz then I can go at my

own pace and I can learn whatever I want

so yeah I don't know for coding in

particular I did have a lot of fun so if

you want to make your own website or you

just want to get into coding or you just

want to do some stuff for fun I

recommend what I just showed you today

and I hope this answered a lot of

people's questions and I'll leave like

the link to the website in the

description so if you want to like make

your own website it'll just be right

there

and yeah thank you for listening to me

blobber about stuff I

like um

yeah I hope you have a good day a good

night a good

[Music]

whatever

yeah

yeah sorry I don't know what to say now

but yeah I hope this helped you and I

need to go to sleep because it is very

late