Steph Ran
Steph Ran
  • 34
  • 1 511 667
coding my first website from scratch (using only html/css!)
today we’re building a super simple personal portfolio website! so i don’t know like... anything about frontend development, but I’ve always wanted to learn! so I thought i’d take today to force myself to build a very simple website to learn some new frontend development coding skills and to hopefully come out with a decent looking personal website! plz be nice in the comments ik this is very ~beginner~
-
Hey guys! I'm Steph, a junior software engineer with a biology & computer science background. I’m here to document myself growing up with hopes that you’ll find some entertainment, comfort, or relatability in it! Welcome to my little corner of the internet!
-
✿ website link: (my domain is being ✨transferred✨ so I’m using the default github pages domain right now): stephanieran.github.io/personal-portfolio/
✿ source code: github.com/stephanieran/personal-portfolio
-
✿ instagram: @stephranaway stephranaway
✿ some product links if you’re interested! full transparency - i earn a bit of commission with these links!
Mouse - amzn.to/4gGYs9u
Mouse Pad - amzn.to/3BGrQgN
Wrist Rest - amzn.to/3DznQiu
Keyboard - amzn.to/41ZTO1B
✿ music credits (in order):
Music by TossedOnion - It's A Good Day - thmatc.co/?l=F6852E99
Music by Aixie - Hazy Days - thmatc.co/?l=34F05FEF
Music by MP3vius - back in the day - thmatc.co/?l=D21EFAFA
Music by massobeats - gift - freetouse.com/music
Music by TossedOnion - Strawberry Sundae - thmatc.co/?l=BEFFEECB
Music by Rebecca Mardal - Sunday Coffee - www.epidemicsound.com/track/SsTl96URaP/
THANK YOU FOR 33,531 SUBS!!! :D
Переглядів: 23 278

Відео

