How I learned to code websites

How I learned to code websites


– This year I learned a new skill. I learned how to professionally
code the designs I create and turn them into functioning webpages. It’s been a pretty fun
journey and in this video, I wanna tell you about it
and also about the tools and resources that I learned
to develop this new skill. So my journey with HTML
and CSS started back in my Myspace days. I used to love spending hours
and hours coding my page and turning it into the exact
vision that I had in my head. So that was my first real
introduction to writing a line of code and having it
create a visual outcome. Later on in university, I took
a interaction design paper I think is what they called
it and in there we had one brief which was to make an
HTML webpage using Dream Weaver and another which was to
make an interactive design using Flash. Neither particularly relevant these days, but it was at least an
introduction to interactivity and thinking about webpages as a whole. Since university, I’ve continued
to dabble in HTML and CSS is what I would say. I used to tweak the templates
of blogs that I’ve had and I suppose that my
redesign of charliemarie.com a few years ago when I really
got in and started with the very basic WordPress theme
and customized everything. That was a really good learning
experience for HMTL, CSS, and also a bit of PHP but I never really coded professionally. I didn’t know the professional
front end development workflow and that is what I
needed to learn to be able to code on the job at ConvertKit. We’re a very small team at
ConvertKit, so everyone kind of has to wear a lot of hats. When I first started on the
job, I’d design a webpage and then Dylan, who is the
other designer and who had started our whole WordPress
theme, he would build it or if he was too busy then
sometimes Nathan, who is the CEO would step in and build. So obviously that is not an
ideal workflow and it was pretty evident that I needed
to learn to code these pages myself and I was pretty
excited about that opportunity to be honest. You know I dabbled in code
over the years and so I thought it would be pretty cool
actually to be able to learn how to code my designs
professionally myself and have that control over it. So one of the first things
I did when I decided to take this whole front end
development seriously was sign up to Treehouse. Treehouse is an online code
school that I heard really good things about so I
thought I would give it a go. They have a free trial so you know, there was nothing to lose. It turned out to be a
really good decision for me. The way that Treehouse
structures their courses is just perfect for the way that I learn. They’re video based lessons
and all the videos are really, really well produced
and the tutors are very well spoken and there’s obviously
been really good scripts written and lots of
preparation done beforehand for the filming. As well as the videos throughout
the course, they also give you little quizzes just to
check that you’ve understood the things that have been
said in the past few videos and there’s also coding
challenges which I really like when you have to actually
implement the code that you’ve just been learning because
I learn best by doing. If I watch a video or read
a blog about something, I’m not really gonna remember
how to do it until I have tried it for myself because
that’s how it gets stuck in my brain. So, I love that that is part
of learning through Treehouse that you have to do these
coding challenges as you go to. The way Treehouse works is
that they have many, many different courses and then
those courses are sorta arranged into what that they call
tracks which is basically like a learning path. So for example, you
could join the WordPress development path and then it
would show you all the courses that are related to getting started with WordPress development for example. So far, I’ve chosen to just
dip in and out and take the individual courses that
are what I wanted to learn. I think sometimes the hardest
part of learning is knowing what to learn, you know,
especially when you’re doing self-pace learning and you’re
learning online and you’re not in a university setting
with like a tutor telling you what the things are you need to know. For me, I had Dylan, the other
designer that I mentioned, and my partner, Mark, who is
a developer, they looked at my skills and gave me some
tips on what they thought that I should learn to be
able to do this professional coding environment stuff and
so I took a lot of courses in basic development tools. I did the basics courses
in Git, GitHub, Gulp, learning how to use the console. All those things that go
along with HTML and CSS that you need to know to code
professionally which I didn’t really understand and didn’t
really know was a thing I should learn before someone
told me and so hopefully if you’re learning to code,
me telling you this now, and I’m gonna leave links
to those courses down below in the description, that will
be a helpful place for you to start perhaps if you’ve
been wanting to move past this dabbling stage and get more
into the professional side of things. Anyway, that was a bit of
an aside to say that what I like about Treehouse is that
they do have these learning paths so that if you’re
not sure what to learn but you know you want to
learn how to develop a website by yourself then you can join
the web development track and it will take through the
courses that you need to know in order to do that. So, yeah, Treehouse for me
has been really instrumental in taking my coding knowledge
from the dabbling side of things and just, you know,
messing around and seeing what works into the more
professional side and I still have my subscription running
actually work decided that they would purchase a team
account so now it runs through them, though I did pay for
it myself for a few months before we got that and it
was definitely worth it but now I know that it’s there
so whenever there’s something that I run into that I’m
realize I have a problem with, like for now, it’s at the
moment, JavaScript and jQuery are the things I know I need
to know because all the issues I keep hitting in my coding
come down to those things. So I’m starting some courses
on them and I know that Treehouse is always gonna be
a resource that I have there to go to and learn in a
style that I know suits me. I’ve also heard really
good things about a book and a course called SuperHi,
so perhaps that could be something for you to check out. I’ll link that linked
in the description too. Another thing I did was buy the
JavaScript for web designers by A Book Apart because
that was recommend to me but I soon discovered that
I cannot really learn code just from reading a book. I need to be doing it. Really, I think the biggest
thing with learning to code is figuring out your learning
style and finding a resource that suits it and works well with it. What is also ideal though
is just getting stuck in and trying things. I think too often we could just spend forever in a course, right? Like, I could do every single course in the Treehouse library and
wait til then I was ready to dive in and start coding
but it’s been really good for me to just dive in and
start doing little things here and there. Actually, one of the
first things I did was kind of a big project. I created the site for our
conference that we hosted earlier this year and I did whole
video talking about that, which I will link on a card
in the description if you want to hear more about it but the
reason I think that diving in is good is because you don’t
know where your knowledge gaps are until you hit them. Again, it comes down to know
what it is you need to learn and sometimes you don’t
know that until you try something and figure out that
there is an issue for you. You’ll be really surprised
at how much you pick up as you go along. My CSS skills, I would say,
were kind of rusty, like I didn’t remember all of the
selectors and things like that until I started getting
into it and having to google a lot of things but the
more you google something, the more you’re gonna remember it and that’s another thing too
that Google is always there to help you. Google is your friend. I have been told that
even the most professional and like most knowledgeable
of web developers still google for things so I don’t feel
ashamed at all about using it as a part of my web
development flow essentially. Whenever I get stuck on something,
I will google the problem and generally there will
be a stack overflow answer where someone else has
asked the exact same thing and someone has solved it for them. Guess that’s been my
coding journey so far. It sounds pretty messy and
that’s honestly because it hasn’t been this like one clear path. It’s been just a bunch of
trying stuff and learning and building skills as I go. So if you’re trying to
learn to code right now then I would say to just
dive in and if there’s not a project there waiting for
you, then give yourself one. I do think that you can
think of learning to code in two halves though. There’s the programming language
side where you’re learning, you know, how to write the
code itself and then there’s the other side which is
like the development tools, version control, things like that. The next big project I am
diving into is a system for running an online course
like platform on our site. We’re gonna have a couple
of online courses there and I need to figure out a
way to let students enroll and send emails to them at
the right time and tag them with the right things, et cetera. As well as like, design the
lesson pages and how the course will look and things like
that so, that’ll be fun and I’m sure I’ll make a video
on that when it comes about. One last tip for if you’re
looking to get started coding and you don’t have that
basic HTML and CSS knowledge that I gained through Myspace. There’s a resource called
Don’t Fear the Internet, which is free and it’s great information. I think it’d be great to go
through and I’ll link that down below in the description for you. If you decide you do wanna
get a bit more serious with it though then I definitely
would recommend Treehouse, it’s been a huge help for me
and I’ve left an affiliate link to that down below in
the description as well. So that has been my coding
journey, up until now at least because it’s definitely still ongoing. Hope you enjoyed hearing about it. Give it a thumbs up if
you did and I will see you in my next video. Bye!

