Hello.

I consider myself a novice programmer, mainly writing in Ruby. While most of my work is focused on the Ruby-on-Rails environment, I spend the majority of my time optimizing and implementing logic, rather than working on the front-end part. This is partially due to the specific nature of the project.



However, I often have peculiar thoughts about the fact that I cannot truly be a web programmer without being able to build a website from scratch. My lack of skills in layout and web design is a major obstacle for me. Even creating a simple one-page website for a project over the weekend feels overwhelming and hopeless.

While I am proficient in editing tasks and have a basic understanding of HTML, CSS, and JavaScript, starting from scratch is a tragedy for me.

I am not even sure if these skills can be taught effectively, but I feel uncomfortable seeing beginner programmers create pages with interesting designs effortlessly. Moreover, the inability to complete a project from start to finish limits opportunities, such as freelancing, which often require at least a minimal design.

If you have read this far, perhaps you can recommend some lessons, screencasts, or other resources to help me learn how to create minimal page designs. I would like to understand concepts, patterns, and principles in a way that is suitable for someone already familiar with the field.

As you may have realized, I don't need an HTML tutorial or anything similar. I am simply hoping to find creative and interesting materials that satisfy my requirements across various topics.

Here are a few resources and tips to improve your front-end design and development skills, most of these are focused around practical projects and design principles (not just HTML/CSS/JS tutorials):

MDN Web Docs: Though you said you didn't need an HTML tutorial, I'm suggesting this because MDN (Mozilla Developer Network) provides more than just that. It gives a comprehensive understanding of web development tools and best practices. If you skip basics, there are amazing articles about web design and graphic elements that could be useful.

Frontend Mentor: This website provides real-life projects for you to practice your skills. Unlike most coding challenges, they focus on creating websites with front-end designs that you'll actually encounter as a developer. Working on these would definitely improve your comfort level with starting a website from scratch.

CSS Tricks: An amazing resource for CSS but not limited to it. They have numerous design and layout related articles and always keep up with the latest trends.

Refactoring UI book & YouTube Channel by Adam Wathan and Steve Schoger: This resource focuses on designing more intuitive, simple and beautiful interfaces. The creators often rework existing websites and detail their thought process, quite enlightening for understanding design principles.

CodePen: This is a social development environment for front-end designers and developers. It's the best place to build, deploy, and find inspiration. Some skilled designers post their creations here and you can learn a lot just by perusing what's available.

freeCodeCamp's Responsive Web Design Principles course: You may wish to skip the basics but the design related lessons might be useful.

Dribbble & Behance: These are platforms for showcasing and discovering creative work. Web designers often post their work here. Dribbble is full of different styles and trends in the web design world and Behance is more about case studies of design projects. It's not an educational resource per se, but you can gain lots of inspiration and see what's possible.

If you're looking for further resources to dive into, here are some additional recommendations:

Smashing Magazine: This is a website and eBook series with a plethora of comprehensive resources about web development and particularly helpful for understanding the design aspect. Their articles range from in-depth discussions on design principles to practical guides on implementing these principles.

Design for Developers course on Frontend Masters by Sarah Drasner: This is a great course which dives deep into the design component of web development. It focuses on both theory and practical applications, which you can utilize in your own projects.

Deque University: While this isn't solely design focused, understanding accessibility is a crucial component of good web design. Deque University offers courses to understand web accessibility guidelines and inclusive design.

Adobe Color: This is a free web app to assist with color scheme selection. It's a valuable tool in the design process as harmonious color selection can substantially uplift the overall design.

Figma: This is a cloud-based design tool that is highly useful for user interface design. There are plenty of free resources and tutorials available to get started. It will help you visualize your designs before coding them.

Scrimba: Interactive screencasts where you can pause and edit the code at any time. They have courses on design like the Responsive Web Design Bootcamp.

Daily UI: This is a fun little challenge for improving your design skills as well. They send a UI prompt every day for 100 days and you design a small element (like a sign-up form or landing page) based on that prompt.

