So you are perhaps a newbie? Or someone learning to code online but feel like you are missing out something or might not be doing it right? Well, this article is just for you ...most probably XD.
Before I share the road to start Web Development I want to say that whatever I say is no way near a perfect Roadmap, I will just be sharing what I learned from my experience in the last 1 year since I started learning Web Development, feel free to twist the things your way but remember the concept remains same anyways.
Let's understand what's HTML and CSS?
But now the question comes where can I learn them? Well for that, I'm listing some Free resources where anyone can start learning or revise what they know already.
- Traversy Media HTML and CSS Crash Courses
- The Net Ninja HTML and CSS Crash Courses
- Colt Steele YouTube Bootcamp
- Advance CSS concepts from Kevin Powell
Choose one from the above and get going ✨
Before you move on to building layouts make sure you know:-
- HTML Basic and Semantic Tags
- CSS Selectors, box-model, basic properties with their values, positioning
- CSS Flexbox (lifesaver - here is Wes Bos Free course which is a good one flexbox.io)
- CSS Grid (Here is Wes Bos another free course for CSS Grid cssgrid.io)
- CSS Media Queries for Responsive layouts
Now that you know the Basics with CSS Flexbox and Grid, you have to practice building some web pages and I am gonna recommend you an awesome site where you can try building layouts and get some feedback for your work too.
Frontendmentor.io is an awesome site that contains layout challenges for beginners as well, they will basically give you a zip file containing images, design, and style guide which you'll have to follow and you just have to code it without thinking about designing at all! Just choose a beginner level challenge and start doing it. This was where I got my confidence that Yes, I can build layouts now. You can join the Frontendmentor community on Slack where you can have some mates and share your work and get some awesome feedback which will result in your growth.
These were some of the best resources for HTML and CSS that I have used during the last year since I started my journey.
Haha, these gifs are cool 😂, I hope you enjoy them along with the blog.
Yeah Fab, we got it now tell us where can we learn this amazing language?😆 Sheesh, I was just coming to that...
There are so many resources that people often get confused, so I will explain when and why to use the mentioned resources.
These were all visual learning resources but if you like to learn from written resources - I gotcha 🥳.
Hehe I know I am just so Fab 😁 (Sorry cockiness comes with me as a package)
- FreeCodeCamp.org, Codecademy.com, and Scrimba.com - All of them are awesome for practicing JavaSript and improve your problem-solving.
- You don't know JS - Might not be your best option as a beginner but you can try reading the book after you get good at fundamentals from the above-mentioned resources.
- Catalin Pit Blogs - His Blogs are really helpful and for more, you can get connected to him on Twitter and Instagram @catalinmpit .
- Chris Ferdinandi Go make things newsletter - An Awesome Daily Tips Newsletter that will teach you many new things and help you to grow as a developer.
- Data types
- String manipulation
- Promises, Async/Await
- DOM Manipulation - Document Object Model is an object-oriented representation of the web page, which can be used to update the content, structure, and style of the HTML and CSS Documents.
Phew, that was a lot, although I still have some resources as a beginner, these will be enough. (Stay tuned for upcoming blogs with more resources). All that I mentioned above comes under Front End Development (Deals with client-side development - what a user can see and use)
After you are comfortable with building static sites its time to move onto a bit complex part - to build web apps (Don't worry, if you followed the above-mentioned track you'll be ready to get your hands dirty with some code). Now now, I am not asking you to build the new Facebook or Twitter, We'll start small with a CRUD Todo App which stands for Create Read Update Delete that means building an app where a user can create Todo's, Update and Read the existing ones along with being able to Delete the desired ones. Try creating this on your own at first and don't be afraid to google anytime you feel like you're stuck or can't think of anything (cuz that will happen a lot, trust me).
When you're comfortable with building a Todo App from the scratch without any tutorials at last, on your own then move onto building an app where you fetch some data from an API and display accordingly on the webpage. It can be a Dad Jokes App followed by A Weather App or A Movie App.
You can surely find tutorials for the above-mentioned Projects but try doing these projects again till you can create them on your own without tutorials which can be your 2nd, 3rd, or 4th try doesn't matter how long it takes but make sure you are good at it in the end.
A few tips I would like to give at the end are:-
- Don't be sad if you can't remember all HTML tags or CSS at first, it's totally normal to not remember anything at the start. You will remember them better when you keep building stuff more often plus Google exists for a reason alright even senior devs use google all time and its one of the most important skills as a developer to know how to google so don't you dare feel bad for googling too much.
Use your mind as a processor, not as a memory - Just know what and where to find stuff and you are good to go.
Building layouts will feel like climbing Mount Everest at first but don't worry just break down page sections into blocks, use pen and paper and make boxes around elements and then try building the page in chunks - this is the best way to learn.
Building Web Apps will make you feel - "Holy Cow, how am I supposed to think like that ?"
But don't worry once you get familiar with how others build things your mind will start thinking like that too, just be patient as Patience is the key.
I won't say don't compare yourself to others as I still couldn't get myself to do that completely but I'll share what I do when I start comparing myself to others - I tell myself "It's okay if someone learned it faster than me or became good at something fast, I have a different life with a different timetable so I'll go according to mine and let others go according to theirs. I am doing my best and I am enjoying the process, I'll reach my destination sooner or later but I WILL"
Don't let questions like "I am not good enough, maybe it's not for me?" get to you, you can effin do whatever you want once you are determined.
If you get stuck and have googled enough (< a day) then try contacting other developers asking for help telling them straight that you are stuck here and have googled but couldn't solve it still. Never message anyone just Hey or Hi, mention why are you DMing them as it increases the chance of them helping you. Instagram and twitter have amazing #100DaysOfCode, #Buildupdevs and #DevinitelyHealthy community which are very active and always ready to help others.
At last but not least PLEASE take breaks frequently as they help to refresh your mind and come back stronger.
I am gonna wrap this blog here as its enough for a beginner and I don't want anyone to get overwhelmed with the extra Information. I will be continuing the series in the future as I keep learning more.
PS: If you need help or have any questions then connect with me on Twitter and Instagram @fabcodingzest (I won't be active on Instagram for June 2020 as I am taking Insta Break but you can find me on Twitter)