When I began learning web design, I built websites using Adobe Dreamweaver because I could see a visual output of what I was building. This was familiar to me because I was used to designing in Illustrator and Photoshop. However, when the site wasn’t working I had no choice but to use the source code tab and try and troubleshoot the problem. I was overwhelmed with all of the robotic text that made absolute no sense and it was all disorganized and hard to read.
The frustration of not knowing how to fix buggy Dreamweaver code pushed me to learn how to hand-code HTML and CSS. In this post I will discuss the top five struggles I faced and my recommendations for how you can avoid them.
1. Why does my site look different across browsers?
One of the biggest frustrations I faced early on was cross-browser consistency. Things look great in one browser and not so much on other browsers. When I started, IE6 was widely used and web developer tools like Firebug were just being introduced. Today I work and test extensively in Chrome until I get the rough framework in place. Then I test this draft in the other browsers I want to support, mainly IE, Firefox, and iPhone Safari.
Things I have learned
- Test prototypes early before adding tons of styles. This will ensure the most basic styles are working before you add more complexity.
- Write CSS for your most common users and decision makers. Make sure you know what browser your boss or client uses and make sure it looks great in that browser. Otherwise, they will assume it looks wrong everywhere.
- Be aware of what CSS properties are widely supported across browsers and avoid the ones that are still being worked out. A great resource to find out is Can I Use.
- Using a CSS framework like Bootstrap eliminates 80-90% of the things you could do wrong. Since it is widely used and open source, the code is highly stable due to the rigorous testing and bug tracking. Responsive design adds multiple layers of complexity to a project and using a framework will help you stay consistent and stand on the shoulders of giants. For smaller projects you could create a custom CSS framework or use Pure CSS to apply a quick responsive grid.
- Over time you will learn the common browser bugs and quirks. Here is a good list of common gotchas.
Tools that help with testing
- Cross Browser Testing
- BrowserStack
- If you own a mac, you can download the iPhone SDK to test sites using an iPhone simulator
2. How do I get my first job or paying client?
Are you looking to earn some side income or want to transition into a new career building websites? When I started I first learned how to build a static portfolio site to help me showcase some of the projects I was building. Building a static site will help you learn the building blocks of HTML, CSS, and some PHP. In addition, you will gain experience purchasing a domain, setting up a web host, and uploading files to a server.
Once you have a static portfolio site, learn how to build a custom WordPress theme. Build a WordPress site for a friend or family member for free to gain the knowledge. Once you feel confident I recommend looking for some freelance projects on Craigslist or a similar site for WordPress updates or customization work. This will help you gain some practice working with clients and billing them. Then start bidding on larger projects or custom theme builds. After you gain 5-6 really strong projects you are ready to start applying for jobs as a front-end developer. Just be forthcoming with your experience and list your core competency.
Your goal is to have a conversation with a hiring manager like C3PO.
If you lack knowledge in an area, explain how your knowledge in another area applies and will help you gain this new knowledge.
Progression of gaining and demonstrating competency
- Static portfolio site
- Use PHP includes of partial code (header, footer, sidebar)
- Setup pretty urls without file extension and trailing slash using htaccess
- Work locally then FTP to a web server
- Custom WordPress theme
- Learn WordPress loop and template tags
- Installing plugins
- Site management and client relationships
3. How am I supposed to remember everything?
Its impossible to remember every class, function, and element. The more sites you build the more you will be able to recall the most used classes. For everything else have easy access to reference sites, books, cheat sheets, QA forums to get help when you need it.
“Repetition is the mother of learning, the father of action, which makes it the architect of accomplishment.” ― Zig Ziglar
“Never memorize something that you can look up.” ― Albert Einstein
Good places for reference
- CSS Reference
- Bootstrap 4 Classes Reference – Bootstrap 3 Classes Reference
- HTML Reference
- JavaScript Reference
- jQuery Reference
- Stack Overflow
4. What are the best practices I should follow?
It is a good idea for beginners to learn the best practices early on to help solidify strong habits. There are thousands of books, blog posts, podcasts, and YouTube videos providing advice on the best practices to follow. It is my recommendation to stick to long-standing authorities with a large following. This will ensure the information provided is vetted by a large number of people and of high quality.
Web development best practices
- Code guide was written by the creator of Bootstrap
- Guide on how to do a CSS code review
- In my opinion, Bootstrap is built and maintained by the best minds in front-end development. Try and model your code by what they do with their source code.
- Read and follow high-quality blogs and resources like the following: CSS-Tricks, A List Apart, 24 Ways, and Oreilly Books.
- Google Design Blog
5. How do I test websites locally?
The easiest way to start testing sites locally is using a tool called WAMP on windows or MAMP on a mac. It lets you run PHP, apache, and even phpMyAdmin for MySQL database configuration.
- This tutorial will help you setup WAMP on a windows machine.
- This tutorial will help you setup MAMP on a mac machine.
Conclusion
I think the best decision I made early on was to ditch Dreamweaver and learn how to hand-code HTML/CSS using a basic text editor. It was hard to understand and I encountered a lot of bugs but this helped me understand what Dreamweaver was doing for me. I soon realized I didn’t need it anymore because I had the confidence to work with the source code and knew how to troubleshoot things if things went wrong. I hope this list of my top struggles help you avoid the same.
What are some struggles you face right now? Email me and let me know.
