coding my first website from scratch (using only html/css!)

[@zifebort8245]

i love this comments section... it's just so comfortable and sweet to read them!! and this vid too!

[@stephranaway]

couldn’t agree more🥹❤️ you guys are so supportive and kind, and i’m learning so much from you all!!! i was pretty scared to post this, but i should’ve known you guys would welcome it and be super encouraging. :) i feel so lucky!!! keep on learning, friends!🫶🏼

[@Malpense]

I've been a self-taught software engineer for about 15 years now, and I really like this aesthetic! Most people these days will just jump straight into using a framework without learning the basics so it's really refreshing to see you doing this from scratch using HTML and CSS, keep up the good work!

[@denzeroneYT]

When we were studying at university, we were taught to do everything from scratch, so I rarely use frameworks, but I think I will need them later.

[@stephranaway]

thanks for the encouragement!! and woah that’s super impressive! a real dev🤩

[@Nakul_G]

The frontend look sick , and also that color combo with light green was super aesthetic love it

[@stephranaway]

THANK YOU!!! light green’s my fav!

[@abhaydhar80]

Us ​@@stephranaway

[@Antwaun43]

This is so cool to see. I’ve been a self taught front end web developer on and off for about 3 years now. My goal this year is to learn and build a real portfolio. I enjoy seeing established developers try something different and show their processes no matter how simple. It encourages me throughout my journey. Thanks so much for this video as well as your other content! Please keep sharing.

[@darcos-i6s]

have you experienced any problems with diploma/bachelor degree?

[@blazeezero]

As a computer science student, last school session was focused on front end developing (HTML, CSS, Bootstrap, JavaScript) and on all of our projects the instructions consisted of doing all of the html first. When working on my bigger projects though I enjoyed doing it part by part. Like doing all of the HTML for what's going to be the carousel/grid/whatever and then doing the bootstrap and CSS. And for simpler pages, doing the whole page html and then styling it.

[@Alex-mi6xc]

Awesome! Here are some tools I used to improve the experience: - WhatFont chrome extension to tell what fonts websites uses - Figma for prototyping - Relume for wireframes - Unslash/behance/dribbble/webflow templates for inspiration hope this helps!

[@obed.raimundo]

This was nice to watch :) I'm a self-taught developer/designer for almost 30 years now and I gotta tell ya, it's nice to see stuff like this. HTML and CSS were how I started out of boredom. Keep doing what you're doing, keep learning, keep experimenting. You got this :)

[@dawnfrazier504]

I love you portfolio aesthetic. Coding my own portfolio has felt so much more creative and fun than a web builder like wix and got me into web dev. So me coming from the frontend to learning the backend is a mirror of what you have done.

[@patronusstag]

Love that someone else does this too. I used to change my tumblr blog theme every week by coding it in HTML/CSS from scratch. This was a little nostalgic to watch. People always tell me to use normal website builders which I do but coding from scratch is so much fun to me 😅

[@yooforia1636]

damn cool! i am gonna learn front end and do this too ^^

[@niharikachhabra2341]

I've always wondered how people do that, because it would only reflect on your device right so what's the point 😅

[@sombraelerizo]

Considering that I'm taking up HTML/CSS from scratch, hoping to become a Front End Developer, this video felt like a godsend. You were so relatable. When I first build my first component from FE Mentor I was feeling just like this. Now that I'm taking a good course again I hope I can build on the basics better from now on.

[@lucasgaudie-ley9390]

I've stumbled upon this video and decided to watch, since I'm kinda into programming now and I'm learning how to code to create my own game. I worked as a web designer back in 2011 and the one thing that I hated the most was trying to center things using CSS. When I opened your video, I was like "Maybe things have changed from 2011 to 2025. Maybe centering now is easier" I laughed so hard when I saw your frustration trying to center your site using css. Maybe things have changed, but it's always centering things that really gets under a new webdev's skin! The site is really cute though, congratulations!

[@joshkim3427]

Wow so inspired! I was literally spending all day looking at how I can make my own website too. Keep me accountable pls pls pls

[@denver9619]

i took a front end class last semester and really enjoyed it and wanted to practice coding some stuff on my own, but kept getting frustrated and took a break from it. this vid makes me feel reassured and made me motivated to start working on those projects again!

