DEV Community: Pernilla Wigh

AI-Empowered Frontend Learning

Pernilla Wigh — Wed, 23 Aug 2023 08:01:17 +0000

Welcome to my blog!

Just like Sweden's weather, this space offers intriguing experiences. Today, I'll reveal my unique AI-powered prompt for practicing frontend development.

Curious to explore this journey – from AI assistance to mastering frontend – as we delve into the synergy between learning and technology?

A Path of Learning and Discovery

As I immerse myself in frontend development, challenges, understanding, and the joy of coding intertwine. Completed projects bring accomplishment, yet another growth factor emerges: AI.

Exploring with Humble AI Guidance

In my ongoing journey, I've uncovered an intriguing tool: AI-generated exercises. These tasks expand my coding horizons subtly yet remarkably. This partnership refines, not replaces, my learning process. Curious? In the next section, find the prompt I use, ready for your experimentation. Feel free to copy and paste (ensure you copy everything) 😊

My AI Prompt for chatGPT

Frontend Development Learning and Practice:

Hello! I'm your frontend development mentor, here to guide you step by step. Please let me know the specific area you'd like to focus on, such as "functions" or "CSS positioning." I'll then provide you with relevant difficulty levels and their concepts.

Once you choose an area and a level, I'll explain the concepts clearly and offer tasks related to that level. If a new concept comes up in a task, I'll introduce it to you and ask if you'd like a lecture before proceeding. If you're unsure about a concept or task, feel free to ask questions.

Would you like to start by selecting an area to practice?

Example Interaction:

You: "I'd like to focus on functions."
AI: "Great choice! Here are the difficulty levels for functions:
Level 0: Introduction to functions and their syntax
Level 1: Working with parameters and return values
Level 2: Advanced function concepts like closures and callbacks
...
You: "I'll start at Level 0."
AI: "Perfect! Let's begin with Step 1 at Level 0: An introduction to functions and their syntax..."
AI: "Step 1 - Introduction to Functions: A function is a reusable block of code. It can take input (parameters) and return output. Here's an example of a basic function:
function greet(name) {
return 'Hello, ' + name + '!';
}"
You: "Got it. Let's move to Step 2."
AI: "Certainly! Step 2: Task - Write a function that calculates the area of a rectangle. Would you like a lecture on this before proceeding?"
You: "Yes, please."
AI: "Lecture - Calculating Rectangle Area: To calculate the area of a rectangle, multiply its length by its width..."
AI: "Now that you know the concept, here's your task: Write a function that calculates the area of a rectangle."
You: Complete the task.
AI: Reviews your code, provides feedback, and asks, "Would you like more practice tasks at this level, or are you ready to move up to Level 1?"

Feel free to use this prompt as a basis for your interactions with the AI. It encourages a step-by-step learning approach, with the AI supporting your progression as you master each level before moving on.

Closing Thoughts: AI, Learning, and Beyond

Halfway into my frontend adventure, AI quietly enriches my learning. As I reflect on progress, gratitude fills me for this unexpected partnership.
Speaking of learning, have you embraced AI in your journey? Has a similar prompt elevated your skills? Thoughts on tech-driven skill enhancement? Let's discuss!"

Embracing the Learning Journey!

Pernilla Wigh — Tue, 15 Aug 2023 08:32:36 +0000

Hello there, lovely souls! Today, I woke up with a heart full of excitement. Guess what? I've sailed through 28% of my learning voyage on Scrimba. As I take a stroll down the memory lane of this summer's learning, it's a joyful realization—so much progress under the sun!

HTML5 Exploration: Navigating the Web's Backbone

Structure and Semantics: Ever wondered how to give your webpage the perfect structure and meaning? Well, I did too! I've delved into semantic HTML and got cozy with elements like header, nav, and more. They're like puzzle pieces that give structure and significance to the content.
Forms and Interaction: Forms, oh my! I've danced with form elements and their buddies like input, select, and more. Now I can confidently handle user interactions and gather data like a pro.
Multimedia Moments: Pictures speak a thousand words, right? I've learned the art of inserting and managing multimedia elements like img, audio, and video. It's like adding spices to a recipe!
Semantic Symphony: Let's get fancy with semantics! By using semantic elements, my web content is not just organized but also more accessible for everyone, including those with different abilities.
Links and Exploration: Navigating the web is an adventure, and I've got my compass—a elements! With proper URL structuring, I'm confidently cruising through cyberspace.

CSS Chronicles: Crafting Visual Delights

Syntax and Styling: Imagine a world where you can style your HTML elements. Well, I've entered that realm! Selectors and style rules are my brushes, and I'm painting the web in my colors.
Box Model Magic: Padding, margin, border—these terms might sound strange, but I've learned how they shape the size and placement of HTML elements. It's like arranging furniture in a room!
Layout Land: Float, position, flexbox—I've explored different techniques to create web layouts that are visually captivating and responsive. It's like arranging a digital puzzle.
Colors and Backgrounds: Just as a painter selects their palette, I've learned to choose colors and background properties to create eye-catching and readable web pages.
Pseudo-powered Styling: Pseudo-classes and pseudo-elements, oh my! They add a touch of enchantment to specific interactions, like hovering or clicking.
Smooth Transitions: Transitions and animations are like adding a dash of magic to your web page. I've grasped the art of creating smooth movements using CSS-transition and keyframes.
Flexible Flexbox: Flexbox—a flexible layout model that makes creating complex layouts a breeze. It's like crafting a web of interconnected elements.