90 thoughts on “How I learned to code websites

  1. Awesome video! Although I'm studying design and I'd like to become a UX designer in the future, I also like to learn new skills to make cool stuff 🙂 I've been learning Scratch for the last month, I am now starting App Inventor (just for fun, lol) and I've been learning Javascript since March 2017. Fun times!

  2. Awesome video!
    I've been a software developer professionally for a year and unprofessionally 3ish years and I must say googleing and stackoverflow are a huge help almost daily!

  3. Interesting to hear about designers who are learning to code… Great vid! I wanted to share another resource to whoever can find it useful https://learncodethehardway.org/ along with CodeAcademy is what worked best for me. (self taught web developer).

    What about the other side of the coin? Can you suggest any resources for back-end developers wanting to not be completely illiterate at design?? Thanks!

  4. For PHP/Backend coding Sublime Text is my recommendation. Perfect tool. Good for also for fornt end but there is better tool. I using it 99%. But for front end there is Bracked higly recommended for fornt end develop. It have several nifty features that will help you to be more efficient in coding. Same for sublie text only that is more backe end. And in front end yes HTML/CSS/JS. With JS I can say 90% solve with jQuery. jQuery is super convinient to solve quckly and you don't have to worry much aobut browser compatibility stuff and other issues that might take longler to solve with pure or how to say vanilla JS :). But worth to learn it also. For CSS code I coded qite long itme without any other tools since I tried SASS with compass. First time it was bit hard to get use to it. But once you learn and setup all to your needs it it will help you a lot. I recommend SASS if you think that css will be a big. WIth several 1000 lines when begin hard to maitanin. SASS is the big help in this. For small projects is not useful. And that is ture and I agree Google is the best assistent. I often ends with google and yes I end also witth stackoverflow, wordpress codex (the best WP documentation I ever seen) and php.net and can make list other sites less and more. Mainly frist thre 90% of time I end with it. It is not a shame at all till you know where and what to search. I can tell you I learnend in way that I literally in every project had something that I wasn't sure how I will do it. And that forced me to learn new stuff and dive in to new stuff. Eeven today. 😀
    Thumbs up for your courage for diving into coding world.

  5. Great video Charli, totally agree. Treehouse is definitely one of the best if not the best. CodeAcademy is great too but I prefer Treehouse. The $50 pro account is worth it. They even have a tech degree so those who want to learn, if you devote the time to it, could be up and running with code and have real-world projects to showcase in your portfolio: https://teamtreehouse.com/techdegree  – CodeAcademy has their own version of this that helps you build websites from scratch which looks like a worthy investment also: https://www.codecademy.com/pro/intensive/build-websites-from-scratch  — Lastly, a great sandbox to play around and test code easily is https://codepen.io

  6. I have moved to the UK at the end of Spring and have since been using Treehouse to learn to code as well. I think your video hit many wonderful points. Treehouse has been the best resource for me to learn as well as going to women tech related meetups. I did also want to comment on the whole googling everything comment. It is so true. Additionally, I think it's interesting how development can be this intimidating field but everyone feels a hero one min and a zero the next lol. Teaches everyone to be humble, doesn't?

  7. Wow! MySpace haha I started with the themes on tumblr lol
    Also I learned a lot with codeacademy, so if anyone is interested in starting to code hope it helps! 🙂

  8. I used to love coding my MySpace page, it was so fun haha! I definitely want to learn how to properly code now. Treehouse looks amazing! I'll definitely have to check it out 🙂 Thanks!

  9. This is really inspiring. I'm learning JS at the moment and enjoying it.

    Freecodecamp is another great place to learn code. It's got a hands on approach and there are not a lot of videos but you get projects to build.

  10. If you want check my code pen, and i don't think you need to watch the whole video, just check the introduction video for first series its only one minute long, and for second it schedule for day after tommorow it's two minute long,
    As my focus more on learning on new skill instead of making some thing practical, so in each video i teach some thing new, so introduction video will be fine as you will now what is going to new in the next video and why. and than you can check out the code pen just to see how it done,
    it will be wierd if this comment is bit off for you, as i regularly watch your video because i like them, so if this comment is bit off let me know, thanks and here is my code pen link https://codepen.io/search/pens?q=Arcodee&limit=all&order=popularity&depth=everything&show_forks=false

  11. Great video as a professional FED I would recommend learning sql queries couldn't do my job on a daily basis without these being able to join tables when collecting data is such a time saver. Also think people should learn how to run functions through putty, it's rare that you ever need to do things like grep a folder to find the existence of a reference in 1000 separate xml files but when you need to (normally epos related) you will be glad you know how.

  12. What do you think about people (cough, programmers) who think designers should stick to designing and leave coding to programmers? I only ask bc after I told a friend I wanted to learn to code he said "better to be an expert at what you're good at (ie, graphic design), than half ass something like coding".

  13. Everything was sounding so aspiring to do and daunting till u said….. dontfeartheinternet…. i think holy bells rang in my ears… thanks Charli!

  14. Well done for ramping up and expanding your expertise! The programming world has changed so much since I studied computer science in university in 2000. It sounds like you rolled up your sleeves and dived right in without letting the fear of not knowing or anxiety about failing or frustration holding you back. For me those are the biggest hurdles that keep me from learning something new.

  15. Hi amazing video once again and love that u are moving into coding too.. I need ur some advice on designing, I already have DM u on instagram , hope to see a soon reply..and also missing ur weekly vlogs too..!!

  16. Thanks! This was so helpful! I'm a graphic designer trying to get into the nitty gritty of UI design but I wasn't sure where to start my learning.

  17. Hi Ma'am!! Nw i saw ua info section dats y m sendin u (hi) nw… + 01 thing i wann 2 say dat i luv al d video u uploaded n + i luv d way u express ua-self..!! Again hi!! Haha..!! Stay blessed…

  18. I'd recommend (if you haven't already) learning some of the following to really improve your front-end developer skills. Having learnt JS & jQuery, I'd begin to look at some CSS precompilers such as SASS and LESS. You can read up about them, but they allow you to do things with CSS such as nesting, variables, includes and generally get a much better structure around your CSS, so well worth knowing. If you want to remain as a front-end developer it would also be very useful to learn a JS framework such as Vue.js, React and so on. Would be nice to know your intentions regarding your development path, front-end, back-end or full stack! Best of luck

  19. MYSPACE IS HOW I GOT INTRODUCED TO CODE TOO! 😁 so funny. The world should thank Myspace for half their coders. 😉

  20. Hi Charli! Im so happy to have found your videos. I am brand new, and have just watched a few of your videos.  My problem… where do I start? I was about to take a wireframing class to start. I would like to do UX/UI design- but (very) brand new with only a small amount of self taught web design, and … marketing, public relations, and branding background professionally. Any thoughts, so I dont get stuck down 100 rabbit holes would be greatly appreciated!

  21. Hello! Great video here! 🙂 I tried to get into programming a few times over the years, and each time things in life, as well as the overwhelming feeling of not knowing WHAT to learn because there are SO many languages and things TO learn. I've been really learning I need to just keep things simple and learn a bit here and there and really just jump into things. Great thoughts though and I really appreciate this video! 🙂

  22. Thanks for the advice! I'm currently taking online courses on Udacity on frontend web dev and this is a great free source I can definitely recommend!

  23. Great video and a great inspiration for me! Watching your videos really helps me on my learning journey. Thank you.

  24. i like web programming, And if i don't understand you very good.I want to say that you are charismatic person.I still watch your videos and if you speak fast for my english).Greeting from 🇲🇪

  25. Nice video and thanks for sharing your learning experience, I myself is moving more towards to learning front end development because I usually just design the websites but when I started writing my couple lines of code and seeing how it gets to together it was like a brand new WOW factor haha. I'm busy learning through Shaw Academy how to do HTML and CSS and will also look at Treehouse when the opportunity arises.

  26. THANK YOU. i found your videos by youtube searchign "web design for print designers". I've always known enough about web to make me realize i know nothing about web, and it's always been a big scary mess that i haven't had the time or energy to get into. Well, now i officially need to, to help my tiny team progress past their outdated 2002 web page to a real website. I've watched quite a few of your videos now and it's really helped me sort out how to bridge the gap between print designer and web designer, and realize that web designer and web developer aren't the same, and so many resources on how to get started. so thank you, so much.

  27. Great channel . Vising here from Pat Flynn's newsletter and video on his last trip to London ( losing his voice. Very helpful getting a designers view on things. Most businesses don't realize the marketing they have to do puts them in the media business, and most media people don't really the impact of design…(or maybe only the best media people do !!)

  28. I really appreciate the coding links for TreeHouse superhi, and coderbyte.com. After receiving my masters in human computer interaction, it would be nice to actually code the wireframes and user research results to explain my software concept.

  29. Thanks for this video. I've made sites in Adobe Muse and was wondering if you have used that at all and what your take on Muse is as a whole? I need to learn code simply because already muse is limiting and potential employers demand coding in job descriptions. Definitely going to try Treehouse out, as I also learn via getting my hands dirty. Keep the videos coming.

  30. Hey Charli! I've learnt to write HTML and CSS already for free through YouTube etc. I really want to join treehouse now to take things to the next level. Would you recommend I choose the Basic or Pro subscription and what worked for you? Thanks!

  31. I did learn how to code in university but I feel more connected with designing. Is there any sort of area where designing is the main focus?

  32. Learning to write code while having the design background are very valuable assets. I'm starting (restarting, really) the coding thing after being in the graphic design field for over 15 years. One thing that has stayed consistent for me all those years is my love of web design. I, too, had a MySpace page that I customized and I've been building static and CMS-based websites since 2001, but nothing major. I have a good handle on CSS and HTML but just need to up my JS and PHP skills.

  33. hi chari , i am from india.
    i just want to ask is it possible to become a developer who has not. enought money any paid courses ??
    and one think .
    person like you are responsible to make this world better

  34. Hi Charli, what have you heard about Super hi? Can you share a bit more? Is it good and would you recommend this to someone with no coding knowledge?

  35. Hey Charlie i have a question about WordPress. How did you learn it ? I've just had a bad experience trying to learn WordPress i didn't learn much. i noticed your conference page looked awesome and it had CMS integration, what resources did you use to learn WordPress ?

  36. So I've watch some of your videos today from 2015, 2016 and now 2017. Your accent's completely changed haha

  37. hi,..i'm really glad to get your fundamental coding systems to remember all of ways, recently am learning web designing and and i get fear and can't understand well about coding systems especially Javascript and bootstrap and other coding that sometimes give annoying and feel angry myself, please tell me the easy way to remember those codes please!

  38. I am a design student but i feel like the coding courses I have taken are more back end, programming and logical type of classes. I don’t really know anything about HTML or CSS and I really think its an important skill to have. If I can learn java, then I can learn HTML and CSS!!!

  39. Hi there ! Glad to find your channel! I'm a PHP snob; I have learned
    to code and I love it! Happy to find your video channel for some help!
    ~~~Nancy

  40. I want to be an independent programmer in the future but now I have to learn English because I …

    1/html
    2/CSS
    3/JavaScript
    4/php….

  41. Hi, I’m about the enroll for the UT Austin Bootcamp. But cost is so high. They’re gonna give certificate after I finish that’s why I choose them. What do you think about bootcamps??

Leave a Reply

Your email address will not be published. Required fields are marked *