[@pcleanse]

For 08:50 the letters C and R, you can find the icons for those by searching "copyright" and "registered" in font awesome. Great portfolio by the way! Nice job

[@marlonmoises6598]

I think she meant the programming languages C and R as she was talking about the skills section

[@jibbish7148]

I usually do one component at the time. in example, I’m doing the “projects-section” and then I style it before moving on to the next component.

[@MemeJuiceVids]

I like the way it looks. I don't think anyone makes websites from scratch like that anymore since the 2000s. Lots of other tools out there

[@nicklaspillay7923]

W video! I've been in the industry for a decade, and this is the first time (between now and May) I am creating a website/portfolio for myself. Nothing embarrassing about 11 hours! Gives me inspiration to charge forward and setup my portfolio.

[@arai8997]

Omg I've also been trying to learn how to do the same thing over break! I also feel a bit worried just it seems like every cs major around me has a personal website, but watching your video made me feel more confident!

[@JakeLai.]

4:30 Def like to style them as I go, or at least doing just the flex positioning first and then applying finishing touches at the end. I find it more intuitive and rewarding to build that way. Also great video, keep it up✌

[@mohamedadnan786]

Hey Steph.. the website looks amazing for a beginner.. A helpful tip is use Chrome Inspector tool to find errors or bugs in your styles(It's makes things super easier)... and few suggestion on your website. First there a huge gap after your footer and second in mobiles it looks okay ish(you haven't mentioned that you optimize for mobiles or not) the projects scroll side ways which isn't ideal so probably change it to Button to show more thingy... Overall Great website a solid 8/10

[@raishu6778]

Your portfolio looks cute! This reminds me to update my portfolio and start a new project. This time would be my first mobile application, since I code with web. Happy new year, Steph!

[@nergizken]

I was thinking why'd you choose light green as a main focus color for your website but then I looked at your sweater and those cute hanging leaves peaking from behind, and I got it :) Great work again Staph!

[@jsambuo]

Foundational stuff are the best! I'm a fan of doing things from scratch, especially for learning. Your site looks great! Recently I've been a fan of component driven development and having a design system set up, but that might be overkill for smaller projects. Keep up the great work, and happy new year!

[@shreyashpatel723]

my approach is to dividing your page into sections and designing each section and writing the content at the same time. This approach helps you know where and how much content to include on the page.

[@Learningat26]

I am refreshing HTML rn so will be back in a day or 2 , just found out abt ur channel and will watch this video post the refresh, good going fellow dev!

[@mdarky-san]

oh and here i thought that i had to learn and remember all the tags and such, I'm in a bachelors of CS right now and i did create a number of websites, working on a personal one now. this is such a comfy video. hoping for more like these!

[@squ34ky]

5:34 you don't need JavaScript. HTML forms can simply "POST" their form input values to a backend server specified by the 'action' attribute. That's how people used to use forms, before all the JavaScript, AJAX, Fetch API shenanigans became popular.

[@kernel0verflow919]

She could also use htmx to interact with a backend. But in her case, I don't think this will be helpful on a portfolio

[@quicksilver_437]

It’s 11:15 PM. Just wrapped up my coding project, thought I’d reward myself with a nice movie. Opened Netflix like a responsible adult… and somehow ended up on KZbin for Movie Inspiration. Your video popped up, and BAM, I’m watching it instead of a movie. Honestly? No regrets. Now I’m off to bed, movie-less but weirdly satisfied. 10/10 would accidentally watch again.

[@East2242]

Happy New Year! I hope 2025 brings you lots of happiness and blessings. Sorry for the late wishes I had an exam today and was really busy. I've been watching your videos, especially the ones about your life in NYC and working as a software engineer at Facebook. As an 18-year-old first-year computer science student, I find them super inspiring! I also dream of making videos like you after graduation. Love you, sis!🤍👀

[@DaOnlyTrucker]

First time seeing your channel im loving this video as i am a student going thru full stack courses thanks for the inspiration

[@lilyrose6520]

This is so fun! I’m in the same situation- no front end classes in college and only backend at work but you’ve inspired me to start too !!