Flexbox Froggy and Grid Garden: Games for learning CSS Flexbox and Grid respectively. Very hands-on and they require you to build layouts to progress through the game.

Web Design for Web Developers (Udemy): This is a free course by Jonas Schmedtmann which includes practical tips and techniques to make your web apps and sites look beautiful.

The Futur (YouTube Channel): This channel primarily focuses on the business side of design, but they also have a lot of content covering basics of typography, color, UI/UX, and more. The foundational understanding you get here can be really helpful for application design.

UI Design Daily: This website offers free, open-source UI design resources and inspiration. It's a great place to practice by replicating designs.

Learn UI Design: This is a full-length online course on user interface and web design: color, typography, grids, design process, and more. It includes video lessons, detailed write-ups, and downloadable Sketch files. This is a paid course, but you might find the investment worth it.

Awwwards: If you want to keep yourself updated with the state-of-the-art in web design, this website is the place to visit. It's a professional web design and development competition body, and the site showcases nominees and winners of their best web designs.

Canva Design School: While Canva is generally a tool for non-designers, their design school has lots of great, free content about basic design principles.

Material Design by Google: This is Google's own guide to visual, interaction, and motion design across platforms and devices. It's a very comprehensive and detail-oriented manual which will give you a good base on material design principles.

Layout Land (YouTube Channel): Jen Simmons, a Designer Advocate at Mozilla, breaks down CSS Grid, Flexbox, and general layout principles on a level that anyone programmer-turned-designer can understand and apply.

Design Course (YouTube Channel): A popular YouTube channel for design education with a myriad of topics covering UI/UX design, graphic design, frontend development and more, taught by a professional designer/developer.

Dribbble: This is a platform where designers showcase their work. It can be a great place to get inspiration for different styles and latest trends in design.

Behance: Similar to Dribbble, it's another superb platform for design inspiration, additionally handy for finding complete projects rather than single shots of design work.

Don Norman: The Design of Everyday Things: This isn't a tutorial or course, but it's a must-read book for anyone interested in design. Don Norman is a cognitive scientist and usability engineer and even if the book does not specifically deal with web design, its principles can be applied universally.

Web Design Playground by Paul McFedries: This book takes you step by step from writing your first line of HTML to creating interesting, beautiful, and responsive web pages.

Codepen: It's an online community for testing and showcasing user-created HTML, CSS, and JavaScript snippets. A great place to find design inspiration, learn from others' code, and to share your own code as well.

UX Collective (Medium Publication): Offers a wealth of articles on UI/UX. It's a good way to get yourself familiar with design thinking and user-first design processes.

Design + Code by Meng To: An immersive guide to learn about UI design, iOS design, and design for the web. The course also covers design tools like Sketch and Figma.

DesignBetter by InVision - This platform provides best practices, stories, and insights from the world's top design leaders. It offers resources for everything from design thinking to workshop practices.

Skillshare - A platform that offers thousands of classes, including plenty on UI/UX design. It operates on a subscription model but often has special offers and free trials that might be worth exploring.

Smashing Magazine - An online magazine for professional web designers and developers, with a focus on useful techniques, best practices, and valuable resources.

UX Design Edge - Everett McKay's UX Design Edge helps software professionals create better user experience through design training and consulting.

100 Days of UI on Instagram - A one-of-a-kind course that primarily delivers its content through Instagram, with small, digestible chunks of theory and challenges that change daily.

Design Systems by Alla Kholmatova - The book covers creating design systems and examines the properties of effective design systems.

Figma and Adobe XD - Tools that are instrumental for UI/UX design work, and both provide resources and tutorials to improve skills.

Frontend Masters - A course platform for learning JavaScript, HTML, CSS, and related web technologies, they also have comprehensive courses in design and front-end related tools and concepts.

Coursera: Coursera offers a variety of specializations and individual courses from universities and top industries around the world. They offer classes in everything from UI/UX design to graphic design and web development.