a week as a 24yo corporate girlie in nyc
Переглядів 15 тис.14 днів тому
welcome to a other week in my life as a junior software engineer in nyc! - Hey guys! I'm Steph, a junior software engineer with a biology & computer science background. I’m here to document myself growing up with hopes that you’ll find some entertainment, comfort, or relatability in it! Welcome to my little corner of the internet! - transitions heavily inspired by @chief_preeth on tiktok!🫶🏼 - ✿...
taking myself on a solo date in nyc
Переглядів 8 тис.Місяць тому
here’s your sign to take yourself on a date! this isn’t something i usually do for myself, but i’m so glad i did. it was so fun exploring the city and treating myself! you should do this too! :) also disclaimer i’m in a healthy loving relationship LOL this was entirely just for me to have fun and spend some time with myself! - Hey guys! I'm Steph, a junior software engineer with a biology & com...
work week diaries | struggling with work-life balance, reconnecting with friends, & trying to cook
Переглядів 18 тис.Місяць тому
here’s a random week in my life where i struggle to figure out this work-life balance stuff! - Hey guys! I'm Steph, a junior software engineer with a biology & computer science background. I’m here to document myself growing up with hopes that you’ll find some entertainment, comfort, or relatability in it! Welcome to my little corner of the internet! ✿ instagram: @stephranaway ste...
desk makeover vlog | making my work from home desk setup a tiny bit more ~aesthetic~
Переглядів 11 тис.Місяць тому
come with me to redo my desk setup!!! i’ve literally been putting this off for months, but it’s finally done, and i think she’s pretty cute! this is by no means as aesthetic or cute as other desk setups, but i gave it my best.😭 hope you enjoy!! :) Hey guys! I'm Steph, a junior software engineer with a biology & computer science background. I’m here to document myself growing up with hopes that ...
turning 24 alone in nyc
Переглядів 18 тис.2 місяці тому
One more year until my brain is fully developed! Welcome to this lonely birthday vlog where I go about a very typical work day in nyc! I’m a bit nervous about this video since I open up a bit on the messy thoughts i have in my head, but I hope this helps even one person who’s going through similar lonely times in their life. Always here for you and cheering you on!💞 Hey guys! I'm Steph, a junio...
a day in the life of a junior software engineer (but on crutches lol)
Переглядів 19 тис.3 місяці тому
Come to work with me! Jk we’re not going anywhere bc I sprained my ankle really badly :’). But I am gonna work from home (and from a coffee shop)! I appreciate you being here and tagging along while I go about a pretty boring WFH day! Hey guys! I'm Steph, a junior software engineer with a background in computer science & biology. I’m here to document myself growing up with hopes that you’ll fin...
first few days of work as a 23yo corporate girlie in NYC
Переглядів 31 тис.3 місяці тому
i finally started my new job, and i thought it’d be fun to take you guys along with me! to the working adults out there - how tf do you do this without getting extremely sleepy throughout the day??? even though this vlog is all over the place and kinda boring, thanks for coming along with me as i try to figure out how this whole 9-5 thing works. enjoy! :) also i’m gonna keep where i work privat...
My Entire Move to NYC, Documented
Переглядів 22 тис.5 місяців тому
i did the thing! i moved to nyc! i feel so lucky that i could make this big move for myself, and i'm glad i could take you along with me! thanks for sticking around throughout my time in chicago… now onto the next! hope you enjoy the vid :) Hey guys! I'm Steph, a recent college grad who studied computer science and biology and is currently working as a software engineer. I’m here to document my...
Coding This Video to Post When I Get 10,000 Subscribers! (10k sub special, thank u guys sm ily)
Переглядів 14 тис.8 місяців тому
I’m writing a lil program that will upload this video for me when I hit 10,000 subscribers here on youtube! Thought this would be a fun way to commemorate this moment hehe. I really appreciate you guys being here and supporting me. It means a lot :)) Hey guys! I'm Steph, a recent college grad who studied computer science and biology. I’m here to document myself growing up and trying to be bette...
My Entire Job Search Process, Documented (new grad, software engineering)
Переглядів 377 тис.8 місяців тому
Guys… getting a job as a new grad was so difficult. I documented my new grad job hunt process for software engineering, and I’m here to share it with you! This was definitely one of the most humbling experiences ever :’). If you’re a new grad watching this, know that I believe in you!!! You’ll get there, I promise. Just stick with it. Some helpful resources during my recruitment process: - The ...
My First Hackathon!
Переглядів 554 тис.8 місяців тому
Get ready friends, you’re about to witness a LOT of beep boop coding! This is an old upload, but I wanted to share my experience at my first-ever hackathon. For those who are unfamiliar, a hackathon is an event where teams work together to build computer programs usually within 24 or 48 hrs. This one was 24 hours and took place at UW-Madison (MadHacks 2023). Enjoy! :) Hey guys! I'm Steph, a rec...
An Unglamorous Day as a Software Engineer | New-Grad & Remote (in Chicago)
Переглядів 77 тис.8 місяців тому
Hey friends! Here’s a very real, unfiltered day in my life as a new-grad fully remote software engineer based in Chicago! I hope this gives some perspective into what wfh tech life can be. Enjoy! :) Hey guys! I'm Steph, a recent college grad who studied computer science and biology. I’m here to document myself growing up and trying to be better with hopes that you’ll find some entertainment or ...
My Entire College Experience, Documented
Переглядів 26 тис.Рік тому
The past 4 years in 12 minutes! Can’t believe it’s over. Thanks for a wild time, UChicago! Hey guys! I'm Steph, a recent UChicago grad who studied computer science and biology. Welcome to my little corner of the internet! ✿ instagram: @stephranaway stephranaway ✿ music credits (in order): Music by Mei Anima - Flowers Lay - thmatc.co/?l=C2AD46C7 Music by Mr. Jello - Hitting Hard -...
UChicago Graduation Vlog | Class of 2023
Переглядів 3,3 тис.Рік тому
Here's a super late grad vlog! School's starting for most students right now... so maybe this can be some motivation to start the year strong??? IDK! Sorry for such a late upload but here's uchicago's class of 2023 graduation! We did it! :) Hey guys! I'm Steph, a recent UChicago grad who studied computer science and biology. I make videos about college, my professional journey, and other random...
study with me for my (last-ever!) cs final exam at uchicago!
Переглядів 10 тис.Рік тому
study with me for my (last-ever!) cs final exam at uchicago!
A Fun Weekend at UChicago (very unproductive lol)
Переглядів 5 тис.Рік тому
A Fun Weekend at UChicago (very unproductive lol)
A Typical Week at UChicago (senior spring edition!)
Переглядів 6 тис.Рік тому
A Typical Week at UChicago (senior spring edition!)
Volleyball Week in My Life | Club Volleyball National Championships 2023
Переглядів 2,1 тис.Рік тому
Volleyball Week in My Life | Club Volleyball National Championships 2023
My First Tech Conference!
Переглядів 2,8 тис.Рік тому
My First Tech Conference!
cram with me for my CS final project | all-nighter at the library
Переглядів 9 тис.2 роки тому
cram with me for my CS final project | all-nighter at the library
Finals Week at UChicago | Computer Science Edition💻
Переглядів 15 тис.2 роки тому
Finals Week at UChicago | Computer Science Edition💻
Study With Me for a Final Exam in 24 Hours | Computer Science at UChicago
Переглядів 28 тис.2 роки тому
Study With Me for a Final Exam in 24 Hours | Computer Science at UChicago
COLLEGE WEEKEND VLOG | University of Chicago | studying, parties, volleyball tournaments, & cafes
Переглядів 3,7 тис.2 роки тому
COLLEGE WEEKEND VLOG | University of Chicago | studying, parties, volleyball tournaments, & cafes
STUDY VLOG | productive days at UChicago: classes, coffee shops, & coding
Переглядів 7 тис.2 роки тому
STUDY VLOG | productive days at UChicago: classes, coffee shops, & coding
First Week of College | University of Chicago
Переглядів 26 тис.2 роки тому
First Week of College | University of Chicago
Last First Day of College | University of Chicago
Переглядів 3,7 тис.2 роки тому
Last First Day of College | University of Chicago
Cramming our physics homework the day it’s due😬
Переглядів 2,9 тис.2 роки тому
Cramming our physics homework the day it’s due😬
A Day in My Life at UChicago
Переглядів 17 тис.2 роки тому
A Day in My Life at UChicago
A Day in the Life of a D3 Student Athlete | ft. Eugenia Lee
Переглядів 2,9 тис.2 роки тому
A Day in the Life of a D3 Student Athlete | ft. Eugenia Lee