[@twisted_cpp]

I love how you make the whole process aesthetic and romanticised in this video. I also like your enthusiasm about this, it reminds me of when I was first starting with html/css. Hope you have a good 2025 and learn a lot of cool stuff and build exciting projects.

[@genigeekus]

I like how you used html and css to build a simple portfolio and been a web developer on and off I like to get into more projects. I enjoy seeing new people learning to code because I love how there also into tech as well. Thank you for uploading

[@MelissaNambalirwa]

Funny how I just finished making my first website yesterday with html and css. I can totally relate to this video😂 The hunger, the 2am, the need to see the final result geezzz. It was an experience. But I loved it. Its for a class project, but I think I did pretty well on it. Love this video cause of the relation

[@knpoblete08]

Love it! I have started with mine January last year but haven't had the chance to pick it up - tried to do it with html and css only. Now I'm reminded of that abandoned project. :p

[@CrownandGlow]

This is really very beautiful, I recently decided to become a software engineer coming from someone that works in networking, and im lowkey overwhelmed and just unsure on where to start. I tried to learn HTML a long time ago but that flopped, I want to try again and im scared lol. Anyways love your video, love your energy. If you can assist with a mini roadmap to being a software engineer I would definitely appreciate that. Thank you in advance🤭

[@suvankumar9929]

Happy New Year Steph!!!

[@stephranaway]

happy new year!!!🥳

[@vaishu4675]

I love this kind of content.😊 thanks for uploading the coding aesthetic videos !! ❣️

[@brocode04]

9:00 for programming icons you can use devicons! Also most of the frontend devs or personally me, I develop my website step by step like first the Home etc. Not coding the whole HTML and going to CSS...

[@iancarlosortega8046]

I love this kinda yt channels, great video :))

[@ianellis3987]

For me, creating my first html/css site was my first experience with coding in general, it was one of the most rewarding feelings ever, wish I could recreate that haha. Your site looks great! Wayy better than my first

[@Ruhan-f4n]

It's definitly pretty good, and honestly, it's incredible that you build it from scratch without a complete design.

[@rjarora5054]

I really loved the video and the bright energy you brought along with you! Was working on a project and saw this and my motivation and inspiration went +100, Happy new year from a new sub ^-^

[@ijeomaemmanuella6880]

Happy new year !! I am super super proud of youuuuuu

[@Hierothewordsmith]

This is a really nice and interesting video. It scratched my itch for the need of cozy technical content

[@JoshuaSwafford61995]

This is cool, I just started learning frontend a few weeks ago to hopefully land a job 🤞 but anyways, I’ve found it helpful in html and css to label each section. So I do all my html and then do css, the labeling helps me organize it. 😊

[@decayinarab]

Happy New Year! this is the first video I've seen of yours. Good job and I've subscribed

[@theminimaljess]

This is so awesome! You did such a great job!

[@aditiids]

