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!🫶🏼
@@stephranaway hey, just wanted ask u about backend, is the backend on production a bit different ? like all i do right now is create routes middlewares and the logic that needs to be applied is inclined more on databases and queries, i dont feel like i am even doing engineering.
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!
As someone who’s self taught how did you go about learning the basic fundamentals like HTML and CSS I’m struggling a bit but working my way through it. Any feedback is appreciated
To save yourself some time in the future; a for sure way to center a is to place that div inside another div container:
This is header content
and set these CSS rules: .header-container{ display: flex; justify-content: center; align-items: center; width: 50%; height: 50%; } This will center the inside of the . Now you can use left, right, top, or bottom rules to move the container along with your H1 header around the screen easily. Note you may have to set your container to position absolute if you have other content on your page restricting movement: .header-container{ display: flex; position: absolute justify-content: center; align-items: center; width: 50%; height: 50%; } Hopefully this will help you finish you project by 2:00am instead of 2:01am! Happy coding :)
still learning how to code but wouldn't using display:flex and justify-content and achieve the same results without the extra div what ive been doing and that always centers
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.
thanks for this message! that’s an awesome goal - best of luck with it!! i hesitate to call myself an established developer haha, but i appreciate your words nonetheless. thank you!❤️
thanks for this message! that’s an awesome goal - best of luck with it!! i hesitate to call myself an established developer haha, but i appreciate your words nonetheless. thank you!❤️
@@darcos-i6s not really. I have a masters in business and will soon be taking a certificate program in front end web dev from the university of Washington to gain better skills
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.
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!
woah that’s amazing!! good luck with the game!:)) hahah i’m sure things have changed - i’m just a novice and kinda oblivious to the new tools out there:’)) just glad to know that im not alone in the struggle of figuring out how to center things!
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 😅
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.
I've been learning web development for about a year now as a self-learner, and I’m currently in 9th grade. I came across your video on TH-cam, and I have to say, it really amazed me! The way you’re learning and build this website from scratch was impressive, and your code was super cool. Keep it up sis! 😊😄
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 :)
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
I've self taught front-end web development over the last two years. I would recommend frameworks like Bootstrap 5, Tailwind CSS or even Pico CSS they are all very good frameworks. I style the things on the page as I go because I get lost pretty fast if I don't style it as I go and I prefer using SASS over CSS. I find it easier and it allows you to write better code (at least to me that's what it looks like) :).
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
Fantastic tutorial! You explained the concepts clearly, especially the structure of the HTML elements and how they come together to form a complete website. The real-time examples and step-by-step approach made it super easy to follow. Thanks for sharing such valuable content! 🙌
I had such a hard day in my coding class today, and when i came home and saw this notif, i quite literally hugged the computer 😭❤️ i know my girl steph is gonna get me through it!!
I'm not specifically a front-end developer, I'm full-stack and have to do a lot of both; I personally like to get the page set up, then worry about styling it later. Often I've tried to style on the go, and I don't have data for some elements (like my react components aren't on the page due to not having any flowing data or mocked data yet), and so styling is kinda useless at that time. I try to set up a shell of what the site will be, then work in sections (header, body, footer, sidenav, etc) and then within those, smaller sections as well (components within the body, perhaps something is displaying a list of components). That's what works for me - glad to see I'm not the only one struggling with styles :D
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!
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!
thank you for this!! i figured learning he basics would help with the more complicated stuff later😭 and that’s awesome!! good luck with your projects, and happy new year to you too :)
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!
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✌
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!
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
Hey, you'd be surprised! For simple static sites, it's still the best way to create a performant website with a small footprint. There are even successful web design companies that use plain HTML and CSS (and JS) to build client sites. Sure, they have a lot of their own boilerplate code written so they're not starting from scratch each time, but it's all handwritten code.
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.
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!
I love the warm, laid-back, down-home vibe in this video, and the interlude with cooking a tasty meal was a nice touch. If coding is like this, I'm all in! Except that you don't actually talk about programming itself. Not that that's a bad thing, but it'd be cool if you could walk us through some lines of code, maybe pick a section and tell us a bit about your thought process. Just a tiny suggestion...hope that's not too much to ask! Or, just tell us how you made that bulgogi!
ykw hell yea! It takes a lot of courage to say that and be transparent on what you know and don't know I'm in the same boat too! i feel like there's so much stuff i still don't know and there's nothing to be embarrassed about it (although i do know how it feels) on the positive note though it clears a lot of things up so you can cross eliminate what you want to learn and focus on
i’m so happy that I found your channel! I feel like I can relate to you in all aspects! I also have a bachelors degree in Biology, currently studying computer science. I really suck at programming but I really wanna continue learning and improving! this video is so calming and relatable! keep on vlogging 🥹
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!
i really enjoyed watching this ^^ i am a first year compsci student and watching you trying to get better at something that is really out of your comfort zone is really motivating. love you girl keep doing what you love!!!!
I think HTML5 and CSS3 are enough. Most what frameworks like Jquery do can be solved with CSS3 and the animation options with CSS3 are great! Also when JS is disabled and you put in some responsive code for the divs it will work anywhere with just with any screen size so keep the HTMl CSS mindset! You can style as you go trying different hex or rgb color codes also play with alpha and stacking layers of divs, bit of border-radius etc. Good luck on your coding journey.
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!
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🤭
It was fun watching you code, and you will definitely learn more from your mistakes than you would watching TH-cam videos. I have the source code but I have not had a chance to go over it yet. I am not a front-end developer per say, most of my work is done on the back-end. However I am proficient with HTML and CSS. I noticed that some of the comments suggested using frameworks, they are useful, but I think you would be better served learning how to use vanilla semantic HTML and CSS. Understanding how these technologies work together will help you in the future when you do start using frameworks. I find that learning how web browsers work in detail (DOM and CCSOM construction, rendering engines, etc.) will help you understand the complete process involved in displaying a webpage. Understand how things work under the hood and why they work the way they do will help you grow into a productive and competent developer. Looking forward to the next video.
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.
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.
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 TH-cam 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.
I feel like you are adorable. I used to chase things I couldn't build, but you have done a great job. You're working on things slowly and polishing your skills, which is extremely admirable.☺
Hi I’m an artist, designer, and web developer. I checked out your website, and I really like it! overall filling of using it is cosy and pleasant😊also you make it quite fast, especially since centering CSS can be such a pain. I have a design suggestions, though. It might be a good idea for smaller fonts to use serif or sans-serif instead of handwritten fonts. This would improve legibility and, in turn, readability. It would also help establish a clearer hierarchy, making the design feel more polished and structured. I hope you’re doing well! P.S. Don’t forget to optimize for mobile ☺
This is so stratifying to watch! This is a little suggestion for you! For me, it is better to do HTML and CSS side by side together instead of all HTMLs first. It allows me to spot and fix errors easily. If I messed up somewhere in CSS or something is not working, I can instantly fix the HTML on the go without affecting other elements!
I love the way you tell everything and btw the portfolio is actually looking very sick I love it and I am also learning HTML,CSS and javascript so you vlog also inspire me to make mine portfolio website as well
Hello! I am a self taught learner of front-end stuff myself (I do not like design and doing pretty things, very much prefer data analytics r,python, php, et al) but this is motivating. Like the way you input the floating icon in skills versus jotting down the names.
Wow, i've been procrastinating making my portfolio for so long, telling myself that it's important and require a lot of skills and whatnot, but you just proved to me that it's that simple, it's all about making the decision to sit down an produice something. I'm really gratefull for that. By the way the trick for centering things horizontaly is to set the left and right margins to auto, By exemple if you want to center a div horizontaly with a 5px margin on the top and bottom it would be like : div { margin: 5px auto; }
I'm currently in JavaScript and I know how to develop a website more or less with HTML and CSS, a good tip for you would be to use borders on everything you can to know the source of the error of not being able to center, or if some code isn't working... It helped me a lot, and congratulations!
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!🤍👀
happy new year! same to you! wishing you the best in your cs journey, and btw you should definitely make videos!!:) also while wish i worked at facebook/meta, i don’t😭 (but that’s the dream haha). my brother does tho! maybe that can be us in the future!
Im a student learning multimedie design and i absolutely love your layout and style. Its nice you think about the UX while designing. Also when I program a website I usually write the HTML first and then style it in CSS. But thats how I like to do it😊 Also i usually take longer to program like more then a day at least so its cool you got it done under a day.
Ah seeing you i remebered my days when i just started coding , now i can build complex applications and there was a time when centering a div seemed like the most difficult thing in the world . Time flies
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!
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.
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.
I recommend doing all the html first and then styling :) it's easier and I somehow feel I do things quicker than doing it the other way around (styling as I go). If I need to have something already styled before putting something else then I do style first then put the next thing above to center everything better, but at the start of every page I always law down all the important html and then style it all.
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
i'm glad u liked it! :)) ik it's super basic, but i'm really enjoying the learning process haha. thanks for being here! it's super cool that you're a web developer fr :)
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.
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
Hello ! I find this awersome ! I am getting into code by myself just to know if it can work for me and to figure out if commiting into a training could be the best move. I'm currently working as a cooker but I grew up surrounded by tech and I spend most of my free time on a computer and I love it ! So far, I've learnt a bit of html and very few of css, but your vid is so motivating. Seeing what we can actually do with it makes me want to keep going this way ! Pleake, keep doing from scratch front-end things, so I can get inspired and learn with it ! (Maybe can you capture a bit of your screen ?😁) (Sorry for my english, I'm not a native speaker)
LOVE IT OMG Im trying to learn html and css right now so this motivates me sm Ong i shud try and recreate my carrd as a website ad code it all when im done learning the language
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)
aw thanks so much! i'm glad you enjoyed it! :) it's awesome that you're starting out! i started only a couple years ago so am pretty much a beginner as well... let's learn together!❤️
My frontend tip, when just doing html/css, I do basic inline styling, like borders, font color, so I can see the boundaries and everything. I am a full stack developer and I like to use Angular and react.
there's a browser extension that you can use for that instead. It's called "Pesticide". You click the extension and it puts borders around every element on the page
As someone who has to code websites for school assignments, it depends a lot on both the assignment and my goal as to how i tackle the coding. I started with learning how to design a website with low-fidelity wireframes and made them mid-fidelity and sometimes high-fidelity through Adobe XD or Figma, and then I'd break up the pages in pieces: The header, the body and it's separate sections, and the footer, and within those the specific cards and then id or class names i'd give them. Right now however we have to work with the Foundation framework, so we basically had already designed a mobile software, and now we have to basically copy and paste the html and css from the Framework website and edit whatever we want according to our needs. It's in a way quicker but it also gets a lot messier. And don't get me started on css-grid, it's even more chaotic as a beginner😂😭
It's "cool" to see people who, even though they are juniors, are already in the field having difficulty solving things, this encourages those who are just starting out because normally they think it's impossible because they can't do something, but it's normal to have difficulties
Loved this! I'm in a rut with building, and this vid was so great to watch. It's great to build anything, even if you're starting from the beginning sometimes! 🌷 Would love to see more vids like these! PS- love your Luffy and Zoro posters
Newbies on this channel... I'm watching this vids looking all serious cuz next semester I'm finna have to learn this... but seeing zoro wanted poster on Ur wall kinda bring smiles to me
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
I'm a junior fullstack developer and honestly we don't really write native HTML and CSS, but instead we create components in HTML-like files (PHP / Laravel is in twig or blade templates), if you're using any React framework, it's probably even in java/typescript files and you're creating .jsx as html if that makes any sense lol. Then the framework generates the HTML pages for you. And for styling I mostly just write the structure and styling in each other because you have design files so you know where you're working towards.
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. 😊
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...
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 :)
that’s super good to know!! and will def be making more of this style of video:)) i really enjoyed the documenting & learning process, and i’m glad you liked it!!❤️
Its amazing to see backend-developers do frontend stuff :D. But I guess It would take me much more than 11 hours to do something valuable in the Backend. I usually dont do all the html and then the CSS. I am basically doing the sections --> styling, next section.
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 ^-^
i love this comments section... it's just so comfortable and sweet to read them!! and this vid too!
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!🫶🏼
@@stephranaway hey, just wanted ask u about backend, is the backend on production a bit different ? like all i do right now is create routes middlewares and the logic that needs to be applied is inclined more on databases and queries, i dont feel like i am even doing engineering.
@@HarshvardhanSankpal its pretty much the same, just a bit of changes in configuration for scalability and security measures and of course money :)
should do a little study group think it'd be useful to exchange ideas
@@HarshvardhanSankpalyou're basically doing engineering so sure. You're using a generic service approach which is amazing. Keep grinding
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!
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.
thanks for the encouragement!! and woah that’s super impressive! a real dev🤩
As someone who’s self taught how did you go about learning the basic fundamentals like HTML and CSS I’m struggling a bit but working my way through it. Any feedback is appreciated
Well, she DID write
"ik I'm doing this with just html & css, but i really want to learn react eventually"
There's SO MUCH wrong with this statement...
@@christian-schubert I see reading comprehension isn’t that common for you my friend…I was referring to the person who originally wrote the comment
The frontend look sick , and also that color combo with light green was super aesthetic love it
THANK YOU!!! light green’s my fav!
Us @@stephranaway
It’s not embarrassing. It’s really cool that you kept at it for 11 hours! And the website turned out beautiful! :-)
To save yourself some time in the future; a for sure way to center a is to place that div inside another div container:
This is header content
and set these CSS rules:
.header-container{
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
This will center the inside of the .
Now you can use left, right, top, or bottom rules to move the container along with your H1 header around the screen easily.
Note you may have to set your container to position absolute if you have other content on your page restricting movement:
.header-container{
display: flex;
position: absolute
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
Hopefully this will help you finish you project by 2:00am instead of 2:01am! Happy coding :)
😇sticking around-I'll learn alot from y'all🫡
Hi…can I send you message?
still learning how to code but wouldn't using display:flex and justify-content and achieve the same results without the extra div what ive been doing and that always centers
th-cam.com/video/7DOF_TXT7T8/w-d-xo.html
@@antisocialhas1471 it would
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.
have you experienced any problems with diploma/bachelor degree?
thanks for this message! that’s an awesome goal - best of luck with it!! i hesitate to call myself an established developer haha, but i appreciate your words nonetheless. thank you!❤️
thanks for this message! that’s an awesome goal - best of luck with it!! i hesitate to call myself an established developer haha, but i appreciate your words nonetheless. thank you!❤️
@@darcos-i6s not really. I have a masters in business and will soon be taking a certificate program in front end web dev from the university of Washington to gain better skills
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.
very good to know! thank you for the info :))
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!
woah that’s amazing!! good luck with the game!:))
hahah i’m sure things have changed - i’m just a novice and kinda oblivious to the new tools out there:’)) just glad to know that im not alone in the struggle of figuring out how to center things!
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 😅
damn cool! i am gonna learn front end and do this too ^^
I've always wondered how people do that, because it would only reflect on your device right so what's the point 😅
aw wait that’s awesome!! i hear that a lot too, but there’s something so rewarding about learning and doing it from scratch!🤩
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.
aw yay that's so cool!!! good luck with the programming journey!❤️
I've been learning web development for about a year now as a self-learner, and I’m currently in 9th grade. I came across your video on TH-cam, and I have to say, it really amazed me! The way you’re learning and build this website from scratch was impressive, and your code was super cool. Keep it up sis! 😊😄
hey i have also started coding vlog have a look
th-cam.com/video/7DOF_TXT7T8/w-d-xo.html
@codeandcrunch
Your video was amazing 🤩
Keep making those videos 🙌
Thanks for your kind words and encouragement!! It’s amazing that you’re starting so early :)) best of luck with your studies & web dev projects!
@@stephranaway
Thank you so much 😁
Good luck to you too 🤗
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 :)
aw omg wait that’s incredible!! 30 years, what a journey! thanks so much for the encouragement :)
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
thank you for the tips!!!😭🫡 i really appreciate it!
I've self taught front-end web development over the last two years. I would recommend frameworks like Bootstrap 5, Tailwind CSS or even Pico CSS they are all very good frameworks. I style the things on the page as I go because I get lost pretty fast if I don't style it as I go and I prefer using SASS over CSS. I find it easier and it allows you to write better code (at least to me that's what it looks like) :).
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
I think she meant the programming languages C and R as she was talking about the skills section
OMG!!! i didn’t know that at all what the heck! thank you!!!❤️
@@stephranaway There's also html codes to do copyright and registered etc. Just like parenthesis (because they can interfere with code parenthesis). ( is a ( and ) is a ) and is a space (non-breaking-space nbsp) © should be copyright :)
Fantastic tutorial! You explained the concepts clearly, especially the structure of the HTML elements and how they come together to form a complete website. The real-time examples and step-by-step approach made it super easy to follow. Thanks for sharing such valuable content! 🙌
I had such a hard day in my coding class today, and when i came home and saw this notif, i quite literally hugged the computer 😭❤️ i know my girl steph is gonna get me through it!!
this brought such a big smile to my face :')) thank u!!! you got this, cs classes are so freaking hard but you can do it!!!
I'm not specifically a front-end developer, I'm full-stack and have to do a lot of both; I personally like to get the page set up, then worry about styling it later. Often I've tried to style on the go, and I don't have data for some elements (like my react components aren't on the page due to not having any flowing data or mocked data yet), and so styling is kinda useless at that time. I try to set up a shell of what the site will be, then work in sections (header, body, footer, sidenav, etc) and then within those, smaller sections as well (components within the body, perhaps something is displaying a list of components). That's what works for me - glad to see I'm not the only one struggling with styles :D
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!
aw haha i love that you noticed :)) thank u!!❤️
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!
thank you for this!! i figured learning he basics would help with the more complicated stuff later😭 and that’s awesome!! good luck with your projects, and happy new year to you too :)
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!
you absolutely got this!! everyone operates at their own pace and what’s important is that you keep learning! i’m right there w you :))
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✌
noted!! thank u :))
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!
AMAZING!!! this helps a TON thank u!
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
aw that’s amazing!! hahah no i’m sure it looked great, but regardless, i’m sure it was a great experience :)
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
thank u!! and yeahhhh that makes a lot of sense😅 i probs should’ve just spent my time learning the other tools instead LOL
Hey, you'd be surprised! For simple static sites, it's still the best way to create a performant website with a small footprint. There are even successful web design companies that use plain HTML and CSS (and JS) to build client sites. Sure, they have a lot of their own boilerplate code written so they're not starting from scratch each time, but it's all handwritten code.
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.
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
thanks for the advice!!🫡
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!
hope the refresher went well!! best of luck with the learning!:))
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
you can do it!!!❤️
I love the warm, laid-back, down-home vibe in this video, and the interlude with cooking a tasty meal was a nice touch. If coding is like this, I'm all in! Except that you don't actually talk about programming itself. Not that that's a bad thing, but it'd be cool if you could walk us through some lines of code, maybe pick a section and tell us a bit about your thought process. Just a tiny suggestion...hope that's not too much to ask! Or, just tell us how you made that bulgogi!
ykw hell yea! It takes a lot of courage to say that and be transparent on what you know and don't know I'm in the same boat too! i feel like there's so much stuff i still don't know and there's nothing to be embarrassed about it (although i do know how it feels) on the positive note though it clears a lot of things up so you can cross eliminate what you want to learn and focus on
I just started to learn some basic coding and I´m obsessed, I liked your video so much! The website turned out great!
i’m so happy that I found your channel! I feel like I can relate to you in all aspects! I also have a bachelors degree in Biology, currently studying computer science. I really suck at programming but I really wanna continue learning and improving!
this video is so calming and relatable! keep on vlogging 🥹
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!
i really enjoyed watching this ^^ i am a first year compsci student and watching you trying to get better at something that is really out of your comfort zone is really motivating. love you girl keep doing what you love!!!!
I think HTML5 and CSS3 are enough. Most what frameworks like Jquery do can be solved with CSS3 and the animation options with CSS3 are great! Also when JS is disabled and you put in some responsive code for the divs it will work anywhere with just with any screen size so keep the HTMl CSS mindset! You can style as you go trying different hex or rgb color codes also play with alpha and stacking layers of divs, bit of border-radius etc. Good luck on your coding journey.
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!
thank u!! and that’s awesome, you totally should!! good luck with it :)
Top-notched cinematography 🧡✨
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🤭
It was fun watching you code, and you will definitely learn more from your mistakes than you would watching TH-cam videos. I have the source code but I have not had a chance to go over it yet. I am not a front-end developer per say, most of my work is done on the back-end. However I am proficient with HTML and CSS. I noticed that some of the comments suggested using frameworks, they are useful, but I think you would be better served learning how to use vanilla semantic HTML and CSS. Understanding how these technologies work together will help you in the future when you do start using frameworks. I find that learning how web browsers work in detail (DOM and CCSOM construction, rendering engines, etc.) will help you understand the complete process involved in displaying a webpage. Understand how things work under the hood and why they work the way they do will help you grow into a productive and competent developer. Looking forward to the next video.
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.
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.
Same thing for me, I'm in my second week of learning HTML and CSS.
you got this, i believe in you!!!😁💖
I love your content so much! the quality, the calmness you motivate me to code right now!
aww yay i'm so glad!!! good luck with your projects! ❤️
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 TH-cam 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.
this comment made me smile :)) thank u!
I feel like you are adorable. I used to chase things I couldn't build, but you have done a great job. You're working on things slowly and polishing your skills, which is extremely admirable.☺
Hi I’m an artist, designer, and web developer. I checked out your website, and I really like it! overall filling of using it is cosy and pleasant😊also you make it quite fast, especially since centering CSS can be such a pain. I have a design suggestions, though. It might be a good idea for smaller fonts to use serif or sans-serif instead of handwritten fonts. This would improve legibility and, in turn, readability. It would also help establish a clearer hierarchy, making the design feel more polished and structured.
I hope you’re doing well!
P.S. Don’t forget to optimize for mobile ☺
this is amazing advice - thank you!!! yeah i'm definitely leaning towards a different font now :') i really appreciate your help and insight!
This is so stratifying to watch! This is a little suggestion for you! For me, it is better to do HTML and CSS side by side together instead of all HTMLs first. It allows me to spot and fix errors easily. If I messed up somewhere in CSS or something is not working, I can instantly fix the HTML on the go without affecting other elements!
I love the way you tell everything and btw the portfolio is actually looking very sick
I love it and I am also learning HTML,CSS and javascript so you vlog also inspire me to make mine portfolio website as well
Hello! I am a self taught learner of front-end stuff myself (I do not like design and doing pretty things, very much prefer data analytics r,python, php, et al) but this is motivating. Like the way you input the floating icon in skills versus jotting down the names.
Wow, i've been procrastinating making my portfolio for so long, telling myself that it's important and require a lot of skills and whatnot, but you just proved to me that it's that simple, it's all about making the decision to sit down an produice something. I'm really gratefull for that.
By the way the trick for centering things horizontaly is to set the left and right margins to auto,
By exemple if you want to center a div horizontaly with a 5px margin on the top and bottom it would be like :
div { margin: 5px auto; }
I'm currently in JavaScript and I know how to develop a website more or less with HTML and CSS, a good tip for you would be to use borders on everything you can to know the source of the error of not being able to center, or if some code isn't working... It helped me a lot, and congratulations!
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!🤍👀
happy new year! same to you! wishing you the best in your cs journey, and btw you should definitely make videos!!:)
also while wish i worked at facebook/meta, i don’t😭 (but that’s the dream haha). my brother does tho! maybe that can be us in the future!
Im a student learning multimedie design and i absolutely love your layout and style. Its nice you think about the UX while designing. Also when I program a website I usually write the HTML first and then style it in CSS. But thats how I like to do it😊 Also i usually take longer to program like more then a day at least so its cool you got it done under a day.
I love this! I've learned some HTML and CSS myself and want to learn JavaScript. Thank you for showing your process.
dudeee, the video editing and the use of music is just so perfect! NICE
omg thank u :))
Ah seeing you i remebered my days when i just started coding , now i can build complex applications and there was a time when centering a div seemed like the most difficult thing in the world . Time flies
What are the chances!!! I made the exact same wireframe in my notebook omg!!! You're so cute I love it
Just signed up for my school’s web development class because of this video; thanks so much for sharing! :)
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!
that's awesome!! good luck with your website and your studies! glad u liked the vid☺️❤️
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.
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
You got this boo 🥹
You can change your environment too help
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.
you got this!!! it’s awesome that you love creating things❤️
@@stephranaway yeah I’m a bit on the creative side
@@chisomogbonna8992thank you
I recommend doing all the html first and then styling :) it's easier and I somehow feel I do things quicker than doing it the other way around (styling as I go).
If I need to have something already styled before putting something else then I do style first then put the next thing above to center everything better, but at the start of every page I always law down all the important html and then style it all.
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
i'm glad u liked it! :)) ik it's super basic, but i'm really enjoying the learning process haha. thanks for being here! it's super cool that you're a web developer fr :)
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.
ooo ok got it, that makes a lot of sense! thank you!! :)
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 :) )
thank u! and noted!!😎🫶🏼
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.
thank you:)) hoping to learn more this year! wishing you the best❤️
I’m so happy that you came on my feed I’m learning how to develop my own app
Nice!! Hope it’s going well!:))
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
You have done a pretty cool job as it's your first time. The thing that matters is that actually you have the spark to figure out what you don't know!
thank you! i totally agree :)
Hello ! I find this awersome !
I am getting into code by myself just to know if it can work for me and to figure out if commiting into a training could be the best move. I'm currently working as a cooker but I grew up surrounded by tech and I spend most of my free time on a computer and I love it !
So far, I've learnt a bit of html and very few of css, but your vid is so motivating. Seeing what we can actually do with it makes me want to keep going this way !
Pleake, keep doing from scratch front-end things, so I can get inspired and learn with it ! (Maybe can you capture a bit of your screen ?😁)
(Sorry for my english, I'm not a native speaker)
Good job! You're one of the few devs that code using just HTML and CSS instead of grabbing react lol. keep up the great work!
hahah just thought it'd learn the basics before picking up react! probs gonna get started with learning react now :)) thanks for the support! :)
LOVE IT OMG Im trying to learn html and css right now so this motivates me sm
Ong i shud try and recreate my carrd as a website ad code it all when im done learning the language
I'M GLAD! that sounds like a great idea! u got this! :)
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)
My sister 🌚
@Olamidecentt 🌚
thank you for being here:)) it’s awesome that you’re a cs student & taking on the challenges! best of luck with everything❤️
I love your energy and i am so glad to join you on your journey and also love coding even though I am starting afresh. It was a fun video
aw thanks so much! i'm glad you enjoyed it! :)
it's awesome that you're starting out! i started only a couple years ago so am pretty much a beginner as well... let's learn together!❤️
Happy New Year Steph!!!
happy new year!!!🥳
This is so awesome! You did such a great job!
aw thank you so much jess!!!❤️
My frontend tip, when just doing html/css, I do basic inline styling, like borders, font color, so I can see the boundaries and everything.
I am a full stack developer and I like to use Angular and react.
there's a browser extension that you can use for that instead. It's called "Pesticide". You click the extension and it puts borders around every element on the page
As someone who has to code websites for school assignments, it depends a lot on both the assignment and my goal as to how i tackle the coding. I started with learning how to design a website with low-fidelity wireframes and made them mid-fidelity and sometimes high-fidelity through Adobe XD or Figma, and then I'd break up the pages in pieces: The header, the body and it's separate sections, and the footer, and within those the specific cards and then id or class names i'd give them. Right now however we have to work with the Foundation framework, so we basically had already designed a mobile software, and now we have to basically copy and paste the html and css from the Framework website and edit whatever we want according to our needs. It's in a way quicker but it also gets a lot messier. And don't get me started on css-grid, it's even more chaotic as a beginner😂😭
Also, i highly recommend checking out the WCAG guidelines for usability and user friendly design in your website :)
It's "cool" to see people who, even though they are juniors, are already in the field having difficulty solving things, this encourages those who are just starting out because normally they think it's impossible because they can't do something, but it's normal to have difficulties
It's definitly pretty good, and honestly, it's incredible that you build it from scratch without a complete design.
omg😭 this means a lot tysm❤️
This video encourages me a lot, even motivates me. Thank you. Also fun to watch and nice set ups you got there for work place.
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 !!
aw yay you got this!! good luck with the projects!🫡
Loved this! I'm in a rut with building, and this vid was so great to watch. It's great to build anything, even if you're starting from the beginning sometimes! 🌷 Would love to see more vids like these! PS- love your Luffy and Zoro posters
aw thanks so much for the encouragement!! hope your project is going well :))💕 (and it's always nice to meet a fellow one piece fan🤝)
Newbies on this channel... I'm watching this vids looking all serious cuz next semester I'm finna have to learn this... but seeing zoro wanted poster on Ur wall kinda bring smiles to me
ZORO'S MY FAVVV! glad to meet another one piece fan 🤝 good luck with the semester!!
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
aw that's so real - good luck with it!!! :))💕
i really like your choose the main color of the website, so cute, nice job
green for the win! 🙌 thank you for the kind words :))
WOW For the first attempt and 11 hours of work the results are amazing!
I'm a junior fullstack developer and honestly we don't really write native HTML and CSS, but instead we create components in HTML-like files (PHP / Laravel is in twig or blade templates), if you're using any React framework, it's probably even in java/typescript files and you're creating .jsx as html if that makes any sense lol.
Then the framework generates the HTML pages for you. And for styling I mostly just write the structure and styling in each other because you have design files so you know where you're working towards.
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. 😊
that’s awesome!! you got this!🤞 and thanks for the tip!!!
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...
super good to know, thanks for the advice & resource!!:))
Currently I am also studying computer science and I am enjoying it❤
aw yay i’m glad!💖
First time seeing your channel im loving this video as i am a student going thru full stack courses thanks for the inspiration
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 :)
that’s super good to know!! and will def be making more of this style of video:)) i really enjoyed the documenting & learning process, and i’m glad you liked it!!❤️
Great video, I am learning HTML and starting to understand it more, I update our website at my work. It’s fun. 🤩
Love watching these videos. Keeps me motivated and inspired. 🤩
i'm glad!! ty for being here, and good luck with your work! :)
Happy new year !! I am super super proud of youuuuuu
aww thank you!! happy new year to u too!❤️
The cutest frontend developer ever...Love that colors and the Ui is also clean
Its amazing to see backend-developers do frontend stuff :D.
But I guess It would take me much more than 11 hours to do something valuable in the Backend.
I usually dont do all the html and then the CSS. I am basically doing the sections --> styling, next section.
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 ^-^
aw wait yay i’m so glad!!! hope your project went well :))💖
for centering u should definitely look into class wrappers this is super simple and makes it ez for responsive design when u keep max-width in mind!
Will do, thanks for the tip :)
I love this kind of content.😊 thanks for uploading the coding aesthetic videos !! ❣️
so glad u enjoyed it!! ty for being here!🤩