Lynda / LinkedIn Learning: They have a wide array of design courses, including tutorials specifically for web and UX design.

NN/g Nielsen Norman Group: A leading voice in the user experience field, conducting groundbreaking research, evaluating user interfaces, and providing UX training.

Awwwards: A website that recognizes and promotes the talent and effort of web designers, developers, and agencies in the world. It's a great source of inspiration, seeing what the best minds in web design are creating.

UX Magazine: UX Magazine covers a broad range of topics centered around the conversation of UXDesign. They provide a steady stream of content about design that's both engaging and highly informative.

Udacity's UX Designer Nanodegree: A course developed by Google UX designers that covers a good theoretical base for UX design.

Canva Design School: If you're getting started with graphic design, Canva's own tutorials could be handy.

Sidebar: A daily newsletter for designers, Sidebar provides 5 of the best design links each day.

Five years ago, I was in your shoes. Despite being a freelance coder rather than a designer, I found myself faced with a similar challenge.

The way I tackled the web design process was to break it down into three stages:

Conceptualise a general outline of how the site will look and function, determining the blocks and pages.
Refine this concept into detailed page layouts, which are often handed to programmers as images.
Visualise the final outcome, from realization to completion, as depicted in stage 2.
When it comes to the first stage, I can't offer much guidance as it is primarily problem-solving. Several strategies are applicable, but the common factor is decomposition. It starts with a broad concept like "an online store" or "a beauty blog". Gradually identify the various parts that make up the concept. For example, an online store would need product lists, search and sort functions, and a purchase process. Break down each component into digestible parts, which become your page blocks. Iterate this process, adding and subtracting elements. This results in a blueprint or draft of your site.

The second stage is a test of graphic skills, imagination and aesthetics. As someone lacking in artistic ability and creativity within this scope, I resort to creating basic shapes or seek inspiration from other sites. While I can handle image processing, I am no fan of this task. I prefer using image collections if needed or omitting them entirely in favor of a minimalist approach.

The final stage is known as layout construction. Ideally, designers should be involved here to understand the end-user perception of their designs. However, most designers lack the ability to work in this phase, often leading to revisions. Meanwhile, everyday programmers must put their capabilities to the test, especially when dealing with preconfigured blocks and their interactions. Layout creation is distinctly different from layout modification or troubleshooting. I found this difference greater than starting a coding project from scratch versus editing existing code. It might be due to the numerous choices during layout creation, or perhaps my thought processes prefer a more flexible approach.

The only advice on learning I can give is the usual: practice, try, fail, analyze, and retry. I began with basic diversities, learned from my mistakes, and repeatedly improved. My personal webpage underwent approximately 20 revisions. Some were complete overhauls. My current design stood the test of time for a few years, yet I already feel the itch to change something. What though, I haven't determined yet.

I am not the best person to suggest books or courses as I have had limited success with structured learning. It is rare to find a book that justifies the time invested. As for courses, I have experienced a similar disappointment. My approach has always been learning from what's available — examine the code of every site I come across. Be wary, however, as not all the pre-made "recipes" meet the expectations.

Facing a similar challenge myself, I work in the capacity of a front-end developer, translating finalized design layouts into real. But there's a subtle hitch — I possess a deep understanding of the 'behind-the-scenes' of transforming a draft design into an interactive template, so I might unwittingly simplify challenging elements while iterating my own designs. Contrastingly, the designer, owing to a lack of awareness about the intricacies of constructing a layout, would not curtail his or her visual imaginations!

Agreeably, the aforementioned-reference on psd.tutsplus.com serves as a compelling learning resource, offering a glimpse into modern design trends. Delve into the multitude of design element libraries, say creattica.com, smashingmagazine.com, or simply look up "web-design inspiration" on the internet. Adding to this, consider seeking out design critiques from peers, attending web design-focused meetups, or participating in related online communities for enhanced learning and to keep up-to-date with the evolving design landscape.