this inspired me to get my ass up and code (i'm actually doing a cs degree, but apart from my assignments i havent really made anything) great video!!!

[@quixxate8659]

Love the coding video you've done here! Would love to see more videos like this along with your vlogs! By the way, usually I code out my html in sections rather than doing the whole page first. I find it easier going section by section :)

[@EclipseThePast]

4:53 Personally, I like styling as I go. Just makes it easier for me to see how things interact with each other as I make changes.

[@sebeek00]

As a front-end developer I usually do all the HTML and then I just style it - because I love styling and I'm intentionally saving it for last as the icing on the cake, I love the feeling when the website is colored before my eyes exactly as it is in the web design. Is it correct to start with html and then do css or both together? If you like to start with html and then with css, it's okay. But from my experience, with bigger projects, you do some basic styling during the html. I love this video and especially that little lamp! :D

[@gio_hdz]

Great vid! Keep posting more videos like these.

[@mimino_codingbee4313]

I like styling and putting html of each section together. Like for header I would do the html for navbar and css together then I will code the banner with it's stylesheets and so on..

[@jul_bov]

Website looks amazing, I noticed a small typo on your website though. It says 'computer since' instead of 'computer science.' Thought you'd want to know. Happy new year!

[@stephranaway]

you’re so right!!!😳TY!🫶🏼

[@Editsofturkdizi]

Currently I am also studying computer science and I am enjoying it❤

[@stephranaway]

aw yay i’m glad!💖

[@Animezone-hr4kq]

Great video. Iook forward to more of your future projects.

[@ramizsaud317]

Really enjoyed watching this video. Keep it up💯

[@ch4r4d4_sec]

Happy New year Steph 🎉🎉

[@AmyGracie]

I enjoyed this vlog and i love how you stayed on the project inspite of the frustrations one of the being trying to center stuff 😭 Also, I like to write out all my HTML then style. For your first, i really believe you did good good, and dealing with the frustration as well and still completing the project, you did great steph,the website might not be perfect but you did good ☺️ Looking forward to more❤

[@christydurity]

your site looks so nice! (also i prefer to work on HTML first and then move to styling, but it's really up to what works best for you :) )

[@stephranaway]

thank u! and noted!!😎🫶🏼

[@lovetahsin]

I honestly need this motivation 😭 self studying html / css can be so boring at first but I love creating things so it can be a bit daunting

[@chisomogbonna8992]

You got this boo 🥹 You can change your environment too help

[@denzeroneYT]

It was interesting for me. It might be boring for someone who is learning more complex things than markup language. I like the fact that by writing such a simple thing, you can already get the result, how simple it is, in that sense, you wrote 1 CSS style and you already have a new background color.. but there are times when something is not clear and does not work, then the desire to continue disappears a little.

[@Akam-mm7ob]

satay hardworking mate❤

[@olive0209]

Amazing video and fire website you kind of inspired me now to look into making my own website now. I’m studying cs and now I see I still have lots to learn Happy new year btw 🎉🎉

[@stephranaway]

you got this!!! best of luck! and happy new year to you too🥳

[@aazainjaan]

Love this, Steph! Diving into frontend is such a fun journey, and a personal portfolio is the best way to start. Can’t wait to see what you come up with-you're doing amazing already! 🫶🏻✨️

[@IsaacRomero-w4b]

haha i totally understand you, i always have focus on backend, front end is a challenge for me

[@TROXEY23]

happy new year steph🎉

[@georgecraft225]

I really like your site, especially since you're a beginner in HTML and CSS! The custom font is one of my fav cursive fonts right now, ngl, and the color palette is also very cool! 😊 P. S. I'm a new sub and I'll go watch your other videos now! ❤

[@ag6253]

Looks great!

[@foodie_shorts-ww]

I can't explain it, but I really love your energy ❤ would be amazing if you post more 😊❤

[@compasssolutions]

Well done! When I work on sites, I make sure to add comments if I’m having a hard time staying organized.

[@pascalldecreator5659]

I personally write a portion say the navbar and then style it when i have the structure down

[@manikakarmakar635]

For the icons you can use Remix Icon

[@TheSevenCircle]

My two cents- Hope I can give my two cents as a former Fullstack and FrontEnd Dev, learning something new area is always hard so dont measure your progress with time but with the amount that you learned during that progress. Also starting with HTML and CSS is a smart choice, in case you want to develop frontend skills even more I suggest javascript (in case you dont already know) and then a framework like vuejs or angularjs (if someone comments about the frameworks, the point is to learn how to adapt to a new framework base on previous learnt skills not to became an expert in those frameworks). Portfolio Question - I dont have a personal portfolio right now but Im also building it, thinking of doing with VueJs, and prolly gonna add some type of backend to it get my git repos or other skills that I got over the years. Why I didnt do it before? I didnt really needed and still dont, only doing it know to fresh up some skills. FrontEnd Devs Question - I normally would divide the page by sections, then in every section I would put every I would create the main structure so I can have a visual reference point in the page and then add the styling that made more sense to start with (normally from back to front and bigger to small)

[@gdebojyoti]

Looks nice. Just one pointer - Please avoid using horizontal scroll bars on desktop (unless it is a deliberate choice to achieve a specific aesthetic / behaviour). The reason is that scroll bars on Windows devices (prior to Windows 11) are very prominent and look rather unpleasant when placed right in the middle of your web page. Cheers! :)

[@cherry_1425]

Website is absolutely f*cking fire 🔥🔥 Loved it. 😊😊

[@yabon87]

i really loved it. the color is so cute you look pro frontend dev specially on colorizing the page. so simple and attractive. from Ethiopia

[@3m3ka]

Hey, Steph. Frontend dev.🙋‍♂️ Great job, girl.🎉 It's always a great practice to write your HTML first. Duh, girl, it's gonna look ugly. 😂 😅 Tip: Always have an image reset. It would save you loads of headaches. For accessibility, you might want to have a dark shade of color for your a:hover tags. Also, don't make the whole card clickable. Just have a heading tag with an anchor tag that's clickable. E.g., Project Mars

[@Nakul_G]

Finally new video 😭❤

[@brocode04]

She is soo cute! 😭❤

[@rowenroelborgonia1774]

nice, Regarding of using html, which the codes take to long. If we use javascript frameworks like react and vue the code will cut into components which the code shorter because some parts of the code will cut into pieces... Overall, is a good start using HTML and CSS

[@Bhavishya_est]

Amazed:) , I am still wondering how you don't know about these stuffs but yeah it takes courage to speak in front of camera

