DEV Community

Cover image for My Journey as a New Full-Stack Web Developer (Day-1)
Angshuman
Angshuman

Posted on

1

My Journey as a New Full-Stack Web Developer (Day-1)

1.THE FIRST STEPS

SETTING UP WORKSPACE
The first thing I did was configure my workspace. I chose Visual Studio Code (VS Code) as my code editor because of its flexibility and rich ecosystem of extensions. To ensure my setup was efficient and tailored to my needs, I:

1.Installed useful extensions like Live Server (for real-time preview of my website), Prettier (for code formatting), and Emmet (for faster HTML and CSS writing).

2.Created a project folder with subfolders for html, css, and javascript to keep my files organized.

3.Explored different themes for VS Code to make the interface visually appealing.

Making a small example website project to get an overall idea of full stack web

STARTING WITH HTML

Once my workspace was ready, I dove into HTML, the backbone of any website. I began by:

1.Creating a basic HTML file with a simple structure: a title tag for the page title and a

section for the content.

2.Adding some text to the body to see how it would look in the browser.

This step gave me a clear idea of how the browser interprets and displays HTML content.

Image description

ADDING STYLE WITH CSS

To make the page visually appealing, I moved on to CSS. Here’s what I did:

1.Defined a CSS file to style the page.

2.Experimented with background colors by setting the page background to red.

3.Changed the text color to complement the background.

4.Linked the CSS file to my HTML file using the tag.

Seeing the styles take effect in the browser was rewarding and motivated me to try more CSS features.

Image description

MAKING IT INTERACTIVE WITH JAVASCRIPT

Next, I wanted to add interactivity to my website. JavaScript was the perfect tool for this. I:

1.Created a simple JavaScript file with an alert() function to display a pop-up message.

2.Linked the JavaScript file to my HTML using the script tag.

When I loaded the page and saw the alert appear, it felt like magic! This small step helped me understand the power of JavaScript in enhancing user interaction.

Image description

WHAT I LEARNED

Through this experience, I gained valuable insights into how different components of a website work together. Here are my key takeaways:

1.HTML, CSS, and JavaScript are interconnected: Each plays a unique role in building a website, and learning to link them effectively is crucial.

2.Tools matter: A well-configured workspace can significantly enhance productivity and make coding enjoyable.

3.Experimentation is key: Trying out different features and making mistakes is the best way to learn

FINAL THOUGHTS

Starting my web development journey with a small project has been an incredible experience. It’s amazing how a few lines of code can create something tangible. This hands-on approach not only built my confidence but also fueled my curiosity to learn more.

If you’re just starting out like me, my advice is simple: don’t be afraid to experiment, celebrate small wins, and share your progress with the community. The road to becoming a full-stack developer might be challenging, but it’s also incredibly rewarding.

Happy coding! 🚀

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay