Stories
Tagged with CSS
My New Course: WebStorm Fundamentals
Last week my seventeenth course for Pluralsight! I love building content for Pluralsight and it allows me to teach technologies that I am utilizing in my own life. This new course is no different.
The new course is all about using WebStorm 9 to build web applications. The course was built using the WebStorm 9 EAP so I was able to cover new features as well as the basics.
The course is taught over six modules covering everything from basic HTML, CSS, and JavaScript but also delving into more advanced features of the IDE. The topics covered include:
New Course: Front-end Web Dev Quick Start
It’s that time again. I’ve recently released a new course on Pluralsight. This time I tackle Web Development for complete beginners.
If you are a developer who wants to move from either back-end development or from desktop development to client-side web development, this course may be for you. The concept around the course is to get you up to speed with the very basics of web development in a short amount of time. In fact, in just over three hours, you should be able to get a basic understanding of web development.
After viewing my course, there are other courses that will take you through deeper knowledge of modern web development, but the basics is where you should probably start. In the course we cover the bare bones that you need including:
Bootstrap 3 Grid System Explained
Are you starting to work with Bootstrap 3? If so, maybe I can help. I’ve recently released a Bootstrap 3 course on Pluralsight that covers many of the new features including how to migrate from Bootstrap 2 to 3.
Here is an excerpt from the course where I explain how the new grid system works in Bootstrap 3:
Editing Styles with Firebug
Most developers I know simply hate web design. As far as many developers are concerned CSS is evil. What CSS does for the web is magical but can be painful for developers that are used to functional or structural languages.
Luckily the browsers come to the rescue with great tooling. Here is a preview from my “Debugging the Web” Pluralsight course” which shows some of the basics:
What do you think?
Refactoring Nested CSS Rules using LESS
One of my favorite features of LESS is the ability to simplify my CSS rules that are deeply nested by using LESS to compose them more simply. I like this feature because it gives me the ability to clean up messy CSS files and make them more maintainable. Take a look to see what I am talking about.
LESS is an open-source dynamic stylesheet language for adding features to the CSS language that help you build better CSS. LESS parsing is supported in the free Web Essentials extension for Visual Studio 2012 and 2013 (though not supported for the Express editions) as well as in the free WebMatrix tool from Microsoft. It is also supported in most IDEs, as a JavaScript library and even a command-line LESS builder.
You can view this excerpt from my Pluralsight course covering Web Debugging with Firebug, Fiddler and more. If you want to view the entire course, you can find it here:
DevLink 2013
Thanks to everyone for attending my sessions at this year's DevLink 2013 conference in Chattanooga, TN. I had a great time at the aquarium and enjoyed meeting so many of the attendees. If you get a chance, you should add this to your conference attendance next year.
I gave two talks at this year's event. I promised the attendees to get them the code from my talks. Here they are:
Zen Coding (Emmit) with Visual Studio
As many of you know, I have a new course with Pluralsight called "Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure". I had the opportunity to use Zen Coding (renamed Emmet for some reason) in the course. We've released a snippet of the course on YouTube that shows off this cool productivity enhancement that Web Essentials powers. Caveat: Web Essentials doesn't work with free versions of Visual Studio.
NOTE: The title of the video is incorrect and we're trying to change it...it is about Zen coding.
UPDATE: It was noted that I misspelled it. It's Emmet not Emmit. I fixed it in the article, but I can't fix it in the title as that's my URL too.
Atlanta Code Camp 2013: Done!
I want to thank all the attendees, speakers and my compatriots in planning the Atlanta Code Camp. I had a great time helping make this event the best one we've had so far. Some of the numbers:
428 attendees (including speakers and sponsors)
54 Talks Given (plus a great Keynote)
My New Web Development Course is Live
Are you getting ready to build a new website? Are you interested in shortening your development by using Bootstrap, AngularJS, Azure and ASP.NET? If so, my new course might be just for you.
In this new course I build a new web site from scratch. I start out with a Bootstrap template (since my design skills suck) and move through creating content, building a database, exposing a REST-ful API and building a Single Page Application. I wrap it up by publishing the site to Azure Web Sites showing you how to not only get your application up an running in the cloud, but also how to monitor it and handle standard tasks like using your own domain in Azure.
You will see every line of code (with one small exception) that I write. This isn't slide-ware…it's show-n-tell. I use a range of technologies including:
Building Atlanta Code Camp Website
I recently helped the Atlanta Code Camp effort by building them a new website. You can see it here: Atlanta Code Camp. I am pretty proud of what I was able to accomplish in the scant number of hours I had to build it. It's not done as we need to improve it when we have the speakers chosen and set up the schedule, but so far I am pretty happy with it.
I had a number of goals for the project:
My first thought was to start with a Mobile-First template and just build the site but as #4 was going to stymie that as PluralSight would really like me to finish my courses ;) So I started with a Bootstrap template (that I got from https://wrapbootstrap.com). This provided a good basis for the shell of the website. Before I did real color skinning of the site, I needed to wait for our logo. Dennis Estanislao did an amazing job on the logo. With that I was able to use the color scheme to change the template to match the logo and overall theme. But that was just the HTML part of the story.
My DotNetConf Talk on Mobile-First Design
I had a great time at yesterday's online DotNetConf. I think my "Mobile-First Responsive Web Design" talk went pretty well. You can see the talk on YouTube (embedded below). The talk was focused on designing websites to be efficient on mobile platforms by starting with your design on a mobile and scaling up to tablets and desktops.
If you viewed my talk, you might be interested in the slides and source code. You can get them here:
You can view the talk here:
My Practical PhoneGap Course is now Live!
If you're interested in cross-platform mobile apps, I like the solution that PhoneGap has. It uses HTML5/CSS/JS as the UI stack and I find it compelling to build apps for iOS, Android, Kindle, Windows Phone and Windows 8 Store. I've just released a new course on PhoneGap that attempts to fill in some of the holes in building apps. The course includes:
Hope you enjoy the course. You can view it here:
http://pluralsight.com/Courses/practical-phonegap
ReMIX South 2012
I had a great time at ReMIX South this year! It's been great to meet developers and designers and learn how they are using design tools of all sorts.
If you attended my "Modern Web Development" workshop, here is where you can get the slides and code. If you have questions about the workshop, please just add a comment and i'll respond as soon as I can:
Thanks again to all who attended the session!
LESS at DevLink
Just finished my talk at DevLink on "A Better CSS: LESS is More…". It was a good crowd and I was surprised that so many people had already heard of LESS which is awesome. Hopefully I covered the breadth of the language. It was a fun crowd and it's been a fun conference. If you haven't had a chance to get to Chattanooga and see the fresh water aquarium, it shouldn't be missed!
I promised the crowd that I would share the slides and the code. You can go both here:
If you had any questions about the talk that you didn't get a chance to ask me, feel free to drop me a comment below and I'll try to answer it.
Great Time at Gwinnett .NET Users Group
I headed up to the Gwinnett .NET Users Group last night had we talked all about mobile web development using ASP.NET! If you were there, thanks for attending and here are the slides and code as promised!
If you had any questions that you didn’t get to ask at the talk, just comment below.
aspConf was fun!
I had a good time doing a couple of talks today. If you joined me online, thanks for coming. For those who missed my talks, they will be posting the videos on Channel 9. As promised you can get the slides and examples here for my talks:
I hope you enjoyed the talks!
New Pluralsight Course on Debugging Web Sites
After a long gestation, I finally completed my Web Debugging course for Pluralsight. This new course covers the details of using the tools in the browsers to debug layout, JavaScript, CSS and networking. While the course shows you how to find the tools in all the major browsers, the focus is using Firefox and Firebug. Though the techniques shown in Firebug apply pretty seamlessly to all the browser tools. This course is not .NET specific, but should be useful to any web developers.
The course is broken up into four sections:
You can see the course here:
Atlanta Code Camp Wrap-up
I had the pleasure of joining many of the Atlanta .NET community for the annual Atlanta Code Camp. If you didn't get a chance to join us, you missed a great time. The attendees were enthusiastic and friendly. Thanks to everyone who attended!
I promised the people who attended my sessions I'd post the slides and example code so here you are:
Mobile Web Development
CSS for the XAML Guy - Positional Selectors
I got into a longish, public discussion last night about XAML versus the HTML/CSS stack last night. I think they both have merit and pros and cons but it made me decide to add a short series of posts that highlight some of the CSS things that surprised me most (like my JavaScript for the C# Guy posts - and yes, more of those are coming too).
The first topic I am covering is some subtleties of the selector syntax. CSS selectors allow you to pick children, descendants and adjacent siblings. I found that I used descendant selector quite a lot:
#main h1 /* descendant */
{
color: Red;
}
This syntax effectively says, any h1 inside an element named "main". I see people assume this actually means, *directly* inside the "main" element. So if you had some HTML like this, all h1's inside "main" would be colored red:
Modern Web Development - Part 9
This is the ninth of ten parts of this blog post. 
The topics will be:
Why do users complicate our lives by trying to view our content on their phone and tablets? It's even an issue for smaller sized desktop screens too. Since this is simply a reality for today's web developer I was glad to see there were real strides in working with mobile.
In general there are three techniques for dealing with mobile device browsers:
I've been Deep Fried...Again!
So I've done it again. I survived another 30 minutes with Woody and Keith. Whew. We had a good conversation about the current state of Web Development and the future of XAML development.
I also got to discuss fried foods and make fun of Keith. Couldn't have been a better time. Go listen now:
From my Web Dev for XAML Devs Talk
I had the opportunity tonight to do a talk for the Atlanta XAML Meetup on Web Development for XAML Developers. I had fun explaining how XAML developers can use their existing skills with markup, design, data binding and data access on web page development. You can see the slides from the talk here:
If you’re interested in the code from the talk, you can get it here:
LESS is More? So is SASS!
So my new course is live at PluralSight! If you’re looking to take the 3rd Part of my Modern Web Development article to heart, my new course is just for you!
“LESS and SASS can style sheets more readable, maintainable and easier to write.”
Modern Web Development - Part 6
This is the sixth of ten parts of this blog post. The topics will be:
The Problem
As you develop HTML apps, one of the issues you’ll face is that your application doesn’t come to the browser in one fell-swoop. A typical web page receives content from a number of sources. Below you can see the first bun of requests from a site (in this case MSNBC.com) as shown in Firebug:
Modern Web Development - Part 4
This is the fourth of ten parts of this blog post. The topics will be:
Debugging
I’ve had Visual Studio open constantly on a laptop for the better part of ten years (and fifteen if you count Visual C++). I am used to setting breakpoints inside of the Visual Studio editor and pressing F5 to see what is happening.