[@idkebejsjsb]

Hey steph!!!! Happy new year!!! ❤

[@stephranaway]

happy new year!!🫶🏼

[@codeSolutionsMT]

There is no rule on writing all the html first before styling it with css. personally i write a section and then style it, and then repeat. I recommend to do what feels best

[@shanker4094]

yes you are learning for a beginner frontend it's awesome and also happy new year have a wonderful 2025 way to start the new year with you're video ✨✨🥳🥳

[@dee23gaming]

6:15 Ah yes, the classic. "How do I center a ? 😂

[@AmyGracie]

2:55 I literally saw this in my notifications and instantly came to check it out because i saw the title and I had never seen such before now... I'm still watching the video but I'm super excited for more of your videos. I am a 200lvl computer science student in Nigeria and i know HTML and CSS and a bit of JS(still working on being able to apply JS)... I started a frontend mentor challenge two days ago(the recipe page challenge) and today iss day 3/3 and i plan on doing the final touches today, I'll prolly drop a link to it when I'm done. Btw i love your set up and honestly clear and open your are honestly ❤️ Thank you for this lovely video🥹 (I'll definitely make more comments when I'm done watching the video)

[@Olamidecentt]

My sister 🌚

[@AmyGracie]

@Olamidecentt 🌚

[@dragofire2688]

Computer Science is so preppy and cute !!! I can't wait to major in this ^_^ !!!

[@yellowglowchild]

I hope you see this comment😅: I love seeing people show their process in real time. I’m a self-taught junior UX/UI designer, and I think learning HTML/CSS would really enhance my skills and knowledge, so I’m going to take on the challenge. ❓Important Question: How do you film yourself from different angles? Can you please share what equipment and software you use?

[@Red-qx7me]

A video about what you do as a backend dev would be great!

[@yashverma1616]

its fine frontend takes time to finish u did great

[@phantom_gaming9861]

Since you are only using HTML & CSS you can use "Formbold" to get the message in your mail. (i am not a developer btw.... just a college student) Also love the asthetics of the page...

[@taimurexe]

tip: for the icons, try using a library like phosphor icons

[@oNiiishant]

9:12 u can use title attribute on that font awrsome things so that when we hover over it it shows the name of the language on it it would be pretty awesome

[@Musroof786]

Happy new year 🎉

[@stephranaway]

happy new year!!!💖

[@isaaccastillo8628]

God and LORD Jesus bless you Steph, super interesting video. I started learn web development by myself in the late 2023 months, and right now I'm working and trying to build an indie app with React Native. Frontend is fun and I learn awesome things, I never think in the past, all the stuff I could learn in this past year. I hope and wish to you many blessings, in God and LORD Jesus, amen.

[@MelissaNambalirwa]

And yes, I also wanted to leave a message feature, but I decided to leave it for another time😂😂

[@gokulnath5734]

looking good 👍

[@darrenblake9347]

Hola Steph, yo he diseñado un par de paginas webs durante mis años en la universidad, lo que nunca hice fue el paso final de montarlo en internet. Saludos Desde Panamá.

[@erol-sql]

great job!!