In this coding class, you’ll learn how to develop websites with HTML and CSS, the coding languages used to create webpages.
Learn to Code
We focus on best practices for structuring the content of your webpages with HTML and then styling the content with CSS.
Once you have the basics under your belt, you’ll move on to real-world page layout. You’ll learn text and link styles, centered page layout, background images, CSS-based navigation, forms, uploading files via FTP, and much more. We will provide you with the content and prepared images for use in these projects but this training will give you hands-on practice coding websites from scratch all the way through uploading them to make them live.
Enabling, Disabling, & Editing CSS in the DevTools
Using DevTools to Fine Tune Your CSS
HTML5 Semantic Elements
The Outline Algorithm
The Header, Nav, Aside, & Footer Elements
Understanding Articles & Sections
The Main Element
The Figure & Figcaption Elements
Fluid Layout & Max-Width
Making Images Fluid
Divs for Presentational Style
Assigning IDs to Divs
Assigning Max-Width to Content
Revolution Travel: Real World Layout
Organizing Content into Semantic Sections
The Box Model
What is the Box Model?
Setting Div Width
Fixing a Display Issue in Internet Explorer
Setting Page Defaults for Font Styles
Padding & Margin Spacing
Floats & Images
Adding a Hero Image
Coding Links: Images, Email, & Named Anchors
Anchor Tags & Relative URLs
Wrapping Links Around Images
External Links (Using the Target Attribute)
Spambot-Resistant Email Links
Links Within a Page
Styling the Anchor Tag
The :link, :visited, :active, & :hover Pseudo-Classes
LoVe/HAte: Ordering Link Styles
Styling the Navigation
Semantically Correct Navigation
Overriding Default List Styles
CSS Navigation Styles
Using Descendant Selectors
Shared CSS & Centering Content
Moving Embedded Styles into an External CSS File
Sharing Styles Across a Site
The Text-Align Property
Setting the Viewport Meta Tag
The Viewport Meta Tag
HTML & CSS Wireframe
Linking to an External Stylesheet
Using DevTools to Unpack the Box Model
CSS Background Images
HTML Images vs CSS Background Images
Fun with Fonts
How to Use Google Fonts
Safe Fallbacks in the Font Stack
Improving Line-Height and Margin for Legibility
Hipstirred Layout: Fine Tuning with Box Model
Removing Default Page Margin
Setting a Max-Width
Outer and Inner Wrappers
The Difference Between ID and Class Selectors
CSS Buttons & Floats
Styling Semantically Correct Navigation
Floats for Layout
Float Insert Position
Simple CSS Buttons
Reusing Class Selectors
Hipstirred: Hi-Res Images
Retina or HiDPI Graphics (@2x Images)
Setting HTML & CSS Size to Half the Image's Native Size
Hardware Pixels vs Reference Pixels
Uploading to a Live Website via FTP
What is FTP?
Using an FTP Client
The Form Tag
The Input & Label Elements
Name & ID Attributes
The Button Element
Styling the Form
Learn how to lay out pages with shared CSS for a unified look as well as an optimized workflow.
Learn best practices for fluid layouts that work across devices.
Create impactful layouts with full background hero images, colorful social media icons, and a clear call-to-action.
Learn to create and style forms.
Get Started Coding HTML & CSS
In this introductory class you’ll learn to create and design websites by hand-coding HTML & CSS. We’ll also focus on best practices for both structuring and styling the content of your webpages. By the end of this course, you’ll have built a couple of sites and even uploaded one.
Learn HTML & CSS in Classes & Certificate Programs
CSS (Cascading Style Sheets) code is used to style the contents of a webpage (or email), based on the HTML markup.
CSS controls the appearance of everything, from fonts and color, to building responsive page layouts that look good across screen sizes (mobile, tablet, and desktop).
Start learning CSS in our Web Development Level 1 class. Dive deeper in our Web Development Level 2 class where we cover many important CSS concepts, such as media queries. Learn more advanced ways to optimize for mobile devices and building responsive pages in our Mobile & Responsive Web Design class. The classes can be taken individually, or as part of our Web Design Certificate program.
Mobile phones and tablets all have hi-res screens (Apple calls them Retina), and laptops/desktops are getting hi-res screens as well. For modern websites it’s important to know how to properly create these hi-res graphics, which are often referred to as @2x because the screens are twice the resolution of low-res screens.
JPEG is an image format that’s good for optimizing photographs.
PNG is an image format that’s good for optimizing graphics such as logos and icons. While SVG is replacing PNG in many cases, we still need PNG for HTML Email (where SVG is not as well-supported) and when we need transparency for photographic imagery.
Learn how to create and optimize web graphics (as well as how to design webpages) in any of these courses: Sketch, Photoshop for Web, or Adobe XD.
Hands-on Teaching Style
“I really enjoyed the format of this class...Watching the instructor go through the lesson first and give extra tips to help solidify the information outside of what is written in the workbook is immeasurably helpful... The course helped to show the "why" behind the process. The instructors have been very knowledgeable...The hands on approach is just what is needed in this type of course.” Sarah Lightman, Senior Marketing Specialist
Students learning web design
Custom Workbook Included
“Web Development Level 1 is an excellent introduction to HTML and CSS coding. The fundamental elements were explained and hands-on exercises bolstered an understanding of each function. If you are looking to build a simple web site or gain knowledge of basic coding for customization of existing sites this course is definitely helpful.” Carla Siegel, Art Director
Every Web Development class comes with a custom workbook
Learn Practical Skills
“The class was a great introduction to HTML and CSS! I definitely feel like I have a better understanding of WHY you do certain things and the logic behind the code. It was beginner-friendly and taught practical skills that I can already use. After going home on the last day, I was able to update the navigation on my company's website and add a new page that fit the rest of the website's styling. I could even make it mobile compatible! If I'd tried this a week ago, I probably would've crashed the whole site.” Mary Murphy, Manager
Students learning HTML & CSS skills in class at Noble Desktop
Part of a Certificate Program
This class is included in the Web Design and Web Development certificate programs. Take the other courses to earn a certificate!
Web Design Certificate graduates
“Web Development Level 1 is an excellent introduction to HTML and CSS coding. The fundamental elements were explained and hands-on exercises bolstered an understanding of each function. If you are looking to build a simple web site or gain knowledge of basic coding for customization of existing sites this course is definitely helpful.”
Art Director, Agentsie
Attended Web Development Level 1 to start learning coding
“Just completed the Web Development Level 1 Class. I never thought that I would learn HTML and CSS so quickly. The instructor was great. I would definitely recommend taking classes at Noble Desktop!!!”
Marilyn quickly learned HTML & CSS in the Web Development Level 1 class
“I found the Web Development 1 course very informative, easy to follow, and highly engaging. I find the methods used to teach the course very effective. I finally understand the basics of HTML and CSS, and I'm ready for more. Where other guides become so daunting and lose me, the method used in this class made it much easier to understand the material and learn.”
William enjoyed the teaching method and learned HTML & CSS
“I had always wanted to learn web design but wasn't sure where to start. Noble Desktop gave me the push necessary to get a firm grasp on the basics and built the necessary foundation for me to start exploring new possibilities on my own. The skills learned will most definitely help me grow both professionally and creatively.”
Luis Felipe Basaure
Staff Development Coordinator, United Nations
“Noble's learning and instruction approach is very well-structured and organized. You learn (and code) a lot in three days. Web Development Level 1 is a great introduction to the world of Web Development. I look forward to moving to Level 2.”