About "The Layout Project"
Introduction
Hi! I'm Danesia, and I'm the developer of this project (^o^)
One of the most difficult things for me as a self-taught Front-End Developer... is creating layouts. Yes. Creating layouts!
I have artistic vision and some experience with graphic design; but being able to come up with a design and flesh out a draft does NOT mean you'll automatically be able to translate that design into code / markup. It's easy to drag and drop elements into place in Photoshop or Figma or Adobe XD; but designing a layout using code requires a basic understanding of the logic under the hood... and I seriously struggle to understand that logic a lot of the time.
In the past, whenever I tried to use CSS tools like floats or Flexbox or Grid, I would go to war with my code for at least a half-hour before hitting a brick wall and leaving everything unfinished for the day. It was frustrating and I usually found myself feeling unconfident in my journey to becoming a professional Developer. ☹
Thankfully... I don't have the luxury of giving up on my dreams haha. I was determined to improve!
So, I went back to the drawing board, reflected on my mistakes and frustrations, and slowly developed a series of practice projects that would help me to not only understand, but also to befriend CSS layout tools. When I was in the middle of coding my first layout in the series, my practice efforts officially became... ✨The Layout Project!✨
Inspiration and Process
Ultimately, my inspiration for these layouts come from the world of Graphic Design. To be honest, I didn't always see it this way! I made the connection with things like Typography and the concept of making visually coherent layouts... but I didn't see the full potential of Front-End code for visual design until I did the Cafe Menu exercise on freeCodeCamp! That, and their Nutrition Facts Label exercise were eye-openers for me, haha.
After being exposed to the techniques in those lessons, I made a conscious effort to "see the code" in the world around me. From food labels to book covers to the front of my microwave oven, and also things in the digital realm like my desktop screen or the lesson pages in my favourite language-learning apps.
Basically, I made it a habit to consider the question "How might I go about building this with code?" And, well... it's really paying off! I still have a long way to go, but I feel like I'm becoming a better designer and problem solver as I go along.
Long-Term Vision
This is a practice project and I don't currently have any plans to take it beyond that... however! As long as there are things for me to learn, there's still value in continuing this project in the long term (and nearly anybody who works in tech knows that lifelong learning is a part of the journey!)
Here, I'm focusing on my CSS and JavaScript skills; but apart from these, I also want to build up my understanding of UI/UX, Accessibilty, workflow methodologies (like Agile), and more. My hope is to incorporate these things into my development process while practising the layouts. For each layout, I'm practising my documentation ability by making "changelog" pages and leaving explanatory comments in the code. Also, I intend on adding short "Case Studies" to each layout page to get myself talking about the thought process and considerations I had while coding - as well as what I learned from the experience.