JavaScript Journeys: From Novice to Knowledgeable

Variables and Datatypes: The world of JavaScript variables is no longer a mystery to me! With var, let, and const, I've declared my data kingdom. Strings, numbers, booleans, and objects are now my companions.
Operator Orchestra: Mathematical operations, logical comparisons—I've mastered the art of these symbols. They're the building blocks of my code symphony.
Control Craftsmanship: If-statements, switches, loops—I'm now the maestro of program flow. I've learned how to orchestrate the perfect coding melody.
Function Fundamentals: Functions are like secret recipes. I can now cook up code that's reusable, neat, and efficient. Plus, I've mastered the art of scope!
Object Odyssey: Objects and classes—meet my coding companions! They're the characters in my digital story. I've dabbled in object-oriented programming and created my cast of digital friends.
Array Adventures: Arrays are like treasure chests. With methods like push, pop, and more, I've unlocked their secrets to storing, fetching, and transforming data.
DOM Dancing: Ah, the Document Object Model—where HTML meets JavaScript. I've tapped into its power to interact with HTML content, styles, and attributes.
Event Exploration: Interactions galore! I've learned how to listen to events like clicks, hovers, and keypresses. It's like throwing a party for user actions!

And that's not all, my friends. I've ventured into the realms of Visual Studio Code, GitHub, Netlify, CodePen, Figma, Canva, and even Krita (I'm also working on my Firebase fluency). But you know what's even more exciting? I've embraced the world of blogging, cracked the code of Discord, and tamed the Twitter bird—X marks the spot!

Each of these discoveries was born from a single summer's journey. There's so much more to explore, and I can't wait to dive deeper into the world of coding. If you're on a learning journey too, I'd love to hear your stories! Let's share the joy of discovery and keep this learning adventure alive.

My Journey: JavaScript Challenges and Scrimba!

Pernilla Wigh — Thu, 10 Aug 2023 07:34:33 +0000

Hello, everyone!

I'm Pernilla, a nurse consultant with over 30 years of experience in the field, specializing in cognitive therapy within psychiatry.

In my spare time, I'm an avid bridge player. Aspiring to one day participate in the Swedish Championship, despite being a newcomer to the game, I find it rewarding for the sense of community and personal growth it offers.

Introduction: My Path to Web Development

It all started this spring when I discovered a hidden passion for web development. As a nurse consultant, I never imagined that I would delve into the world of frontend development.

However, the desire to create a personal website where I could showcase my two passions - the art of being human and the art of playing bridge - drove me to explore the exciting realm of web development.

Embracing the Challenge of JavaScript ""

As I embarked on my web development journey, I encountered a daunting obstacle - JavaScript. This powerful scripting language seemed like an entirely different realm, and I found myself struggling to grasp its concepts. The complex syntax and dynamic nature left me feeling overwhelmed. I knew I needed a better approach to understand this integral part of web development.

Discovering Scrimba - A Game-Changer in Learning

In my quest for a more effective learning platform, I stumbled upon Scrimba. This interactive and hands-on learning platform turned out to be a game-changer for me.

Scrimba's tutorials allowed me to watch code being written in real-time and engage with the material at my own pace. The interactive format and immediate feedback on my code significantly enhanced my learning experience.

Making Progress in HTML and CSS

Through Scrimba's engaging approach, I made significant strides in HTML and CSS. Designing web layouts and styling elements became an exciting puzzle for me to solve. As I constructed various designs, it felt like I was piecing together a beautiful mosaic of creativity and functionality.

Navigating the Challenges of Firebase and JavaScript

However, as I progressed further, I reached a challenging section that involved Firebase integration with JavaScript.

The complexities of Firebase left me feeling lost and confused. Despite my best efforts, I struggled to grasp its functionalities and how to incorporate them into my projects.

Seeking Community Support and Guidance

Faced with these hurdles, I turn to the web development community for assistance.

I'm sharing my journey here in hopes of finding guidance and support. I believe that with the help of others who have overcome similar obstacles, I can conquer the challenges of Firebase and continue growing as a frontend developer.

Looking Ahead - My Future in Frontend Development

My journey in frontend development has just begun, and I am excited about what lies ahead. As I gain a deeper understanding of JavaScript and Firebase, I plan to explore more advanced concepts in web development.

My goal is to create an engaging and informative website that beautifully intertwines my passion for the human experience and the strategic intricacies of bridge playing.

Conclusion: Embracing Growth and Learning

In conclusion, my transition from a seasoned nurse consultant to a frontend developer will be an exhilarating experience.
Scrimba is an invaluable tool in my learning journey, providing me with interactive and engaging tutorials.

While JavaScript and Firebase present challenges, I am committed to overcoming them and reaching new heights in frontend development.
I am grateful for the opportunity to share my journey with you all and look forward to the support and insights from this wonderful web development community.

Thank you for being a part of my journey and for sharing in the joys and challenges of learning frontend development!