КОМЕНТАРІ

  • @genigeekus
    @genigeekus 3 хвилини тому

    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

  • @jibbish7148
    @jibbish7148 5 хвилин тому

    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.

  • @ziloDev
    @ziloDev 59 хвилин тому

    4:31 style as I go...I just feel it's seems like less work than to complete the html before styling

  • @Red-qx7me
    @Red-qx7me Годину тому

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

  • @darrenblake9347
    @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á.

  • @vardhanSparsh
    @vardhanSparsh Годину тому

    Wishing u a very Happy Birthday 🥞

  • @vardhanSparsh
    @vardhanSparsh Годину тому

    I'm too learning Web Development, and one thing I lack is consistent practice......any advices on it?? Anyways Nice Video

  • @codeSolutionsMT
    @codeSolutionsMT 2 години тому

    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

  • @joshkim3427
    @joshkim3427 3 години тому

    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

  • @aazainjaan
    @aazainjaan 5 годин тому

    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! 🫶🏻✨️

  • @dragofire2688
    @dragofire2688 5 годин тому

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

  • @therealdetour3774
    @therealdetour3774 5 годин тому

    Html then css then JS then css again then HTML then mostly JS

  • @ag6253
    @ag6253 5 годин тому

    Looks great!

  • @Pulsefire1995
    @Pulsefire1995 5 годин тому

    Computer Science isn't programming. They only teach you back end stuff. If you want front end, that's something you will have to teach yourself along the way. But the backend builds a strong foundations on how to problem solve.

  • @ianellis3987
    @ianellis3987 6 годин тому

    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

  • @lucasgaudie-ley9390
    @lucasgaudie-ley9390 6 годин тому

    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!

  • @rjarora5054
    @rjarora5054 6 годин тому

    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 ^-^

  • @mirukubento
    @mirukubento 6 годин тому

    Today is my first time learn how to code in my 30s

  • @muadrico
    @muadrico 6 годин тому

    Didn't see where you exactly used tailwind css, because I created something similar using zola for static site creation, html and tailwind. Guess you need JS and some kind of a backend for the message thingy.

  • @censura1210
    @censura1210 7 годин тому

    this can be done with v0 and gpt in less than 10 minutes.

  • @inioluwaolaleye9434
    @inioluwaolaleye9434 7 годин тому

    I'm a html first then css after kinda guy

  • @Malpense
    @Malpense 7 годин тому

    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!

  • @nergizken
    @nergizken 7 годин тому

    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!

  • @TheSevenCircle
    @TheSevenCircle 8 годин тому

    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)

  • @gigantetelles6409
    @gigantetelles6409 8 годин тому

    É muito bizarra essa dublagem automática do youtube, más gostei do visual e qualidade de produção do vídeo acho que vai ser interessante gosto da área de programação

  • @pcleanse
    @pcleanse 9 годин тому

    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
      @marlonmoises6598 5 годин тому

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

  • @Alex-mi6xc
    @Alex-mi6xc 9 годин тому

    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!

  • @pascalldecreator5659
    @pascalldecreator5659 10 годин тому

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

  • @ijeomaemmanuella6880
    @ijeomaemmanuella6880 10 годин тому

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

  • @giibbu
    @giibbu 10 годин тому

    one load of laundry is 5 fucking dollars????

  • @Yo-mj8yq
    @Yo-mj8yq 10 годин тому

    I really love the vibe of everything 🫂🫂🫂

  • @arai8997
    @arai8997 10 годин тому

    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!

  • @Ruhan-f4n
    @Ruhan-f4n 10 годин тому

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

  • @patronusstag
    @patronusstag 10 годин тому

    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 😅

  • @gio_hdz
    @gio_hdz 11 годин тому

    Great vid! Keep posting more videos like these.

  • @JoshuaSwafford61995
    @JoshuaSwafford61995 11 годин тому

    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. 😊

  • @ch4r4d4_sec
    @ch4r4d4_sec 11 годин тому

    Happy New year Steph 🎉🎉

  • @alhaque5497
    @alhaque5497 11 годин тому

    I just finished my Masters, and had this video recommended me. God this video gave me some hope on finding a job in this market, probably will rewatch time to time in case I feel hopeless :|

  • @sunilkumar_vlogs
    @sunilkumar_vlogs 11 годин тому

    Great Work; My Portfolio Link : www.sunilkumarsahoo.in

  • @_Gabe_117
    @_Gabe_117 11 годин тому

    Bulma CSS and Bootstrap are also great

  • @taimurexe
    @taimurexe 11 годин тому

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

  • @twisted_cpp
    @twisted_cpp 12 годин тому

    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.

  • @Hierothewordsmith
    @Hierothewordsmith 12 годин тому

    Why is your iPad so old though?

  • @Hierothewordsmith
    @Hierothewordsmith 12 годин тому

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

  • @compasssolutions
    @compasssolutions 12 годин тому

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

  • @Antwaun43
    @Antwaun43 13 годин тому

    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.

  • @khalidhossain787
    @khalidhossain787 14 годин тому

    I also started learning . I'm currently learning HTML. Using UA-cam videos.

  • @itzShynee575
    @itzShynee575 14 годин тому

    2:52 I use Vim BTW LOL

  • @khalidabbas8744
    @khalidabbas8744 14 годин тому

    will you marry me...?

  • @Nithin-ft8gm
    @Nithin-ft8gm 14 годин тому

    Color combo was nice i liked it is this published